498
Views
10
Comments
Making a custom table using HTML element
Application Type
Reactive
Service Studio Version
11.54.1 (Build 62118)
Platform Version
11.20.0 (Build 38549)

Good day,


I was able to make a custom header using the HTML Element, I was wondering how would I go about inserting an outsytems list or table into the body?

Regards,

Mark

2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi Mark,

Did you try defining List widget inside the Html tag?

Kind regards,

Benjith Sam

UserImage.jpg
Mark Gimenez

Hi Benjeth,

I did try that, however it did not solve my problem. I think something like this 

It seems to only be populating the first header instead of going to the next. Is this something I have to add to the style of the list itself?


Regards,

Mark

2023-06-20 09-40-15
Weston Nyirenda

Hi, 

I am experiencing the same issue, have you managed to find a solution?

2024-02-03 23-41-38
ROMMEL SIMUNDO

on the list properties change the mode to "custom" then change the tag to tbody

Screenshot 2023-09-10 213123.png
2024-02-03 23-41-38
ROMMEL SIMUNDO

on the list properties change the mode to "custom" then change the tag to tbody 

2022-09-05 08-23-51
Naveen N

@Mark Gimenez  Create the same scenario in your personal environment and attach that oml , i will try to help you to get done.

2022-09-05 08-23-51
Naveen N

@Mark Gimenez just confirm in your page where you are going to implement this design whether you will use ajax refresh or not for that table at any circumstance.

2024-09-12 02-43-38
Deepsagar Dubey

Hi @Mark Gimenez 

Sometime we don't have anything Out of box which can help us to match with our requirements, so in this case also i think you can achieve it by the custom JavaScript.

Below link can give you an idea how to create dynamic DOM elements and you can also use Outsystems List as source in table but convert it in text first (JSONSerialize). then again deserialze in JS and loop it.

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces 

I hope it'll help you.

Thanks

Deep

2023-09-14 18-11-13
saad siddiqui

Hi Mark,

I think the functionality you are trying to achieve can be done without having to write custom HTML.

I have made this using outsystems Adaptive Columns,  I am adding OML for your reference, I hope this might help and also I hope this is what you are trying to achieve.

Thank you!

You can see the result here. 

CustomTableHeader.oml
2024-02-03 23-41-38
ROMMEL SIMUNDO

When I tried this approach, my problem was that when the text is long, for example, 20 words, the format gets uneven. Or, in the case of rows, if some rows have a tall height and others have a short height, their heights become uneven, probably because their width and height are fixed. Unlike a table that adjusts accordingly. 


unresponsived body.PNG
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.