Layout Cell

Overview

A layout cell is a part of the page, which contains content such as blocks, text, images, videos, and other elements. A page MUST have at least one layout cell. While you create a new project, a default page with a default layout cell is added to the project automatically.

A newly added layout cell is shown below:

Note: You can configure the properties of the newly added layout cell  using the properties panel on the right-side panel. For more details, see Properties of a Layout Cell.

A user can add a layout cell before or after another layout cell.

Properties of a Layout Cell

Properties of a layout cell are available under the tabs:

  • Settings – Holds properties related to the settings of the layout cell.
  • Style – Holds properties to set the layout cell style.
  • Actions – Holds the options to configure the actions of the layout cell.

Settings Tab

Below are the properties used in the settings of the layout cell:

Property Description
Layout Cell Name Indicates the name of a layout cell.
Layout Cell ID Holds the autogenerated ID of a layout cell.
Add Layout Cell Helps to add the layout cells of the page. You can add a layout cell before or after an existing layout cell.
Note: For more details, see the Adding a Layout Cell section.

Style Tab

Below are the properties of the layout cell to set the style:

Group Property Description
General Settings Default Visibility Specifies whether the layout cell is visible or not.
By default, this toggle is on, and the cell is visible.  When the toggle is off, the cell is hidden.
Width Specifies the width of a layout cell. The value can be set as a % or pixel value.
Note: When the AUTO toggle is enabled, the width is adjusted automatically, and you cannot set the width manually.
Height Specifies the height of a layout cell. The value can be set as a % or pixel value.
Note: When the AUTO toggle is enabled, the height is adjusted automatically, and you cannot set the height manually.
Autofill Space Specifies whether the space to be filled automatically or not.
Horizontal Space Specifies the horizontal space of a layout cell. The value can be set as a % or pixel value.
Vertical Space Specifies the vertical space of a layout cell. The value can be set as a % or pixel value.
Padding Specifies the padding of a layout cell. 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 layout cell. The contents can be arranged either in the vertical or horizontal direction.
Alignment Represents the alignment of the contents of a layout cell. 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.
Position Position Holds the position of the layout cell. The value can be Static, Absolute, or Relative.
If the value is Absolute, you can set the exact position of the layout cell.

Note: Click  and select Manually customize per orientation to set the position separately for LR (Left to Right) and RL (Right to Left).
Background Fill Type Holds the fill type of the layout cell background. The value can be Solid Colour, Gradient Colour, or Background Image
Color Holds the color of the layout cell 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.
Opacity Holds the opacity of the layout cell background. The value is set as a %.
Border Border Size Sets the size of the border of a layout cell. 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 a layout cell. The value can be set as a color name, hex code, or color variable. Uniform values can be set for all the sides or different values can be set for each side.

Note: For more details on color variable, see Creating Reusable Color Styles.
Opacity Holds the opacity of the layout cell border. The value is set as a %.
Overflow Overflow Holds the overflow value of the layout cell when it does not fit in the padding-box. The value can be:

  • Visible – Content is not clipped
  • Hidden – Content is clipped
  • Scroll – Scroll bars are added
  • Auto – Adds scroll bars when needed

Actions Tab

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

How To

A user can:

Adding a Layout Cell

To add a layout cell,

  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 required layout cell:
  5. Select + Before or + After  available under the Add Layout Cell panel to add a layout cell.
    A new layout cell is added before or after the selected cell. For example,

Deleting a Layout Cell

You can delete a layout cell if it is no longer required.

Note: A page MUST have at least one layout cell.

To delete a layout cell,

  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 required layout cell:
  5. Click at the top-right corner.
  6. Select Delete from the dropdown list.
    The cell is deleted from the page:

 

 

Revision History 

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