Dynamic UI components building using API JSON response

Question

I have to create Dynamic UI meaning based on the API JSON response received. 
 I will be receiving the input type like check box or input and all the other attributes in JSON response, using that can i create the component and create dynamic UI?

Mathieu Drouin · Answer

Here's a simple example to get you going. Your API would have to send you something along those lines. 
 You'll have a hard time storing this in the DB in a relational schema unless you are just storing the json that you will be sending back to the API. 
 a!localVariables(
 local!objectMap: {
 a!map(
 type: "text",
 label: "Name",
 key: "Name",
 value: null
 ),
 a!map(
 type: "dropdown",
 label: "Type",
 key: "type",
 choiceLabels: {
 "Value 1",
 "Value 2",
 "Value 3"
 },
 choiceValues: {
 "Value 1",
 "Value 2",
 "Value 3"
 },
 value: null
 )
 },
 a!forEach(
 items: local!objectMap,
 expression: a!match(
 value: fv!item.type,
 equals: "text",
 then: a!textField(
 label: fv!item.label,
 value: fv!item.value,
 saveInto: fv!item.value
 ),
 equals: "dropdown",
 then: a!dropdownField(
 label: fv!item.label,
 placeholder: "Choose a value",
 choiceLabels: fv!item.choiceLabels,
 choiceValues: fv!item.choiceValues,
 value: fv!item.value,
 saveInto: fv!item.value
 ),
 default: {}
 )
 )
)

Mathieu Drouin · Answer

Yes this would work, updated the code sample. All you need to do is use fromJson to get the map from the json. 
 There is no official document to support the feasibility AFAIK. It really depends on your context. 
 a!localVariables(
 local!questionTxt,
 local!questions: if(a!isNotNullOrEmpty(local!questionTxt),
 a!fromJson(local!questionTxt),
 ""
 ),
 local!questionMap: {
 a!map(
 identity: 423,
 text: "What is the Client's country of registration?",
 questionType: a!map(
 identity: 1,
 name: "Single Select",
 ),
 questionCode: "GEO-Q1",
 order: 1,
 isMandatory: true,
 isReadOnly: true,
 possibleAnswers: {
 a!map(
 identity: 7085,
 text: "Afghanistan",
 order: 1,
 value: "AF"
 ),
 a!map(
 identity: 7086,
 text: "&#197;land Islands",
 order: 2,
 value: "AX"
 )
 },
 value: null
 )
 },
 {
 a!paragraphField(
 value: local!questionTxt,
 saveInto: local!questionTxt
 ),
 a!forEach(
 items: local!questions,
 expression: a!match(
 value: fv!item.questionType.name,
 equals: "Single Select",
 then: a!dropdownField(
 label: fv!item.text,
 placeholder: "Choose a value",
 choiceLabels: fv!item.possibleAnswers.text,
 choiceValues: fv!item.possibleAnswers.value,
 value: fv!item.value,
 saveInto: fv!item.value
 ),
 default: {}
 )
 )
 }
)

Dynamic UI components building using API JSON response

Top Replies