This article covers a Bloomreach Experience Manager version 13. There's an updated version available that covers our most recent release.

Use the Open UI Extension Client Library

This feature is available since version 13.0.0

Introduction

Goal

Use the BloomReach Open UI Extension JavaScript Client Library to develop your own UI extension.

Background

Communication between an Open UI extension and the CMS UI is handled by a JavaScript library provided by BloomReach. The library hides the complexity of the window.postMessage communication with the CMS and provides a stable public API.

Include Client Library

The client library is available as an NPM package:

npm install @bloomreach/ui-extension

The library can be used in two ways.

As a JavaScript module:

import UiExtension from '@bloomreach/ui-extension';

Or as a standalone ES5 script:

<script src="https://unpkg.com/@bloomreach/[email protected]/dist/ui-extension.min.js"></script>

The latter creates a global object window.UiExtension.

Register Extension

The UiExtension object needs to be registered first: 

UiExtension.register().then((ui) => {
  // your code goes here ...
});

The code snippet above registers the extension with the CMS application, so the latter knows the extension is ready for communication. The register() method returns a Promise that resolves with a ui object. The ui object can be used to access information about the CMS and interact with the CMS UI.

API

Static Properties

The ui object contains the following properties:

Property Description Example value
ui.baseUrl The URL of the CMS that hosts the extension. "https://cms.example.com"
ui.extension.config The value of the 'frontend:config' property. "{ apiKey: '1234' }"
ui.locale The locale of the CMS user as selected on the login page. "nl"
ui.styling * The styling of the user interface in which the extension is shown. For page tools this is always "material" for AngularJS Material. "material"
ui.timeZone The time zone of the CMS user as selected on the login page. "Europe/Amsterdam"
ui.user.id The username of the CMS user. "admin"
ui.user.firstName The first name of the CMS user. "Suzanna"
ui.user.lastName The last name of the CMS user. "Doe"
ui.user.displayName Concatenation of the first and last name of the CMS user, or the username if both are blank. "Suzanna Doe" or "admin"
ui.version The version of the CMS. "13.2.0"

* Available since version 13.2.0.

Extension-Specific Properties, Functions, and Events

The ui object provides several other properties, functions, and events which are specific to a type of extension and are described on the relevant pages:

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?