UI Controls - Runtime

UI Controls - Runtime

  
Are you able to dynamically add UI controls at runtime?
Hi Justin:

I was looking for  a topic that addressed your question but I could not find one. Maybe if someone else can find a better description, please post it.

I am going to try to explain how you can dynamically control widgets on screens.

The logic is actually quite simple:

1 - If you wish to simply show and hide a piece of UI you can use the container Display property that can be set in runtime.

2 - If you need to dynamically add a input field, drop-down, etc, all you need to do is drag them into a table records or a list records and link them to a variable in the source list. This will allow you to then retrieve the value selected from the tablerecord.list  items.

3 - If what you are looking is for a more modular control, with multiple functionality, inputs, logic, etc, then you need to create an outsystems equivalent which is the web block. Web Blocks are fully functional pages, that can use AJAX to execute server logic and that can, themselves, be placed inside of table records, list records and even web blocks. You can achieve any level of nesting in the several elements that allow you to do pretty complex stuff.

Attached is a very good example of this kind of behavior used in a survey application. This app used table records, web blocks and Ajax to do pretty complex survey displaying and answering. To use it you will probably need to download the following components: style guide, enterprise manager and color picker.

Hope this helps!

Cheers:

       Miguel


Hi Miguel,
Using ListRecords for the option 2 will give a vertical view, but I have a requirement to implement in a horizontal view. Can you please suggest the appropriate approach in this scenario?
Haseena Mohammed wrote:

Hi Miguel,
Using ListRecords for the option 2 will give a vertical view, but I have a requirement to implement in a horizontal view. Can you please suggest the appropriate approach in this scenario?
 
 
Use CSS to make it horizontal...

J.Ja

Hi Justin,

Thanks for the response, Can you give example how to change the CSS?
Haseena Mohammed wrote:

Hi Justin,

Thanks for the response, Can you give example how to change the CSS?
 
 You probably need to wrap the contents of your list in a container, then give the container "float: right;". If you aren't sure how to set CSS, see the tutorials on CSS/styling in the OutSystems Academy.

J.Ja