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!

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.
​

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.
​

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.