Working with Reusables
Communicating with reusable elements
This explanation is based on pre-built workflows in the openBuild template.
In 🍿CRUD FLOATING GROUP and 🍿CRUD POPUP reusable elements you will find a pre-built 💡SHOW POPUP workflow.
The workflow consists of 2 actions:
setting states on the reusable itself and
showing the reusable. When triggering this Custom event we are required to always pass the 🧭 Element Display parameter (which is based on the option set) and User datatype.
The second parameter is optional since we don't always need to manipulate the User object. When you will add additional parameters to this Custom Event, most of the time all of them (except the Nav Reusables) should be marked optional.


The passed parameters are set as a state on the reusable so we can act based on the information provided.
When we place a reusable element on the page or inside another reusable element we do get access to an action called Trigger a custom event from a reusable element.

In our case, we are clicking RG User Row which contains information about the User datatype. When clicked we want to trigger the 💡SHOW POPUP workflow from the reusable and the information we need to manipulate the object.

When triggering 💡SHOW POPUP we are required to pass the right 🧭 Element Display option set to display the right section. Since we want to display the user details section we are passing the 'CRUD - User' parameter.
The visibility of the CRUD - User section in 🍿CRUD Floating is based on conditional logic.



The elements inside the CRUD - User section are referring to the main datapoint which in this case is 🍿CRUD FLOATING GROUP User - the top-level datapoint in the Reusable which values we set with '💡SHOW POPUP' custom event.
How to add a new group in the reusable element
1. Add a new option to 🧭 Element Display option set

2. Copy or add a new group section
In the template, you will find 3 template sections inside the 🍿 CRUD Popup and 🍿CRUD FLOATING GROUP. These are:
a) CRUD Template
b) MSG Template
c) MSG Template Icon
You can duplicate those or you different section with workflows already connected (e.g. CRUD User).
3. Set or update conditional on the newly created section

Remember that all sections inside the reusable should not be visible by default!
4. Make sure to use the new option when triggering 💡SHOW POPUP custom event

Last updated