Configure Experience Pages

Introduction

Goal

Configure a Bloomreach Experience Manager project so that CMS users can create experience pages.

Summary

This tutorial explains how to configure Experience Pages in Bloomreach Experience Manager. After following the steps in the tutorial, CMS users will be able to create and publish basic experience pages containing content of the standard Simple Document content type and containers to which they can add components from the catalog.

Prerequisites

The starting point for the tutorial is a plain vanilla Bloomreach Experience Manager projectcreated using the Maven archetype and with theSimple Content andBanners Essentials featuresadded.

You can use either the standard Essentials Site Skeleton Freemarker-based frontend or one of theSPA frontend demo projects.

Enable Delivery API (When Using SPA Frontend)

If you are using an SPA frontend, make sure your project has theDelivery API enabled.

In theConsole, make sure thehst:rootmount has the property hst:pagemodelapi with the value "resourceapi":

/hst:myproject/hst:hosts/dev-localhost/localhost/hst:root:  jcr:primaryType: hst:mount  hst:homepage: root  hst:mountpoint: /hst:myproject/hst:sites/myproject  hst:pagemodelapi: resourceapi

Create a Content Folder for Experience Pages

First, you will create a dedicated Experience pages folder and link it to the "My Project" channel. This is where the experience pages will live.

In to the CMS, navigate to theContent application.

Inside the "My Project" root folder, create a new folder named "experience pages".

In the Console, navigate to the new folder node /content/documents/myproject/experience-pages.

UnderMixin Types, checkhippostd:xpagefolder to mark the new folder as Experience Page Folder.

If you are using Bloomreach Experience Manager 14.4.0 or later, also check the mixin hippostd:cmxpagefolder to mark the new folder as default Experience Page Folder for Experience Pages created in theExperience manager.

Add a new property hippostd:channelid and set its value to "myproject" to link the Experience Page Folder to the channel.

/experience-pages:  jcr:primaryType: hippostd:folder  jcr:mixinTypes: ['hippo:named', 'hippostd:cmxpagefolder', 'hippostd:xpagefolder',    'hippotranslation:translated', 'mix:versionable']  jcr:uuid: a5d5107b-11d6-42b0-87d1-19a0c5436328  hippo:name: experience pages  hippostd:channelid: myproject  hippostd:foldertype: [new-translated-folder, new-document]  hippotranslation:id: cfd1401b-8e69-42d9-99e7-3e46171e931b  hippotranslation:locale: en

Configure an Experience Page Layout

The next step is to configure an Experience page layout.

In the Console, navigate to /hst:myproject/hst:configurations/myproject.

First, create a child nodehst:xpages of node typehst:xpages. All Experience page layouts will be configured as child nodes of this node.

Then, add a child nodeexperience-page of node typehst:xpage. This will be the Experience page layout and its configuration will look very familiar if you already have experience withHST pages and components.

Add the remaining nodes and properties as shown in the YAML snippet below. As you can see, the Experience page layout looks just like a normal HST page, inheriting the "base" abstract page and defining one container component with one container item component already inside it to render the embedded content.

/hst:myproject/hst:configurations/myproject/hst:xpages:  jcr:primaryType: hst:xpages  /experience-page:    jcr:primaryType: hst:xpage    hst:label: Experience Page    hst:referencecomponent: hst:abstractpages/base    /main:      jcr:primaryType: hst:containercomponent      hst:xtype: HST.vBox      /content:        jcr:primaryType: hst:containeritemcomponent        hst:componentclassname: org.onehippo.cms7.essentials.components.EssentialsContentComponent        hst:label: Content        hst:template: contentpage-main

Configure the Sitemap for Experience Pages

The final step is to define the URLs for the experience pages by configuring the sitemap.

In the Console, navigate to /hst:myproject/hst:configurations/myproject/hst:sitemap.

Create a newhst:sitemap node called experiencepages as in the YAML snippet below:

/hst:myproject/hst:configurations/myproject/hst:sitemap/experiencepages:  jcr:primaryType: hst:sitemapitem  hst:hiddeninchannelmanager: true  hst:relativecontentpath: experience-pages  /_any_.html:    jcr:primaryType: hst:sitemapitem    hst:relativecontentpath: ${parent}/${1}

