Skip to main content
All CollectionsBlocks
Reusable and Repeatable Blocks
Reusable and Repeatable Blocks

Feel inspired to build and reuse whatever blocks you can imagine with these reusable blocks!

Justin Yan avatar
Written by Justin Yan
Updated over 6 months ago

Type: Custom

CSS Enabled: ❌

This contents in this article is a progression of the Custom Block and is considered an advanced feature. To better understand the fundamentals of the Custom Block, we encourage you to read the precursor article here.

Once you're happy with the set up of your custom block, you may choose at any time to turn it into a Reusable block. A reusable block, in essence, becomes a template you can use across your pages (and very soon other apps as well)!You'll be able to define its variables, make them repeatable (as shown above) and make them unique and dynamic across multiple different uses. Read on to learn how!

Overview of Reusable Blocks

Reusable blocks can be toggled for standalone blocks, but they are best used for a custom block made up of multiple blocks in a layout one (Row or Column).

Note that once a block is set as a reusable block, all nested blocks within it will be grouped in your page editor. They can only be edited individually through the custom block editor.

From the custom block editor, another important thing to note is that changes made to a reusable block, unlike a standard custom block, will be applied to all new and pre-existing copies across your app.

Here is a table to help summarize the key differences between the two custom blocks:

Standard Custom block

Reusable Custom block

Changes in custom block editor

Apply to new block copies but not pre-existing ones.

Apply to all block copies.

Block settings

All settings available.

Blocks contained within a layout block (row or column) are not individually editable from the page editor.

Define inputs

Cannot define inputs

Can define inputs

Repeatable

Not repeatable

Can be repeatable

Configuring Block Inputs

As a template, you can decide what parts of your reusable block are dynamic within the app editor. Using the input variable, define the parts of your reusable block that are dependant on static or dynamic variables. These can be labels, data values, conditions, filters or even actions.

Follow the setup below to see how the contact cards you see at the top of this article was achieved.

Custom Block Setup

Shown within the custom block view, this custom built contact card is made up of four main components.

  1. The root layout block. A row block with components 2, 3 and 4 nested inside them.
    ​

  2. An image block, with variable {{input.Image}} entered in the URL.
    ​

  3. A column block with a collection of three row blocks, six text blocks and one icon block. In total, there are four defined inputs.
    ​

  4. A row block with a nested text block and icon block. On the row block is a display condition and a click action to navigate users to another page. The display condition is set up as shown below.

Define Inputs

Inputs defined through the input variable will surface in the custom block's settings. Here, you can update its label and provide a description to inform how these inputs should be used.

Make Block Repeatable

The last setting to configure before jumping over to the page editor is to make the custom block repeatable through the 'Repeating' toggle.

Turning this on will duplicate your blocks, enable you to connect a data source to your block and render their values wherever they're made visible, much like any data display block in Frontly.

Page Setup

Over to the page editor view, placing this custom repeating block in in your app will surface some new but familiar fields. Let's break them down.

  1. Select your data source that you'll be fetching and populating into the block.
    ​

  2. For each input you've defined in the custom block editor, enter a static or dynamic value. These inputs will update in your editor in real time if their values are readily available.
    ​
    The most like variable you'll be using for these inputs is the {{record.Field}} one. Once entered, the system will loop through the selected data source and designated fields, then populate them with its individual row values.
    ​
    ​Note 💡: For any relational records you wish to reference as well, use the syntax {{record.Custom ID__Custom Field}} where 'Custom ID' is the ID you entered in the relational data setup. Note also the double underscore between the 'Custom ID' and the 'Custom Field '.
    ​
    Action inputs will also show in this section if there are any that need to be designated. Actions like Navigate to Page, Google Sheets, Refresh Block will need new inputs each time the block is created.
    ​

  3. A rendering of this repeating block before any hidden filters or display conditions (if any) are applied

Did this answer your question?