118
Views
6
Comments
Solved
Chalenge: How to create an horizontal table within a vertical table in each column?
Question
Application Type
Reactive

Hi guys,

I have this scenario: Need to put Sections Side by side and tasks in a section swimlane. How to do that?

I have tow tables that now I joined and put an "IF" to not show Section name again for each task (image attached)

- Table of Sections

- Table of tasks

- Agregate with them (image attached) 


Now, how can I put section side by side? (notice that Section 1 can have 10 tasks, none, or 50, task two too and each section too)


**** The table is inside a block


Can someone helps me with suggestions?? I tryed so many steps all afternoon.


example of my objective of screen is attached too


Thanks!!

TableToSidebySide.PNG
objective.PNG
2021-06-02 20-50-04
Márcio Carvalho
Solution

Hello! Elaine and I had a call to discuss the requirements and determine the approach for implementing the solution.

I created two components to achieve the desired functionality: "section" and "tasks". The "section" component is intended for use on the front end and is placed within a list. The "tasks" component is nested inside the "section" component, and by using the section's ID, we can retrieve all the tasks associated with that particular section.

I applied appropriate CSS styles to align the design with Asana's style and structured the elements accordingly.

You can find the code in the OML (Open Markup Language) file if you want to review it.

Please let me know if you need any further information or assistance!

Kind Regards,

Márcio

ScrollingAsanaExample.oml
2021-06-02 20-50-04
Márcio Carvalho

Can you share an oml? or the website link? 

It isn't easy to guess :( but I would try to use Flex. Give a shout on how to use display flex and the different positions you can display your elements. 

Kind Regards,

Márcio

2023-06-17 23-16-53
Elaine Guimaraes

Hi Márcio,

I'd atachedd now my objective. I thing that is more easy now.

Is there a way to wrtight "tr" "td" manually in outsystems?


objective.PNG
2023-06-17 23-16-53
Elaine Guimaraes

Flex box seems perfect, but is it possible to implement in my list to arrange rows horizontally?

2021-06-02 20-50-04
Márcio Carvalho
Solution

Hello! Elaine and I had a call to discuss the requirements and determine the approach for implementing the solution.

I created two components to achieve the desired functionality: "section" and "tasks". The "section" component is intended for use on the front end and is placed within a list. The "tasks" component is nested inside the "section" component, and by using the section's ID, we can retrieve all the tasks associated with that particular section.

I applied appropriate CSS styles to align the design with Asana's style and structured the elements accordingly.

You can find the code in the OML (Open Markup Language) file if you want to review it.

Please let me know if you need any further information or assistance!

Kind Regards,

Márcio

ScrollingAsanaExample.oml
2023-06-17 23-16-53
Elaine Guimaraes

Marcio,

While implementing I notice that the versio of css os no the final versio that we did. Could you check it, please? Is not working here.

2023-06-17 23-16-53
Elaine Guimaraes

Thank you Marcio! Perfect, thats it!!

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