I am searching for how a dynamic UI (or input form to submit user inputs) can be created in OutSystems (for my mobile application) depending upon the response of some API; that tells what kind of input elements are to be included in the form, in some order like TextView, EditText, Button, ImageView, Button and so on. This is because in my application a scenario is being raised in which there are several companies that provide forms to be filled by several employees and the employees can fill the form of the company in which they are interested (they may or may not be working in the same company) and each form is different (with different input elements respectively) and the API is hit with the logged-in access token (of the employee) and the company name whose form he has opted to fill with the form number/name that he has selected to fill (as each company may offer different variants of forms to be filled respectively). Any help would be greatly appreciated, thanks in advance.

Hi Nitin,

Yes you can create dynamic UI with Outsystems easily.

Lets say you have 4 different widgets as an option to show but once at a time based on API response.

Thus you should design & place all those on Screen & add a Validation Expression to all of there Visible Property.

You can use your respective API keys to take decision & pass Boolean Value to show/hide respective Widgets, so that user will see only one widget at a time based on Validation.


Either you can use a If block on widget or You can use Visible property.


If  Block:


Visible Property:




Cheers,

Assif

Hi Assif,

First of all, thanks for replying.

Secondly, a few more things that are to be accomplished in the above scenario are:

1) Although, we can show or hide the views accordingly using the visibility property (or the if block; as you suggested) depending on the response of the API (as true or false; boolean variables) but how to achieve the dynamic ordering of the views as sometimes, for instance some EditText can be on the top of some other view and sometimes it can be below some other view, which is the case it was telling before as we have to suppose that we have no clue or idea where the views would be positioned and how they would be positioned (for now, supposing it to be in a linear row-wise fashion, for better understanding, in some random order).

2) Also, we are not sure of the number of EditText, TextView, Button, ImageView etc. (that would be used in any respective form) as for each type of input component it can range from 0 to N (depending on the respective form). Keeping in mind that some forms can be of a single page as well as some can be of about 2-3 pages or so and they might not have some kind of view (for instance, ImageView) in some respective form(s).

3) And then at last their data to be set, which is to be filled for some components like TextView, Button, ImageView etc. (an ImageView may or may not have data to be set; as ImageView can be used to display some image as well as it can hold some dummy image if it requires some kind of input from the user, like his profile picture to be uploaded as input etc. or it can be used to show the images of sponsors etc. (if not used for user input).

So, you can assume like I am a newbie in this matter and then try to explain things further, waiting for your reply.


Cheers,

Nitin

Hello Nitin,

Here's a High-level approach that I can suggest:

1- Random Structure of UI.

    In order to design such UI you need a structure JSON against it.. let's say your API Data holds an attribute of type UI.

 I too have designed kinda same, where I have a Questions Screen & there was a 5-6 type of questions expected to come, like [Radio, Check-Box, text, Date, Time .. etc].  What I did is added a Type Attribute to the Record, thus while I get the API response My Design is generated based on the type for each Tupple in Aggregate.

 It was just a matter of validating UI via IF-Else & generating the respective UI under the List.


   if[date]

      #DateBlock

      else

       if[Radio]

         #RadioBlock

         else

           if[Text]

            #TextBlock


2- Dynamic number of Form fields:

     Although you have dynamic form fields, still you can generate the fields via gettings the Form-Meta from Server in REST API Response.

    Get a Meta-Data from Server which will guide you about the sequence & Structure of Form with Input Type.

    A structure can be Imagine like a JSON Array in which each Child element is a Widget, where you specify Attributes like :

{
  "FormMeta": [
    {
      "widgetType": "Date",
      "dataType": "DateTime",
      "isMandatory": true
    },
    {
      "widgetType": "Text",
      "dataType": "Text",
      "isMandatory": true
    }
  ]
}


 Thus once you are done with this Implementation, Let your server generate Meta Patterns & Your Application gonna be designed that way. make sure you also validate the forms fields via referrencing Meta.

If you need more attributes you can increase accordingly based on your business requirements.


3- Data render :

     Already mention in point-1, We'll be designing the #Blocks for each type thus it can be control easily.


Hope it helps you.

Cheers,

Assif