Note the following:

• The parentexperiencepages sitemap item is hidden in the Experience manager's sitemap through the property hst:hiddeninchannelmanager.
• The parentexperiencepages sitemap item is linked to the "experience-pages" Experience page folder.
• The_any_.html child sitemap item uses the first wildcard value${1} to link to actual experience pages inside the folder.

Your Bloomreach Experience Manager instance is now ready for CMS users to create experience pages!

Create an Experience Page

In the CMS, open the "My Project" channel in theExperience manager.

Click on the +Add button in the top right (do not use theNew option in thePage menu, that's for normal pages). TheNew page form appear on the right side of the screen.

Enter "My Experience Page" in the Page name field. TheURL field will be auto-filled.

In thePage type drowdown, selectSimple Document.

In theLayout template,Experience Page is preselected because it is the only layout that is defined.

In the Page location, the "experience pages" folder is preselected because it's the only Experience pages folder linked to the channel.

Click onCreate.

The next form is that appears lets you enter the "Simple Document" content. Enter "My Experience Page" in theTitle field and fill the Introduction andContent fields.

Click onSave. The new experience page is now loaded in the channel preview.

Open the left sidebar and selectComponents. Add aBanner component to the container on the page and select a banner document to display.

Open thePage menu and choosePublish to publish the experience page.

View the Experience Page's Node Structure

In the frontend, navigate to http://localhost:3000/experiencepages/my-experience-page.html to view the published experience page.

At this point, it is interesting to see what the experience page looks like at JCR level.

In the Console, browse to the "live" (hippostd:state: published) variant of the experience page document at /content/documents/myproject/experience-pages/my-experience-page/my-experience-page (see the YAML snippet below).

Note that both the content and the full page configuration are part of the document variant's node structure. The experience page is fully self-contained and can move through the publication workflow as a single unit.

/content/documents/myproject/experience-pages/my-experience-page/my-experience-page:  jcr:primaryType: myproject:contentdocument  jcr:mixinTypes: ['hst:xpagemixin', 'mix:referenceable']  jcr:uuid: 39c19458-54aa-4395-a400-332d80575a36  hippo:availability: [live]  hippo:related___pathreference: []  hippostd:retainable: false  hippostd:state: published  hippostdpubwf:createdBy: admin  hippostdpubwf:creationDate: 2020-09-03T15:34:14.940-07:00  hippostdpubwf:lastModificationDate: 2020-09-03T15:34:48.298-07:00  hippostdpubwf:lastModifiedBy: admin  hippostdpubwf:publicationDate: 2020-09-08T11:14:01.179-07:00  hippotranslation:id: 65af9557-1dfe-460c-a5d6-e4ef8a37a917  hippotranslation:locale: en  myproject:introduction: This is the intro.  myproject:publicationdate: 2020-09-03T15:34:00-07:00  myproject:title: My Experience Page  /myproject:content:    jcr:primaryType: hippostd:html    hippostd:content: <p>This is the content.</p>  /hst:xpage:    jcr:primaryType: hst:xpage    jcr:uuid: 890c8187-54f0-40c2-b98e-ea0eb28c8fb1    hst:pageref: experience-page    /426f817d-200c-4298-8500-57fd704c37fa:      jcr:primaryType: hst:containercomponent      jcr:uuid: 62961c13-b6bd-479d-b7ca-c944e5318a98      hippo:identifier: 07215062-5920-4fe4-9c33-5760d1e6e0e0      hst:lastmodified: 2020-09-03T22:34:48.298Z      /banner:        jcr:primaryType: hst:containeritemcomponent        jcr:uuid: 9a6a21aa-0d70-4e0f-9581-1737cafc65b7        hst:componentdefinition: hst:components/essentials-catalog/banner        hst:parameternames: [document]        hst:parametervalues: [banners/banner1]      /content:        jcr:primaryType: hst:containeritemcomponent        jcr:uuid: 2cf345f4-599b-4d65-8f98-e77ff24f0f90        hst:componentclassname: org.onehippo.cms7.essentials.components.EssentialsContentComponent        hst:label: Content        hst:template: contentpage-main