Hi All,
In the application that I created, I needed a table display like the image below but it had to be made in HTML and I know how to use HTML in expressions. but My question is how to display the data in the table because the data is not static. Does it require a looping process?
Thanks.
Hello Kane,
Is your data already into the database? If not, what is the data source?
And does the columns changes as well, like you need to hide or show one or multiple of them dynamically? Or only the data itself that changes?
Hi Antunes,
I will using data from database. The columns will not change, only the data
Thanks
Hi Kane, then you need to use the table records or list records.
For tabular data as your, table records is the suggested approach. List records is usually used whenever you require a more customized and not that tabular data.
See the table records documentation below:
https://success.outsystems.com/documentation/11/reference/outsystems_language/traditional_web/web_interfaces/designing_screens/table_records_widget/
Other than that, it would be great for you to go through the OutSystems development guided path, this will for sure help you understand the basics of the platform:
https://learn.outsystems.com/training/journeys/web-developer-662/outsystems-overview/o11/2155
I hope this helps, thank you!
Yup I know how to using table records and list records, but in my case I want create similar like list records/table records using html and how to show data with html to. Should I embed JS inside HTML expression?
Got it @Kane
You can also do it by using the HTML element from OutSystems UI:
You need to compose your table just like you would do in html. See more in:https://success.outsystems.com/documentation/how_to_guides/front_end/how_to_generate_html_tags/
Only mentioning this because your requirement is to build it using HTML, but the best practice for your scenario would be to use OutSystems built-in components such as table records or list records.
Hi @Kane Loony you can simply achieve this by just following the step.
make three container a give your design and border to that container. and then print the header part. you can give the auto/fixed width to your container or you can use the three columns with 4 col width.
and then you need to use a list inside the list. for that you need to create a structure of list type and then make a list of (structure of list type).
then you need to assign the list on the ui. after that pass your data and that's it. the table is created.
don't forget to give the border to your container so it will look like a table element just as your design.
i hope this will help. (let me know if this problem helps you)
Hi Yashpal,
No, on my requirement project I should use HTML for create table like picture on my question. Because in my case, I can’t using table records or list records. Hope you understand
is your rows are fixed or dynamic
My rows is dynamic but the columns is fixed
so the approach is when you are getting the data from database use the data action and then using the for loop embed the <td> </td> to your text and then create text and then embeed the <tr> </tr> to your text and the create a text with the html tags and using the inject html forge component inject that text as html on screen
that will surely help you. see the atteched image.
why do you think you need to use html ???
Can you explain what you can't do by just using a list or tablerecords widget ??
Hi Dorine,
In my case I should embed and send HTML script to other components. For now i use expressions but the requirement is growing up and need table like I mention on the question
I don't understand what you are saying. What do you mean with 'embed' with 'html script' with 'send to other components' Dorine
Hii Kane Loony,
it is very easy to create a table with dynamic data using loop .
Just iterate a loop of your data list and take a another local variable and concat your HTML with dynamic data into local variable
and then you cannot show this variable to expression because expression is span tag of HTML and content will be as string not as HTML show you need to inject Your variable HTML into Your HTML page using innerHTML property of Javascript.
this is how I have created it
result:
I have also attached OML file.
hope this will help you.
kind regards,
Sanjay Kushwah