A reusable element is a way to build elements that you can replicate in more than one page without having to recreate them. For instance, if you want to access a sign in popup from many pages, you'll want to build it only once and reuse it. Similarly, if you want a footer and header shared across pages, you should only build them once as reusable elements. You should, as much as you can, build elements as reusable elements, as it will make the app lighter and easier to maintain.
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. The 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.
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 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.
A particular use case for Reusable Elements is to gather workflows that you want to reuse in more than one page. Doing so ensure that exactly the same flow of actions is used in more than 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!
The logic of these workflows is similar to what is described above.