Type: Custom

CSS Enabled: ✅

At it's core, Custom blocks allows you to save a block you've created on your page and re-use them within your app however you like! By saving and adding a custom block, you're retaining all its original settings, actions, detail views and styling - saving you significant of time and effort building your app!

Spending more time with the feature, you'll also have the ability to save layout blocks (Row and Column blocks), which are containers designed to store multiple blocks inside them at once and enabling more complex user interfaces. Creating custom blocks out of these layout blocks give way to a level of customization, sophistication and reproducibility to your apps never seen before at Frontly!

The possibilities are truly limitless, so let's start with the basics!

To save your custom block, heading into the 'More' settings of your selected block and click the "Save As Custom Block" button.

You'll see a modal pop up for you to give your custom block a name and description to differentiate it from your other existing blocks.

To add a custom block to your page, click on the (...) in your block selector. Your saved custom blocks will appear at the bottom. If you'd like a segmented view of all your custom blocks, you can click the 'Custom' heading to filter the rest of the blocks out.
​

Custom blocks exist independent from their "parent blocK" and not rigid in their structure and content. Meaning, for each subsequent custom block created, you don't have to worry about affecting the original block's existence or properties.

Creating a custom block out of a Row or Column block is the same process, but keep in mind now that you are saving everything inside of these block containers. Therefore, keep in mind again that everything from the block settings, styling configurations, detail views, dynamic variables and custom actions will all be retained as well.

Click here to learn more about the Row and Column blocks

Identical to the standalone custom block, custom layout blocks are also not rigid in their structure and content. You can still adjust the orientation and the settings for each block within them without affecting the original layout block's configuration as well.

You can edit the existing configuration of your custom block by heading into your account settings and clicking into the 'Custom Block' section.

Clicking into a custom block will bring you to a stripped down page view, where only the parts of the custom block you've saved are visible.

Here, you can also update the block name and description, change the orientation of blocks within a layout block if used, and add new blocks if needed. Changes made to your custom block will only influence how newly created blocks are configured and not any pre-existing copies of it.

For a more advanced setup, click on the 'Reusable' toggle that to limit the customization of the custom block in your page settings to just the inputs of the block you define.

Unlike a non-reusable custom block, toggling this setting will ensure any edits you make to it in the custom block editor will be applied to all its copies across your app. Enabling this and toggling the subsequent 'Repeating' function can radically transform how you create content blocks within Frontly.

See how you can turn this custom block...

... into this! Click here to learn more about Reusable blocks!