Dynamic UI components building using API JSON response

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: {}
    )
  )
)

Hi, 

You mean they should send as above structure in API response.

They have below structure like for example

{

  "questions": [

    {

      "identity": 423,

      "text": "What is the Client's country of registration?",

      "questionType": {

        "identity": 1,

        "name": "Single Select"

      },

Will this not work? If works how can we convert into Appian format from their JSON response?

Sure, this will work. Use a!fromJson() to convert it into an Appian map. Then loop on it and create Appia UI components according to the data.

For the posted example. It says that this is a "single select". What does that mean? Probably a dropdown field. But where are the valid choices?

Sorry missed to update the other part and yes it will be a dropdown

      "questionCode": "GEO-Q1",

      "order": 1,

      "isMandatory": true,

      "isReadOnly": true,

      "possibleAnswers": [

        {

          "identity": 7085,

          "text": "Afghanistan",

          "order": 1,

          "value": "AF"

        },

        {

          "identity": 7086,

          "text": "Åland Islands",

          "value": "AX",

          "order": 2

        }

      ]

    },

OK. I built something similar multiple times. My approach is, to build a separate UI component for each input type which accepts that configuration. In this case, you just have to extract the data from the data structure and pass it to a drop down field.

Make sure to understand how data flow inside user interfaces works. I described this in a blog post: appian.rocks/.../

Thank you for the update.

Do we have any document to support the feasibility of such use case of dynamic UI can be built in Appian?

I am not aware of any.

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: "Å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: {}
      )
    )
  }
)

Thank you for the update.

I will try to implement the same and let you know if I have any doubts further during the development.