Block

Overview

A block is a shared independent component that can be reused throughout a project. For example, a block is used to render the social media options across a project. It can be placed in a cell or block as a nested block. It can contain cell(s), element(s), and other nested block(s). When you add a block into a cell of a page, a default cell is added to the block automatically.

Note: At least one cell is required in a block or page.

By default, when a block is created, it is created with a default state. For more details on the states, refer to the section State. You can build responsive views of the block using breakpoints. For more details on breakpoints, refer to the section Breakpoint.

By default, when a block is created, it is associated with the generic bucket. But later, you can move a block to a desired bucket. For more details, refer to the section Moving a Block to a New Bucket.

A block can be converted as easily configurable. Hence, all the elements of the block can be configured in a single tab when a public block is imported to a project or blueprint. It avoids the UI breakup issues and saves the time and effort of authoring the pages.

Every block has a master and an instance. A new instance of the block is created every time a block is reused. For more details, refer to the section Reusing a Block. Each block instance has its properties such as Block Name and Block ID. An instance retrieves the other properties from the master.

A block by default contains two anchors Top Of the Page and Bottom Of the Page. You can also create anchors. For more details, see Creating an Anchor for a Block.

For example, a newly created block is shown below:

Note: You can configure the properties of the newly added block using the right-side panel. For more details, see Properties of a Block.

Properties of a Block

There are properties specific to the master block and block instance.

Master Block Properties

A master block has the properties under the below tabs:

• Settings – Holds properties related to the settings of the master block.
• Style – Holds properties to set the master block style.
• Rules – Holds the rules of the master block.

Settings Tab

Below are the properties used in the settings of the master block:

Property	Description
Block Name	Indicates the name of a master block. You can provide a unique name to a master and every instance of a master.
Block ID	Holds the autogenerated ID of a master block. The master and every instance of a master have a unique ID.
Shareable	Indicates the sharing option of the block. Enable the toggle to share this block in the shared bucket list from where you can use this block for the other pages.
Targetable	Indicates the target block id for any app installation purpose. This option facilitates the app installation on the required block. Enable this toggle to display this block id in the target block id field on any App installation process.
Sync all Instances	Allows you to sync all the instances of the block.
Easy Configurable	Enable the toggle to easily configure the properties of all the elements of the block in a single tab when the block or the blueprint is imported into any other project or asset.
Block States	Holds a list of master block states. The block states are configurable. A block can be defined in multiple states with different contents. Note: For more details on states, see the State section.

Style Tab

Below are the properties of the master block to set the style:

Group	Property	Description
Breakpoints	—	Helps to create responsive block views. Note: For more details on breakpoints, see the Breakpoint section.
General Settings	Width	Specifies the width of a block. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of a block. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of a block. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side.
	Direction	Represents the direction of the contents of a block. The contents can be arranged either in the vertical or horizontal direction.
	Alignment	Represents the alignment of the contents of a block. The contents can be aligned as Left, Right, Center, Top, Bottom, or Stretch.
	Wrap Items	Represents a toggle, which determines whether the contents of a layout cell are wrapped or overflown. Enable the toggle to wrap the contents.
Background	Fill Type	Holds the fill type of the block background. The value can be Solid Colour, Gradient Colour, or Background Image
	Color	Holds the color of the block background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles.
	Background Opacity	Holds the opacity of the block background. The value is set as a %.
Scroll	Scroll Effect	Indicates the scroll effect. The value can be None or Sticky. If the value is Sticky, you need to provide Height from the Top and enable or disable Preview Sticky in Builder.
Corner Radius	Radius	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.
Border	Border Size	Sets the width of the border of an element. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side.
	Border Color	Sets the color of the border of an element. The value can be set as a color name or hex code. Uniform values can be set for all the sides or different values can be set for each side.
	Opacity	Holds the opacity of the block background. The value is set as a %.
Drop Shadow	Drop Shadow	Configures the shadow of an element. The value can be: H Offset – Indicates the horizontal offset. You can enter either a positive or negative value. V Offset – Indicates the vertical offset. You can enter either a positive or negative value. Blur – Holds the blur radius length of the shadow. If the value is larger, the shadow becomes larger and more blurred. Spread – Holds the spread value. The value can be: A positive value causes the shadow to expand and grow bigger. A negative value causes the shadow to shrink. Color – Specifies the color of the shadow.

Rules Tab

Holds the rules of the master block.

Note: For more details on configuring rules, see the Setting up a Rule section.

Instance Block Properties

A block instance has the properties under the below tabs:

• Settings – Holds properties related to the settings of the block instance.
• Style – Holds properties to set the block instance style.
• Actions – Holds the actions of the block instance.

