Create Dynamic UI (Input Form) Using API's Response

Create Dynamic UI (Input Form) Using API's Response

  

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