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.

I do not have sample code I could share, but the pattern is to use the choose() function to check for the UI components you need and then for each, use the Appian UI components to build them. Then, run this expression in a foreach() to create that UI.

This is not a simple endeavour that includes some edge cases of what can be done with Appian.

And when you start thinking about doing this using custom components, which is feasible, I have to ask, why exactly do you want to use Appian?

Thank you for the clarification.

I was asking about custom components because if there is a scenario that there is a mix of Appian components and also custom component to be presented in dynamic UI.

Then if that will be feasible was the motive behind asking about custom component feasibility.

I understand. Can you elaborate a bit on your overall use case? Why do you need to build dynamic UIs in Appian?

My use case will be like say Client Onboarding Application in which it has multiple tabs like Personal Details, Employment Details, etc and all this interface will be built in using  Appian layout and components.

There will be one tab Like Risk Assessment, when the user clicks this tab it will call an API and we will get the components in API response and based on the response the UI components and page should be available dynamically to the user.

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

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.