Dynamic UI components building using API JSON response

RE: Dynamic UI components building using API JSON response

liyakathullahkhana0001 — Mon, 03 Jul 2023 01:12:38 GMT

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.

RE: Dynamic UI components building using API JSON response

Mathieu Drouin — Fri, 30 Jun 2023 11:51:01 GMT

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

RE: Dynamic UI components building using API JSON response

Stefan Helzle — Fri, 30 Jun 2023 08:36:03 GMT

I am not aware of any.

RE: Dynamic UI components building using API JSON response

liyakathullahkhana0001 — Fri, 30 Jun 2023 07:58:16 GMT

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?

RE: Dynamic UI components building using API JSON response

Stefan Helzle — Fri, 30 Jun 2023 06:55:45 GMT

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/.../

RE: Dynamic UI components building using API JSON response

liyakathullahkhana0001 — Fri, 30 Jun 2023 06:51:11 GMT

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

}

]

RE: Dynamic UI components building using API JSON response

Stefan Helzle — Fri, 30 Jun 2023 06:48:30 GMT

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?

RE: Dynamic UI components building using API JSON response

liyakathullahkhana0001 — Fri, 30 Jun 2023 06:43:58 GMT

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?

RE: Dynamic UI components building using API JSON response

Mathieu Drouin — Fri, 30 Jun 2023 01:36:29 GMT

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

RE: Dynamic UI components building using API JSON response

liyakathullahkhana0001 — Fri, 30 Jun 2023 00:00:36 GMT

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

RE: Dynamic UI components building using API JSON response

Mathieu Drouin — Thu, 29 Jun 2023 23:58:19 GMT

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

RE: Dynamic UI components building using API JSON response

liyakathullahkhana0001 — Thu, 29 Jun 2023 23:13:11 GMT

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.

RE: Dynamic UI components building using API JSON response

Stefan Helzle — Thu, 29 Jun 2023 10:46:53 GMT

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

RE: Dynamic UI components building using API JSON response

liyakathullahkhana0001 — Thu, 29 Jun 2023 08:19:59 GMT

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.

RE: Dynamic UI components building using API JSON response

Stefan Helzle — Thu, 29 Jun 2023 06:00:36 GMT

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?

RE: Dynamic UI components building using API JSON response

liyakathullahkhana0001 — Wed, 28 Jun 2023 23:19:18 GMT

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.

RE: Dynamic UI components building using API JSON response

liyakathullahkhana0001 — Wed, 28 Jun 2023 23:18:39 GMT

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.

RE: Dynamic UI components building using API JSON response

Stefan Helzle — Wed, 28 Jun 2023 07:36:19 GMT

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.

RE: Dynamic UI components building using API JSON response

Harshit Bumb (Appyzie) — Wed, 28 Jun 2023 05:57:35 GMT

You can but this will not be very robust or as dynamic as you visualize it to be. Also, every component in Appian is mapped with a variable where it will store the response/interaction. That will be done in a dictionary instead of a variable now.
I'll attach a code sample below in the next comment.