Configure Experience Pages

Info: Experience Pages are available starting from brXM 14.3.0.

Overview

This guide describes how to configure a Bloomreach Content project to allow CMS users to create experience pages.

After completing these steps, CMS users can create and publish experience pages. These pages can include content based on the standard Simple Document type and containers that support adding components from the catalog.

Prerequisites

Start with a new Bloomreach Content project created using the Maven archetype.
Add the Simple Content and Banners Essentials features to your project as described in Adding Features to a Project.
You can use either the standard Essentials Site Skeleton (Freemarker-based frontend) or one of the SPA frontend demo projects.

Enable Delivery API (For SPA Frontend)

Hint: Skip this step if you use the Freemarker-based frontend.

If your project uses an SPA frontend, ensure the Delivery API is enabled.

In the Console, verify that the hst:root mount includes the property hst:pagemodelapi set to 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

Create a dedicated folder for experience pages and link it to the "My Project" channel.

In the CMS, open the Content application.
Inside the "My Project" root folder, create a new folder named experience pages.
In the Console, navigate to /content/documents/myproject/experience-pages.
Under Mixin Types, select hippostd:xpagefolder to mark the folder as an Experience Page Folder.
For brXM 14.4.0 or later, also select hippostd:cmxpagefolder to designate the folder as the default Experience Page Folder for the Experience manager.
Add the property hippostd:channelid with the value myproject to link the folder to the channel.

Example configuration:

/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

Hint: To control which content types users can create in a folder, use template queries. For more information, see Control the Allowed Document Types in a Folder.

Configure an Experience Page Layout

Define the layout for experience pages in the configuration.

In the Console, go to /hst:myproject/hst:configurations/myproject.
Create a child node hst:xpages of type hst:xpages.
Under hst:xpages, add a child node experience-page of type hst:xpage. This node defines the layout for experience pages.
Add the following nodes and properties as shown below. This configuration inherits from the "base" abstract page and defines a container component with a content component.

/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

Define the URLs for experience pages by updating the sitemap configuration.

In the Console, navigate to /hst:myproject/hst:configurations/myproject/hst:sitemap.
Create a new hst:sitemapitem node named experiencepages as shown 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}

Key points:

The experiencepages sitemap item is hidden in the Experience manager using hst:hiddeninchannelmanager: true.
The sitemap item is linked to the experience-pages folder.
The _any_.html child item uses the ${1} wildcard to resolve to specific experience pages within the folder.

After this configuration, CMS users can create experience pages in your Bloomreach Content instance.

Create an Experience Page

To create a new experience page:

In the CMS, open the "My Project" channel in the Experience manager.
Click the +Add button in the top right. Do not use the New option in the Page menu, which is for standard pages.
In the New page form, enter My Experience Page in the Page name field. The URL field is filled automatically.
In the Page type dropdown, select Simple Document.
The Layout template field is preselected as Experience Page (the only defined layout).
The page location is preselected as the experience pages folder (the only Experience Page Folder linked to the channel).
Click Create.
In the next form, enter My Experience Page in the Title field. Fill in the Introduction and Content fields as needed.
Click Save. The new experience page appears in the channel preview.
Open the left sidebar and select Components. Add a Banner component to the container and select a banner document.
Open the Page menu and choose Publish to publish the experience page.

Hint: For detailed usage instructions, see the Experience Pages user documentation.

View the Experience Page's Node Structure

To verify the node structure of the created experience page:

In the frontend, go to http://localhost:3000/experiencepages/my-experience-page.html to view the published page.
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.

The following YAML shows the node structure. Both the content and the full page configuration are included in the document variant. The experience page is self-contained and moves 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