Note: The Modal Action will currently just display custom blocks with static values and blocks, meaning that dynamic variables and data display blocks that reference your data sources will not work in a modal just yet.
As of October 7th, 2024 — we plan to enable the rendering of all data blocks and variables into the modal, which will become available in a future update!
Frontly is excited to introduce a Modal Action, a feature that resembles the functionality of the Default / Custom Detail View, but with even more flexibility in its usage. Unlike the Detail View, which is typically tied to data display block record clicks, the Modal Action can be triggered by a wide range of events across your app, significantly enhancing its versatility.
Click here to learn about the simpler Detail View function
Click here to see where the Modal Action can be triggered across your app.
Possible Use Cases
Here are some examples of how you can leverage the modal view:
Confirmation Layer: As a layer before executing critical actions, like editing or deleting records to verify their intent.
Tooltips and Tutorials: If prompted, modals can guide users through an app’s onboarding process, explaining a key feature or functionality in a step-by-step manner.
Detail Views: Where detail views modals were once only accessible through record clicks. Now, you can trigger detailed data views through any action trigger, most commonly a button click.
Media Display: Modal views can be used to display images, videos, or other media files without redirecting users away from the main content.
Setting Up the Modal View
Using Frontly’s new modal view is simple and customizable! To get started, locate the custom action trigger within your page editor and select the 'Modal' action.
This will open the setup window for the action, where you can choose the Style of the modal you want, a Label for it, the Type of action it is (Show or Hide) and most importantly, the Custom Block. The block selected will become the content displayed within the modal.
Considerations
When using the modal view in Frontly, there are a few things to keep in mind. The width of the modal automatically adapts to the size of the custom block you’ve selected, but the modal’s height. If the content within the custom block exceeds this natural height limit, the modal will become scrollable.
If this is not the desired behaviour - especially for content-heavy displays— consider using a 'Navigate to Page' action instead, which allows the content to be viewed without any scroll restrictions.
All dynamic variables integrated into the custom block are fully functional within the modal view as well. This ensures that your modal can present dynamic, real-time data or personalized content based on the user’s interaction, further enhancing the flexibility and responsiveness of your app.
These considerations are great for maximizing the utility and functionality of Frontly’s modal view while diversifying the options available for creating optimal user experiences!