Skip to content

First Page

Tutorials are learning-oriented articles that help users to go through a process and achieve a deliverable. This tutorial is designed for developers and technical writers who want to create a simple "Welcome to Experience Builder!" page using Experience Builder. By following this tutorial, you will learn how to set up a component, layout page, and JSON page to render a "Welcome to Experience Builder!" message.

Why should I follow this? This tutorial provides a foundational understanding of Experience Builder's templating system, which is essential for creating more complex and dynamic web pages. It will help you grasp the basics of component creation, layout structuring, and JSON configuration.

Outline

In this tutorial, you will learn how to: * Create a component schema and Liquid liquid code to render "Welcome to Experience Builder!" using a component block setting. * Set up a layout page to structure your HTML * Configure a JSON page to call and render the component and define

Before you start

Make sure that: - You have Experience Builder installed and set up in your development environment. - You have basic knowledge of HTML, JSON, and Experience Builder Liquid.

Part 1: Creating the Component Schema and Liquid Rendering Code

In this part, you will create a component schema and the Liquid code to render the "Welcome to Experience Builder!" message.

  1. Create a css Asset

Using the Web Ide, create a new asset css resource called sample-styles.css and add the following code. 

   html, body {
       height: 100%;
       margin: 0;
       display: flex;
       align-items: center;
       justify-content: center;
   }
Use ctrl+s to save your changes

  1. Define the Component Schema

Using the Web Ide Create a new component resource named sample-component.component and add the following schema:

{% schema %}
{
  "id": "sample-component",
  "blocks": [
    {
      "id": "heading",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Welcome to Experience Builder!"
        }
      ]
    }
  ]
}
{% endschema %}
Use ctrl+s to save your changes

  1. Add Liquid Rendering

In the same sample-component.component file, add the following Liquid syntax above the schema tag to render the component blocks:

{% inlinesection header %}
   {% asset "sample-styles.css" %}
{% endinlinesection %}

{% for block in component.blockList %}
  {%- case block.type -%}
    {%- when "heading" -%}
      <h1>{{ block.settings.heading }}</h1>
  {% endcase %}
{% endfor %}
Use ctrl+s to save your changes

Part 2: Setting Up the Layout and JSON Page

This is the second part of the tutorial where you will set up the layout and JSON page to call and render the sample-component.

  1. Create the Layout Page

Using the Web Ide, create a layout resource called main-main.layout and add the following content:

<!doctype html>
<html lang="en-us">
<head>
    <title>{{ page.title }}</title>
    {% renderinline header %}
</head>
<body>
    <main id="MainContent">
        {% renderbody %}
    </main>
</body>
</html>
Use ctrl+s to save your changes

  1. Create the JSON Page

Using the Web Ide, Create a new JSON page named hello_world_page.page and add the following JSON content:

{
    "layout": "main.layout",
    "route": "/",
    "components": {
        "sample-component-01": {
            "id": "sample-component",
            "enabled": true,
            "blocks": {
                "heading_block": {
                    "type": "heading",
                    "settings": {
                        "heading": "Welcome to Experience Builder!"
                    }
                }
            },
            "blockOrder": [
                "heading_block"
            ]
        }
    },
    "order": [
        "sample-component-01"
    ]
}
Use ctrl+s to save your changes

What you've learned

By completing this tutorial, you have learned how to: - Create a component schema and with liquid code to render a "Welcome to Experience Builder!" message using a block setting. - Set up a layout page to structure your HTML content. - Configure a JSON page to call and render the component.