Reusable Elements
Last updated
Last updated
Reusable elements are a way to create groups of elements that can be used in more than one page. If you want to access a sign-in popup from many pages, you will want to build it only once and reuse it. Similarly, if you want a footer and header that are uniform across pages, you should only build them once. You should, as much as you can, build elements as reusable elements, as it will make the app lighter and easier to maintain. Once a reusable element has been built, it will become another type of element that you can add to your page. Reusable elements are also a good way to create reusable workflows.
To build a reusable element, open the Application Menu and click on 'New reusable element'. This will take you to the element page where you will edit it. You will design the element similarly to a page and define the relevant workflows.
Reusable elements are container elements, and work similarly to Groups and Popups. From a data standpoint, a reusable element is similar to a group or a popup. You can change its content type, send data to it, or hide and show it, just as you would with a group. The key difference is that a reusable element that is a popup will have a modal behavior – in other words, if the popup doesn’t get closed, the user won’t be able to click anywhere else outside of the popup.
Note that the outermost group is extremely important, because its custom states can be accessed and set from workflows on the page that the reusable element is added to.
The way you add a reusable element to a page is similar to other elements. Just pick on the element you need in the New Element Palette, and draw it on the page.
Reusable elements' dimensions are defined when you edit the element itself. However, these elements are responsive (except if you make them fixed width), and if you need to resize them in the destination page you can do so, and the content will adjust as defined with the responsive settings of the inner elements.
It is possible to convert a group of elements into a reusable element. If you found that you built a group of elements that you'd like to use in more than once place, using this option will both save you time and ensure consistent design across your application's pages. Use the context or top menu options to do so.
A particular use case for reusable elements is to gather workflows that you want to reuse in more than one page. Doing so ensures that exactly the same flow of actions is used in more than one place, which minimizes chances for mistakes, and makes debugging and modifying your app much faster.
To do this is create a reusable element without elements inside and add the workflows you want to share among your pages. Once you've added this reusable element to your page (and make it invisible if you prefer), you can use the 'Trigger custom event from reusable element' action to access the workflows you added in your reusable element.
