Dynamic UI components building using API JSON response

If you HAVE to do that, then yes, it can be done. Just create a UI component for each UI element in your JSON.

But, in my experience this is not a good way to make use of Appian and will lead to serious issues and major development effort later on.

Thank you for the update.
Kindly share the sample code. And one more doubt when we the receive the UI component as API response.

Will we be able to create interface with Appian available components or it is feasible to create interface using custom component received via API response?

And also can you share any document or link to understand and implement the same.

Will you be storing the risk assessment data in your database or will you be sending it back to the API?

We will be storing the data in our database and also sending the response to the API so that we can fetch the risk score again in API based on the answers we submit

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

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.