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 project created using the Maven archetype and with the Simple Content and Banners Essentials features added.

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

Enable Delivery API (When Using SPA Frontend)

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

In the Console, make sure the hst:root mount 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 the Content 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.

Under Mixin Types, check hippostd: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 the Experience 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 node hst:xpages of node type hst:xpages. All Experience page layouts will be configured as child nodes of this node.

Then, add a child node experience-page of node type hst:xpage. This will be the Experience page layout and its configuration will look very familiar if you already have experience with HST 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 new hst: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 parent experiencepages sitemap item is hidden in the Experience manager's sitemap through the property hst:hiddeninchannelmanager.
• The parent experiencepages 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 the Experience manager.

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

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

In the Page type drowdown, select Simple Document.

In the Layout 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 on Create.

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

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

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

Open the Page menu and choose Publish 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