Experience Pages Configuration - Bloomreach Experience - Open Source CMS

Experience Pages Configuration

This feature is available since Bloomreach Experience Manager 14.3.0

Introduction

To enable the use of Experience Pages in a Bloomreach Experience Manager implementation project, some platform configuration is required:

With the above three items in place, CMS users can create Experience Page Documents, combining a document type with an Experience Page Layout and storing it in the Experience Page Folder.

For a hands-on introduction, follow the Configure Experience Pages tutorial!

Required Configuration

Document Type

Any regular document type can be used to create an Experience Page. This is up to the CMS user and no special configuration is required.

However, there are use cases where it could make sense to define a dedicated document type specifically intended to be used with for Experience Pages. For example, such a document type could hold only metadata about the page and no actual content. Only the catalog components added to the page by the CMS user would be rendered in the resulting webpage. This is completely up to the implementation project.

Experience Page Folder

At JCR level, an Experience Page Folder uses the same node structure as regular content folders with the following two additions:

  • It has the mixin hippostd:xpagefolder added to mark it as an Experience Page Folder.
  • It has the property hippostd:channelid to link it to a particular channel (its value refers to the node name of the hst:configuration defining that channel, e.g. /hst:myproject/hst:configurations/myproject).

Typically, a developer setting up an implementation project to use Experience Pages will create a regular content folder using the CMS UI and add the abovementioned mixin and property using the Console.

Example YAML snippet of an Experience Page Folder:

/content/documents/myproject/experience-pages:
  jcr:primaryType: hippostd:folder
  jcr:mixinTypes: ['hippo:named', 'hippostd:xpagefolder', 'hippotranslation:translated',
    'mix:versionable']
  hippo:name: experience pages
  hippostd:channelid: myproject
  hippostd:foldertype: [new-translated-folder, new-document]
  hippotranslation:id: 6b47d18b-1428-4c88-ac38-07b923480d35
  hippotranslation:locale: en

When a CMS user creates a new Experience Page in a channel in the Experience manager, the New page side-panel is populated based on the folder configuration as follows:

  • The Page location field is set to the first direct subfolder of the current channel's content root folder that satisfies the following two conditions:
    • It has the mixin hippostd:xpagefolder.
    • It has a property hippostd:channelid with the current channel's name as value.
  • The Page type dropdown is populated using the template query referred to by the first value of the folder's hippostd:foldertype property that ends with "-document".

Experience Page Layouts

Experience Page Layouts are defined within a site's HST configuration under the hst:xpages node (e.g. /hst:myproject/hst:configurations/myproject/hst:xpages/hst:myproject/hst:configurations/myproject/hst:xpages).

At JCR level, an Experience Page Layout is defined by a node of type hst:xpage, which inherits from the hst:component node type and has similar configuration options. Of note are the following properties:

  • The hst:xpage node has an hst:label property defining the UI label to use when a CMS user selects a layout for a new experience page.
  • Any newly created hst:containercomponent node within the Experience Page Layout configuration automatically gets a hippo:identifier property added containing a generated UUID. This is a stable identifier used by Experience Page Documents to refer to a particular container in the corresponding Experience Page Layout.

Example YAML snippet:

/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
      hippo:identifier: 426f817d-200c-4298-8500-57fd704c37fa
      hst:xtype: HST.vBox
      /content:
        jcr:primaryType: hst:containeritemcomponent
        hst:componentclassname: org.onehippo.cms7.essentials.components.EssentialsContentComponent
        hst:label: Content
        hst:template: contentpage-main
For more details, refer to the Experience Page Layouts Configuration reference documentation.

Sitemap Items

The URLs for Experience Pages are defined in the sitemap similarly to any other pages. However, because an Experience Page is completely self-contained and includes a page component configuration, the sitemap item for an experience page does not have a hst:componentconfigurationid property defined*.

Example YAML snippet:

/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}

In the example above, also note that the parent experiencepages sitemap item is hidden in the Experience manager's sitemap through the property hst:hiddeninchannelmanager. This is optional.

* Although it is recommended to only store Experience Page Documents in an Experience Page Folder, it is technically possible to have regular documents inside an Experience Page Folder. To support this use case, an hst:componentconfigurationid can be added to the _any_.html sitemap item in the example above. It will be ignored when the matched document is an Experience Page Document, but used as fallback in case the matched document is not an Experience Page Document.

Node Structure of User-Created Instances

Experience Page Document

Once the required configuration as described above is in place, CMS users can create Experience Page Document instances within either the Experience manager or the Content application.

At JCR level, an Experience Page Document has a node structure that is very similar to that of a regular document. The difference is that the preview and live variants contain an hst:xpage child node defining the page configuration for this Experience Page Document as follows:

  • The page configuration is an instance of an Experience Page Layout, as defined by the hst:pageref property of which the value matches the node name of the corresponding Experience Page Layout definition.
  • Any hst:containercomponent within the page configuration has a randomly generated node name and a hippo:identifier property linking it to a particular container in the corresponding Experience Page Layout definition. This ensures some robustness in case the latter is modified by developers.

Example YAML snippet:

/content/documents/myproject/experience-pages/my-experience-page/my-experience-page[3]:
  jcr:primaryType: myproject:contentdocument
  jcr:mixinTypes: ['hst:xpagemixin', 'mix:referenceable']
  hippo:availability: [live]
  hippo:related___pathreference: []
  hippostd:retainable: false
  hippostd:state: published
  hippostdpubwf:createdBy: admin
  hippostdpubwf:creationDate: 2020-09-03T14:35:10.391-07:00
  hippostdpubwf:lastModificationDate: 2020-09-03T14:35:18.748-07:00
  hippostdpubwf:lastModifiedBy: admin
  hippostdpubwf:publicationDate: 2020-09-03T14:35:22.426-07:00
  hippotranslation:id: ddc64667-6597-464f-97f4-5ae46039da15
  hippotranslation:locale: en
  myproject:introduction: intro
  myproject:publicationdate: 2020-09-03T14:35:00-07:00
  myproject:title: My Experience Page
  /myproject:content:
    jcr:primaryType: hippostd:html
    hippostd:content: <p>content</p>
  /hst:xpage:
    jcr:primaryType: hst:xpage
    hst:pageref: experience-page
    /426f817d-200c-4298-8500-57fd704c37fa:
      jcr:primaryType: hst:containercomponent
      hippo:identifier: 516ce5d4-33ed-42b9-aa76-361e2b60d4a2
      /content:
        jcr:primaryType: hst:containeritemcomponent
        hst:componentclassname: org.onehippo.cms7.essentials.components.EssentialsContentComponent
        hst:label: Content
        hst:template: contentpage-main
Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?