How to create containers using javascript

How to create containers using javascript

  

Hi 


How do I create containers using javascript in outsystems ?

Hi Gontse,

Can you clarify why you want to create containers using javascript? You can just add them in ServiceStudio and show/hide them with if-widgets, classes or on screen javascript. For more difficult collections of nested containers, you can also use webblocks.

If you insist on adding the containers via javascript, you can just include an expression (with Escape Content set to false) to include html and javascript. You can then build any javascript that you need.

When this answer is not what you were looking for, please tell us exactly what you want to archieve and maybe somebody can give you a more accurate answer.

Kind regards,

Remco

Hi Remco


What if I don't know the number of containers I need initially ? I need to display the number of containers based on the user input and color them accordingly. Outsystems does not allow client-side "for loops" - if it had one I would do it easily but hence I need to create the containers with javascript. is it possible ? what would I call the containers in javascript? Div elements ?

Hi Gontse,

You can create a record list with the user defined color and create a web block that uses the record to format the container.

Then you put the we block inside a list structure and refresh the list after the user input is changed.

Kind regards,

Remco

That will only change colors accordingly but it will not increase or decrease the amount of containers

Hi Gontse,

Can you make a sketch of what you need, because I believe that by using a recordlist with multiple records you should be able to have more or less records, which equals the increase or decrease of the number of containers.

Kind regards,

Remco

Hi,


I agree with Remco. You really need to provide the use-case, because you can add div's to the html with javascript, because it's a simple DOM-manipulation.

However, I doubt you need that because you have no control anymore.

For example, using a local list on the server and use it with ListRecords and add/remove them via ajax will help you to achieve the same incldsuing full control and knowledge about what you want to achieve,.

Or even simpler, the editable-table is a perfect example for it.


Hi


Using a ListRecord or EditableTable requires data in the database. the amount of containers is given by the user on runtime. for example I want to present the user with an empty page and an input where he enters a number and depending on the amount he enters a table with the same amount of rows/cols is displayed.

Solution

Hi Gontse.


Here is an example.


Cheers.

Solution

Thank you