Hello,
i´m having problems with pages that have many instances of the same reusable component.
I have created an example to illustrate the problem that can be find here:
-App: FA2ABF23-7044-4D7F-8E44-EEAC061C1641
-Page: TestTables
-Reusable Component: TestTableSort
This page contains a table with three sortable columns (ASC, DESC):
-Column 1 (Local Sorting - Page Level): Sorting works fine but is not the desired approach.
-Column 2 (Name) & Column 3 (Description): These columns use a “reusable component” to perform sorting.
For columns 2 and 3 (name and description, respectively), each cell has a “data container enabled”, and in the “data model logic”, I set three properties:
THE PROBLEM: If i set these properties for both column cells (Name & Description), the system enters an infinite loop when loading the page.
However, if I set it only in 1 column (either Name or Description, but not both), the reusable component works correctly for that column.
I´d like this reusable component worked in any table column. Could you please help me understand why this behavior is happening and suggest a proper way to achieve this?
Thank you for your support!
Regards,
Manuel
Hello Manuel,
I just wanted to clarify — are you looking to create custom components specifically for sorting table data? Perhaps existing solutions like Data Table could be a good fit. If not, could you share what functionality is missing so I can better understand your requirements?
Regards,
Alexander
Hello @Alexander,
The sorting case is just one of many i want to implement via reusable components, so that i can apply it in many scenarios. About the data table component, yes i have used it a lot and it is quite user friendly, but i want to use my own table. Anyway, where i´m struggling is when i want to use many instances of the same reusable component (RC) in the same page, as you can check in this sorting example. Basically i need to pass to the RC specific info about its context in order to determine its behavior, but i´m not doing it correctly. In this case, the way things are implemented trigger an infinite loop, which indicates that i cannot have these contextual settings inside the data model handler due to the concurrency between the 2 columns… The question is where should i state these settings, so that the RC receives the necessary specific input.
Thank you for your support.
Regards,
Manuel
I think you could adjust the approach. Instead of making a database request each time the arrows are clicked, it would be more efficient to load the data from the database (for example, on onPageEnter), store it in PageData, and work with it — such as sorting by the necessary criteria.
Regards,
Alexander
Yes, that’s a valid observation that i´m going to consider, but the problem is not about that. The problem resides in the input that needs to be passed to the reusable component.
Maybe it is easier to understand if you could check:
-App: FA2ABF23-7044-4D7F-8E44-EEAC061C1641
-Page: TestTables
-Reusable Component: TestTableSort
Columns 2 and 3 use the same reusable component. this is where the problem is happening. How can i define things in order to avoid both columns conflict with each other. Please check what i state in the first message.
Thank you @Alexander.
Regards,
Manuel
Hello @Manuel_Germano
We will be happy to assist you. I need to ask you a few more questions so I can understand the problem better.
Here’s how I tried to reproduce the problem:
- Open page:
- Sort ASC by Name:
- Sort ASC by Description:
At which of these steps should the problem is happening have occurred?
Regards,
Volodymyr
Hello @Volodymyr_Ialovyi,
When you tested, sorting by column “name” worked fine BUT column “description” was actually sorting by column “name”. Anyway, there was no conflict between these 2, because the contextual/input data was being passed only in column “name” cell via its event handler “Data model logic”:
However, if i do the same for column “description” in its own “Data Model Logic” then we have a problem.
This problem was not happening when you tested because all this was NOT enabled.
Anyway, i´m going to leave it ENABLED so that you can see the infinite loop.
Conclusion, in order to sort by these columns i need to pass this input for the reusable component, but the way these settings are done in “data model logic” is causing a conflict. So, the question is how should i tackle this input?
Thank you for your assistance, @Volodymyr_Ialovyi
Regards,
Manuel
About infinite loop:
Your cell (Cell-9fd9) listens for page data changes (Data Model Logic Handler)
When page data changes, the handler fires and the logic that changes the page data starts executing, which causes the handler to fire, which changes the page data, which causes the loop.
Documentation about UI Rendering:
- Adding or updating data in a data model causes re-render of the corresponding UI zone. UI re-rendering is handled hierarchically based on the tree of data models.
You can try the following approach:
Regards,
Volodymyr
Hello @Volodymyr_Ialovyi,
I did that for the 2 columns at stake (name and description):
However what happens is that when i sort any of these 2 columns, the “columnName” passed is always “description”.
Why?
Thank you!
Regards,
Manuel
Hi ,
I managed to reproduce the error with Data Model inside reusable component , I created an internal ticket to fix this bug.
Regards,
Sergey
