Hello,
I am working on a framework where I have a “main layout” that in the page render area displays a “parent page” that contains several panels. One of these panels needs to display content dynamically, such as another page/form, associated with the specific object i´m dealing with (the object config is set in the DB where the page/form/component to display is set).
The challenge is that the content of this particular panel needs to change dynamically based on the object specification. So if it´s object A it should display A and if it´s object B it should display B in the panel at stake. The panel must be populated with different content depending on the object selected, without requiring hard-coded “IF/THEN” conditions. One option could be reusable components (RC), but i don´t see how to call a RC dynamically .
Is it possible to dynamically load a page/form/component inside a specific panel within a parent page? A Layout that calls another Layout, is possible?? Makes sense?? Probably not… Via custom code, indicate the reusable component name (variable/property) to be loaded in a block??
Could you provide guidance on how to achieve this in Backendless?
Thank you for your help!
Regards,
Manuel
Hello Manuel,
I see what you’re trying to achieve, but I’d love to clarify a few things to better understand your approach. If you want to avoid using templates and Visibility Logic (if/then), could you share a bit more about how you’d like the dynamic loading to work?
Would you be able to provide a simple example, including the data structure, to illustrate what exactly needs to be rendered?
If you’re considering using a Reusable Component (RC), some form of conditional logic would still be necessary inside the component to determine which content to display.
Looking forward to your thoughts!
Regards,
Alexander
Hello @Alexander_Pavelko ,
The goal is to dynamically load different content into a panel based on the object selected. Each object in the database has a configuration that determines which content (page, reusable component, …) should be displayed in the panel. I´d like to avoid hardcoded conditions (IF THEN) because we are talking about many objects, and to have ALL these object UI components displayed in the parent page, that would be a nightmare to manage.
I´ve been trying via custom code (jscript) to add dynamically a reusable component in a page by making reference to its ID (in the DB this ID would be associated to the object at stake), but still had no luck… Not sure if the RC id is the correct one…
Here´s an example of what i´m trying to do:
App: FA2ABF23-7044-4D7F-8E44-EEAC061C1641
Page: TestAddRCDynamically
Anyway, i´m open to other approaches :).
Thank you.
Regards,
Manuel
Hello again,
Adding something…
IFrames seem like a possible approach, but the performance is not ideal, rendering the content takes time. Additionally, managing communication between the parent and child pages, as well as needing to specify the child URL, makes this solution less interesting, but… it works.
I’d appreciate your recommendations on the best way to handle this (i.e. handle parent page displaying other components dynamically).
Thank you.
Regards,
Manuel
Hello again,
Sharing my findings so far about iFrames…
i thought the communication between parent page and the iFrame component (where the child page is loaded) could be done via app data, but it does not work. Seems like we have 2 independent apps, each one has its own app data. Anyway seems this can be solved via Local Storage Data… Not sure if iFrame is not the best solution, loading dynamically a reusable component still my favourite :), but don´t know how to do it.
Looking forward to have your feedback.
Thank you.
Regards,
Manuel
