I am new to Outsystems and sometimes I have trouble to find how to do the layout.
I want to do something like that I will select an item in the list of the left and on the right I want to have the data, but the data I want to have like a gallery or tiled, which tile would have a background color dependent of the result of the record and inside the tile will be a text which depend on the record.
It would be something like the image attached.
I researched before and I only find DataGrid and ListRecord Widget but they only work in Traditional Web App and I want to do it in a Reactive Web App.
I think a good idea is to make a div area and I include divs inside with colors and the text, but I don't know how to get the data from database using custom HTML.
If you guys can help me indicating how to do it.
Hello Marcos,
In your logic, on the selection activity of a list record in the left, a Client Action can be trigerred which will possibly make the concerned and respective Container Visible, assign Data fetched from an aggregate to the expression in the container and apply conditional CSS like the example given below.
Hope this helps.
Regards,
Nikhil
Nikhil Purohit wrote:
Ok, I got it, thanks but I am still in doubt on how to make a list show the records side by side and not from top to bottom like the picture I sent, because all the information I have in the right pane are also in database.
Marcos Donadeli wrote:
Hi,
If you load from db, there are 2 solution:
Hope this help
Hi Marcos,
Adding more to what other said in the thread ,we have many beautiful patterns available in Outsystems UI to make your look and feel as per your choice and need.
Please visit the below link and see the available pattern and decide which one is the best fit , you can use maximum of them within your list .
https://www.outsystems.com/OutSystemsUIWebsite/PatternDetail?PatternId=14
-PJ-
I have developed a sample page for you to refer, just check if I have addressed your issue properly. I'm also attaching the OML for the sample page.
Sample Page : https://nikhilpurohit.outsystemscloud.com/Temp/Temp?_ts=637359671783356253
I have used list to create Containers dynamically with List Items. Also you can use cards layouts and other OutSystems UI components in List widget to develop this kind of UI.
You can also add them into List Item widget to have them mapped to user actions.
Yes, it´s perfect. I am getting how you did it
Glad to help, let me know if you need any explanation on the logic or you need any help if you are stuck.