Settings Tab

Below are the properties used in the settings of the block instance:

Property	Description
Block Name	Indicates the name of a block instance. You can provide a unique name to a master and every instance of a master.
Block ID	Holds the autogenerated ID of a block instance. The master and every instance of a master have a unique ID.
Set Initial State	Holds the initial state of the block instance.
Repeat Block	Indicates whether the block is enabled as a repeat block or not. For example, this block is used to design PLP pages. In a repeat block, you can use the variables linked with datapoints to get the dynamic data. For more details, see Linking a Variable with a Datapoint. For example, Note: When the Repeat Block toggle is enabled, you can set the style of the repeat block using the Style tab.
Length	When the Repeat Block toggle is enabled, you can provide the length of the repeat block using the Length property. You can set the length as either static or dynamic. For static length, you need to enter a numeric value. For dynamic length, you need to enter @ symbol followed by a variable. For example, @v2 To change the length from: dynamic to static – you need to click  and select the Set static length option: static to dynamic – you need to click and select the Set length from Data source option:
Auto Carousel	Specifies whether to have the slider effect for the repeat block items or not. Note: To enable the Auto Carousel feature, the Repeat Block toggle should be enabled. For example, when the Auto Carousel toggle is not enabled, all the repeat block items are shown without the slider effect: When the Auto Carousel toggle is enabled, the repeat block items are shown with the slider effect:
Anchor	Holds the anchors of the block instance. Note: For more details on creating an anchor, see the Creating an Anchor for a Block section.

Style Tab

Below are the properties of the instance block to set the style:

Group	Property	Description
Breakpoints	—	Helps to create responsive block views of the repeat block. Note: For more details on breakpoints, see the Breakpoint section.
Spacing	X Spacing	Holds the X-axis length of the repeat block elements in pixels.
	Y Spacing	Holds the Y-axis length of the repeat block elements in pixels.

Actions Tab

For the details on the Actions tab, see the Actions section.

How To

A user can:

• Create a New Block
• Reuse a Block
• Move a Block to a Bucket
• Unlink and Convert a Block Instance to a New Block
• Delete a Block
• Promote a Block to the Publick Block
• Convert a Block to a Repeat Block
• Set up a Rule
• Create an Anchor for a Block

Creating a New Block

You can create a block to include a shared independent component.

To create a block:

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired cell:
   
5. Click available at the top left corner.
   A list of items that need to be added to a cell appears:
   
6. Drag and drop block from the ELEMENTS section of the add-panel to the desired cell. For example,
   
   Note:

• • When a new block is created, it is placed in the General bucket by default, but it can be moved to any bucket as desired. For more details, refer to the section Moving a Block to a New Bucket.
  • A block will contain a cell by default into which any element or block can be placed. For example, a new added block with the default cell:
    

A new block is added in the desired cell of the page.

Reusing a Block

You can drag and drop an existing block from a bucket and reuse it anywhere on the project or asset. Any changes done in the master in one place will reflect everywhere in the project.

To reuse a block,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Double-click on the required block that you want to reuse. For example,
   
4. Select the required layout cell on the page. For example,
   
5. Click available at the top-left corner.
   A list of items that need to be added to a cell appears:
   
6. Drag and drop a block from the desired bucket of the add-panel to the desired cell. For example,
   
   An existing block from a bucket is reused.

Moving a Block to a Bucket

A block can be moved from one bucket to another using Move To from the dropdown list.

To move a block to a new bucket,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired block to be moved:
   
5. Click available at the top of the right-side panel.
6. Select Move To from the dropdown list:
   
7. In the pop-up, select the desired bucket where you want to move the block:
   
8. Click the CONFIRM button:
   
   The block is added to the selected bucket:
   Note: For information on the bucket, refer to Bucket.

Unlinking/Converting a Block Instance to a New Block

When a block has more than one instance, you can unlink an instance and convert it into a new block. This is useful if you would like to build a new block that is similar to an existing block without starting from scratch. Since a new block is created, any changes made WILL NOT affect the original block.

To convert a block instance to a new block,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired block instance to be converted to a new block:
   
5. Click  available at the top of the right-side panel.
6. Select Unlink from the dropdown list:
   
   The block instance is unlinked and moved to the All Things:
   

Deleting a Block

You can delete a block if no longer required. If the block has:

• more than one instance, an instance is deleted, and all the other instances will remain as is.
• only one instance, that instance can be deleted. But the shared block will be available in the bucket for future use.

When you delete a block:

