Skip to content

Components

Experience Builder components are Liquid resources that enable the creation of modular and customizable content. A JSON definition, placed within Liquid schema tags at the bottom of each component, specifies the customizable behavior of the component. The component schema can also instruct the pre-render phase of the request life cycle to fetch data from the API sdk.

Functionality

  1. Define user input settings for elements
  2. Organize the UI functionality into meaningful reusable areas using blocks
  3. Control the number of instances allow on a page.
  4. Transform data from the api-sdk into Liquid objects during the pre-render phase of the request life cycle.

Component Schema Attributes

Attributes Type Required Description Default
limit Integer No Maximum instances of this component allowed on a single page. -
settings Array(Object) No Array of Settings that configure the this component's behavior. -
blocks Array(Object) No Array defining the nested block structure and types within this component. -
minBlocks Integer No Minimum number of nested blocks required within this component. 0
maxBlocks Integer No Maximum number of nested blocks allowed within this component. -
metaObjects Array(Object) No Defines metadata objects associated with this component (if applicable). -
enabled Boolean No Specifies whether this component is enabled and available for use. true

Block Attributes

Attributes Type Required Description Default
id String Yes Unique identifier for the block. -
limit Integer No Maximum instances of this block type allowed within its parent this component. -
settings Array(Object) No Array of Settings that configure this block. -
componentSchema String No The schema of this component that this block is associated with. -
min Integer No Minimum number of instances of this block type allowed within its parent this component. 0
max Integer No Maximum number of instances of this block type allowed within its parent this component. 0

Meta Object Attributes

Attributes Type Required Description Default
name String Yes Name of the meta object. -
sdk Object No Defines the SDK configuration for fetching data. -

SDK Attributes

Attributes Type Required Description Default
route String Yes SDK route used to fetch data. -
parameters Array(Object) No Array of parameters for the SDK route. -
method String No HTTP method for the SDK request (e.g., GET, POST). GET
useContextQueryString Boolean No Indicates if the context should be added to the query string. true

SDK Parameter Attributes

Attributes Type Required Description Default
name String Yes Name of the parameter. -
valueOrigin String Yes Origin of the parameter's value (e.g., UrlParam, Setting). -
required Boolean No Indicates if the parameter is required. false

Example: simple-component.component

<!-- Simple Component -->
<div>
    <h1>Simple Component</h1>
</div>

{% schema %}
{
    "limit": 1,
    "settings": [
        {
            "type": "text",
            "id": "headingText",
            "label": "Heading",
            "default": "Simple Component"
        }
    ]
}
{% endschema %}

Understanding Blocks

Example: component-with-blocks.component

<!-- Sample: Rendering Blocks within a Component -->
<div style="background-image: url('{{ this.settings.backgroundImage | asset_url }}')">
    {% for block in this.blocks %}
        {% case block.id %}
            {% when 'heading' %}
                <h1>{{ block.settings.headingText }}</h1>
            {% when 'description' %}
                <h4>{{ block.settings.descriptionText }}</h4>      
        {% endcase %}
    {% endfor %}
</div>

{% schema %}
{
    "limit": 1,
    "settings": [
        {
            "type": "image",
            "id": "backgroundImage",
            "label": "Background Image",
            "default": "background-image.png"
        }
    ],
    "blocks" : [
        {
            "id": "heading",
            "max": 1,
            "settings": [
                {
                    "type": "text",
                    "id": "headingText",
                    "label": "Heading",
                    "default": "Components"
                }
            ]
        },
        {
            "id": "description",
            "max": 1,
            "settings": [
                {
                    "type": "text",
                    "id": "descriptionText",
                    "label": "A description about the page",
                    "default": "This is a sample configuration for components."
                }
            ]
        }
    ],
    "maxBlocks": 2,
    "minBlocks": 2,    
    "enabled": true,
    "metaObjects": [
        {
            "name": "productList",
            "sdk": {
                "route": "/api/get-products",
            }
        }
    ]
}
{% endschema %}

Output:

<div style="background-image: url('background-image.png')">
    <h1>Components</h1>
    <h4>This is a sample configuration for components.</h4>
    <p>Product Name: /api/products/123</p>
</div>

Fetching Data