Base components

Introduction

In Bloomreach Content, pages are based on the hierarchical model-view-controller design pattern. In a typical Bloomreach Content project relying on a JavaScript or TypeScript frontend application for the view, the controller aspect frequently implements similar patterns of behavior. Bloomreach Content provides dynamically-configurable components, allowing for many of these use cases to be handled without any coding required.

Several base components are provided for use in defining a wide array of project-specific components for different use cases.

Define a project-specific component

Component groups are the central location for configuring new components for use within a project. The Site Management API's channel component operations include endpoints to retrieve, create, and update component groups as well as components within a component group.

Select a base component

The platform currently provides 3 base components for use in defining project-specific components: the Base Component, Query Component, and Menu Component. A brief description is included below, with full details described in separate pages for each base component.

• Base component
  As the name indicates, this component includes the most basic dynamic behaviors. This includes dynamic lookup of any content linked via a "contentpath" type of component parameter and serializing all parameters via the Delivery API's Pages endpoint. This base component is useful for a broad set of use cases, including basic document rendering use cases, banners, carousels, etc. This is likely to be the most frequently-used base component within a project.

• Menu component
  This is a simple component with the specific purpose of rendering the contents of a menu for use in a frontend component. This is also an extension of the Base Component.

• Query component
  This base component is intended for use cases where a set of documents should be loaded via a query and provided to the frontend component as a list. This is appropriate for implementing components like a news list, a blog list, or similar listing pages that may have optional sorting and limiting aspects. Since this is an extension of the Base Component, it includes that component's functionality.

• Text search results component
  This base component is intended for use cases where a set of documents should be loaded via a query based on a search term, and provided to the frontend component as a list. This is appropriate for implementing search results. Since this is an extension of the Base Component, it includes that component's functionality.

Configure component parameters

Components can be configured with parameters that have values set either by developers through the Site Management API or by site editors in the Experience manager app. Metadata about component parameters is stored within the component definition, and this metadata is used to generate the appropriate dialogs within the Experience manager. Please refer to this page for details about the available parameter types and their configuration options.

Example: A banner component

As an example, here's the required configuration for a simple banner component that renders the data from a single Banner document. It extends the Base component.

{
  "id": "sample/banner",
  "extends": "base/component",
  "hidden": false,
  "system": false,
  "xtype": null,
  "ctype": "Banner",
  "contentType"; null,
  "label": "Banner",
  "icon": null,
  "parameters": [
      {
        "name": "document",
        "valueType": "string",
        "required": true,
        "hidden": false,
        "overlay": false,
        "defaultValue": "",
        "displayName": null,
        "system": false,
        "config": {
          "pickerConfiguration": "cms-pickers/documents-only",
          "pickerInitialPath": "banners",
          "pickerRememberLastVisited": true,
          "pickerSelectableNodeTypes": [
            "brxsaas:banner"
          ],
          "relative": true,
          "pickerRootPath": null,
          "type": "contentpath"
        }
      }
  ],
  "fieldGroups": []
}

The configuration above could be used as payload with the following API request to create the "banner" component within the "sample" component group:

PUT​ /channels​/brxsaas​/component_groups​/sample​/components​/banner