Skip to main content
Block Versions
Justin Yan avatar
Written by Justin Yan
Updated over a week ago

Block Versions are now an advanced feature in Frontly and will need to be toggled from within your 'Advanced' app settings.

Create dynamic visualizations of your blocks based on conditions you've defined using Block Versions. With block versions, you can change the state of how your buttons look when activated, toggle how your data gets presented or size your blocks a certain way depending on the width of your users' devices. Block Versions combines adaptability with efficiency in Frontly that makes building sophisticated user interfaces simple!


Create a Block Version

Start with any block you'd like to create a different version for and go through your usual setup of the Default Version.

To demonstrate, here is a simple Icon block with rounded border radiuses and a hallow bookmark symbol.

Next, within your block settings (left panel), click the '+' button to create a new version of the block. The new version and every new version after it will appear in the dropdown menu beneath the default version.

To start, you'll notice that a new version of a block will always emulate the settings of its default. However, you can have all of its settings (block or styling) uniquely modified from any of its versions without affecting the configurations of them.

Here's a simple update to the default version, a filled bookmark symbol.
​


Setting Conditions for Block Versions

Whilst highlighting the block still, clicking on the edit icon next to the '+' symbol will pull up a modal that will let you configure a 'Version Condition' for it. This modal is where you can set a custom name for the block version as well.

Version conditions are essentially Display Conditions that allows you to define when one block version will appear over another.

In the grander context of these two icon blocks, they are buttons used to denote whether a custom grid card listing has been liked by the user.
​

Default Version

Favorited

Click here to learn more about Custom Blocks.

With respect to setting conditions for block versions, all the usual rules and variables seen across most of Frontly's conditional systems apply here as well. How you set up your version conditions will vary from setup to setup.

For this example in particular, a 'favourited' record will add the record ID to the 'User Favourited Listing' field using the Logic action. Through those field updates, the block versions can be dynamically updated through the conditions below.

πŸ’‘ Want to learn how to create a full end-to-end Favourited πŸ”– or Liked ❀️ system in your Frontly app?
​
​Click here to learn about Frontly's Logic Action and combine your knowledge of block versions to achieve this!

Did this answer your question?