External Document Picker written in React
Kenan Salic
2019-08-13
Customizations of the UI is tricky because it makes upgrading your project a pain. It is possible to extend the UI of Bloomreach Experience Manager using predefined Open UI extension points.
Open UI provides a standardized framework to extend the CMS with e.g. pixel tracking, SEO, heatmaps, typo detection and other 3rd party tools. Such a UI extension is an application that is either packaged and deployed with the project or runs on a different server.
At this point, there are extension points for page tools in the Channel Manager and for document fields in the content editor. Dialogues can be opened by both types of extensions.
In this presentation, Kenan Salic walks through the basic steps of creating an Open UI extension for using 3rd party functionality in the Experience Manager. A focus will be on external pickers for document fields written in React and styled with Material UI.
In short:
OpenUI enables developers to integrate external systems into the Bloomreach interface which, in turn, creates a single place where businesses can manage all of their digital experience functions and extensions.
Such a UI extension is an application that is either packaged and deployed with the project or runs on a different server. UI extensions are rendered inside an iframe.
A JavaScript library is available that can be used for communication between the BloomReach Experience Manager UI and the extension. The library hides the complexity of the window.postMessage communication with the CMS and provides a stable public API.