Tutorial: Create your first XM Cloud no-code component

Overview

Components are the visual, re-usable, building blocks to design web pages in XM Cloud. You can think of creating a component like creating a ‘stamp’ that you can use throughout a webpage. In this tutorial, you will build the first component in your project. We will use the XM Cloud Components builder, exploring the no-code approach to building components. No-code components, sometimes referred to as Front-End as a Service (FEaaS) components, are built using XM Cloud's user interface, allowing non-technical team members to help with the site management.

In this tutorial you will do the following:

1. Build a collection to organize components
2. Define the layout of a new XM Cloud component called Text Teaser
3. Make the component available to editors
4. Place the component into your existing webpage

Prerequisites

In order to complete the following tutorial, you will need these resources:

1. A valid organization login for the Sitecore Cloud portal
2. An existing XM Cloud environment created in Tutorial: How to Set Up and Utilize XM Cloud
3. An existing XM Cloud site created in Tutorial: How to Create a Site and Connect your App to it

What do we need to build?

The first component we want to build is the “Text Teaser” Component. The requirements from the customer design team are as follows:

• 2-column centered layout
• Within the first column there is a headline (h2) and a sub-headline (h3).
• In the second column, there is a paragraph text with formatted text that can be handled by a rich text editor.
• Maximum width of 1320 pixels
• Use Roboto font for the headlines
• Use Open Sans font for the paragraph font.

This is what your component should look like when it is finished:

In this tutorial you will focus on creating the initial definition of the component with the 2-column layout and the desired elements. The specific design requirements for styling will be covered in a later tutorial.

Organizing components using collections

To structure the components a bit, you can use collections. Collections help you to navigate the components in the Components builder, but also later in Pages. You will now create a new collection named "Basic Components" to hold any components you will create.

1. To begin, open the Sitecore Cloud Portal (https://portal.sitecorecloud.io) and log in.

2. From your dashboard, select the XM Cloud environment where you will create your Text Teaser Component.

   

3. From the app context flyout, select Open App to launch XM Cloud environment apps dashboard

   

4. At the very top switch to Tools

5. In the Tools page, select the Components card to launch the Components builder. You can see that there are already some components available.

   

6. On the top right, click Add collection to create a new collection.

   

7. Name this collection: “Basic Components”

8. Click the Save button to complete the collection creation.

   

Create the component

Within this new collection, you will now create the new Component called “Text Teaser”.

1. In the "Basic Components" collection, click the "Add component" button to launch the component creation form.

2. Specify the Name value as "Text Teaser".

   You can leave the other fields blank. The Description field is optional and the Collection field will default to the currently selected Collection so it will be stored in Basic Components as desired.

   

3. Click on the Save button to complete creating the component definition. A message will display telling you that the component was created.

4. Click on the Click to start editing link that is displayed at the top of the Component form. This will launch the canvas (or 'Section') view of the Text Teaser component where you can start adding elements in the builder.

   

Create the column layout for the Text Teaser component

Before we begin adding content, we want to ensure we can provide a two-column layout that matches the requirements that were given at the beginning. You will now learn how to create Card elements that can be used to hold other elements. For more details on creating layouts, you can take a look at our documentation on Working with a component layout

1. Click on the section/canvas. You will see a grid displayed by default.

   This can be adjusted on the pane at the right side of the screen. For now leave it as it is.

   

2. Click and drag your mouse across the canvas to create a left column for your Text Teaser.

   By default, XM Cloud will create a Block element. You will want to change this to a Card in the following steps.

   

3. Click on the newly created left column Block area to load the context bar above the area.

4. Click on the element type Block in the context bar to change the element type.

5. Select the Card element type from the pop-up menu.

   

1. Click and drag your mouse across the canvas to create a right column for your Text Teaser.

   

2. Click on the newly created right column Block area to load the context bar above the area.

3. Click on the element type Block in the context bar to change the element type.

4. Select the Card element type from the pop-up menu.

Add content elements to the columns

Now that the layout is created, you will add text elements to the cards to match the requirements provided. Based on the requirements, we need two headings on the left side (an H2 and an H3) and a block of free-form text on the right for the teaser content.

In this section you will:

• Create the two headings (H2 and H3) on the left
• Create the block of content on the right

We will start with the headings in the left column, and then add the element to the right column.

1. Click on the left column Card to focus context on the left column. This will show you the context menu above the Card.

2. In the context menu, click on the Add element button to see the options for elements that can be inserted.

   

3. Select Heading 2 to insert an H2 element to the Card.

4. Click in the top area of the Card to position where the Heading 2 element should be placed.

5. Click Add element button again to add another heading.

6. Select Heading 3 to insert an H3 element to the Card.

7. Click in the area below the Heading 2 element to add the Heading 3 underneath it.

   

8. Click on the right column Card to focus context on the right column.

9. In the context menu, click on the Add element button to get the element options.

10. Select Paragraph element to insert free-form text into the right column.

11. Click on the top part of the right Card to position the element.

    

12. Fill out the Heading 2, Heading 3, and Paragraph elements with some example content to test the layout.

    For the content, you can make up your own text or use a generator tool like lorem ipsum.

    

Make the Component available to authors

At this point we have the Text Teaser component layout defined, with some basic elements, example text, and a sample theme. Now we will make the Text Teaser available so that authors can add it to their web page in the Pages editor.

1. Above the component, click on the Stage button. This will move your component out of its current draft state and make it ready for use in Pages.

   When a component is staged, it is available to authors, but it will not display on the published website. When you want that component to be visible on the live website, you must publish it. Learn more in the docs about staging and publishing.

2. Return to the XM Cloud Tools pane. If you've closed that tab, you can get there with these instructions:

   • Login to the Sitecore Cloud Portal
   • Select your App from the Apps list
   • From the flyout panel, select Open app
   • At the very top switch to Tools

3. In the Tools page, select the Pages card to launch the Pages editor. The home page will display.

   

4. On the left of the home page, click on the Components tab to view the list of available components.

5. Scroll down on the tab to find the Basic Components collection that you created earlier. In the collection you will see the Text Teaser component you have created.

   This validates that the component is available to authors. If it does not display in this list, then the component may not have been Staged or Published yet.

   

6. Drag the component onto the home page canvas below the title. The component will be added to the page.

   

Related XM Cloud Documentation

• Get started with XM Cloud Components
• Staging and publishing components
• Work with components
• Work with a component layout

Related XM Cloud Accelerate guidance for Sitecore Partners

• Creating New Components