• The standard (local) elements in that block will be deleted.
• When there are shared element(s)/block(s) in the block with only one instance, that instance will be deleted. But the shared block(s)/element(s) will be available in the bucket for future use.
• For shared element(s)/block(s) with more than one instance, that instance will be deleted, and all the other instances will remain as is.

To delete a block,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired cell where the block to be deleted is available.
5. Select the desired block to be deleted:
   
6. Click available at the top of the right-side panel.
7. Select Delete from Project from the dropdown list:
   
   The block is deleted from the cell.

Promoting a Block to the Public Block

You can promote a block to the public block to use it in the Agora workspace.

To promote to public block,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required page. For example,
   
4. Select the desired cell where the block to be promoted is available and select the desired block to be promoted:
   
5. Click available at the top of the right-side panel.
6. Select Promote to Public Block from the dropdown list:
   
   The block is promoted to public block in the Workspace dashboard.
   

Converting a Block to a Repeat Block

A repeat block is a block with a similar type of blocks repeated many times. For example, a PLP page with similar repeating blocks for all the products. The data source of a repeat block can be an array of elements. The repeat block repeats for all the array elements from the starting index to the ending index.

Note: Also, a block can have nested repeat blocks.

To convert a block to a repeat block,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required block on a page to be repeated. For example,
   
4. Select the INSTANCE tab:
   
5. Enable the REPEAT BLOCK toggle.
6. Click the dropdown arrow and select a state:
   
   Note: For more information on adding new state, refer to State.

7. Click available available next to the LENGTH element:
   
8. Select Set length from Data source from the dropdown list to set the length of the repeat block using a data source.
   
   Note: By default, the repeat block length is 1. You can set any specific length.
   The block is converted to a repeat block:
   

Setting up a Rule

You can add one or more rules for a block. If multiple rules are there in a block, it is combined using the OR operator. If the first rule is true, then the remaining rules will not be executed. You will get different states of a block in the response based on the rule execution.

Note: The default state is shown if the rules are not configured.

A rule consists of condition(s) and an action. If multiple conditions are configured, the conditions are combined using the AND operator.

When you simulate a project, you can find options to set values for the rule(s). For more details on simulating a project, refer to the section Hyper Personalization.

Note: In the Live mode, you will get responses based on the rule(s) you have configured.

To set up a rule for a block,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required block on a page. For example,
   
4. Select the MASTER tab:
   
5. Select the RULES tab available under the MASTER tab:
   
6. Click the Add Rule button to create a new rule.
   A new rule is added:
   
7. Click available next to the rule to be configured.
   The rule builder appears:
   
8. Update the rule as follows:

Rule Element	Purpose
IF	The element IF is used to set the condition(s) of a rule. You can select: GlobalVar – to set a condition using a variable. For more details on variables, refer to the section Variable. Breakpoint – to set a condition using a breakpoint. For more details on breakpoints, refer to the section Breakpoint. To set a condition using a variable, In the rule builder, click available next to the IF element. Select GlobalVar from the dropdown list: Note: You can delete a condition by clicking  which is available next to the desired IF element.  Provide a variable name in the next input box. For example, Note: For more details on variables, refer to the section Variable. Click available next to the IS element. Select either the Equal or NotEqual operator available in the dropdown list: Provide a value of the variable in the next input box. For example, Note: You can set multiple conditions using the + ADD CONDITION button. To set a condition using a breakpoint, In the rule builder, click available next to the IF element. Select the Breakpoint option: Select a breakpoint value from the dropdown list in the next field. For example, Note: For more details on breakpoints, refer to the section Breakpoint. You can set multiple if conditions using the + ADD CONDITION button.
THEN	The element THEN is used to set the action of a rule. Here, the action transfers the block from the default state to another available state. To set an action for a rule, In the rule builder, click available next to the THEN element: Select Set Default State in the dropdown list. Click available next to the TO element. A list of available states of the block appears: Note: To know more about the block states, refer to the section State. d.       Select the desired block state.

A rule is set up now.
Note: You can rename, delete, or duplicate a rule by clicking available next to the desired rule:

Creating an Anchor for a Block

You create an anchor for a block.

To create an anchor for a block,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Select the required block on a page. For example,
   
4. Select the INSTANCE tab.
5. Click available next to the ANCHOR option.
   You can find the ADD AN ANCHOR toggle:
   
6. Enable the toggle to create an anchor:
   
7. Provide an anchor name.
   An anchor is created:
   
   Note: You can use anchors in the Go to anchor action. For more details, see Go to anchor action.

 

Revision History 

Date	Description	Created By	Peer-Reviewed By	Approved By
2023-06-22	Page created and content added.	AN	JP	Suganya