114
Views
7
Comments
Custom view of Entity data
Question

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.

Capturadetela20200916220004.png

Rank: #1998

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

Rank: #502

Marcos Donadeli wrote:

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.

Hi,

If you load from db, there are 2 solution:

  1. Use List, and HTML Element to implement that.
  2. Use List, and Container to implement that.

 Hope this help

mvp_badge
MVP
Rank: #59

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


Regards,

-PJ-


Rank: #1998

Hello Marcos,

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.


Regards,

Nikhil

Temp.oml