OneCX Remote Components

Overview

Exposing user interfaces via a Microfrontend requires a remote entry file, which is later used by the host application to display content on the page. OneCX Remote Component is a piece of user interface representing a single UI component exposed via a remote entry file by a single Microfrontend.

Remote Components Concept

With OneCX platform the go-to method for exposing complete user interfaces is to expose complete modules via Microfrontend’s remote entry file. However, there might be cases in which some components developed within one Application might be useful for other Applications.

The concept of Remote Components extends the concept of Microfrontends by focusing on both scaled agile and reusability. A Remote Component will always be owned by a specific Microfrontend, but can be used in any desired place (Shell, Microfrontend’s module, another Remote Component). The mechanism of Remote Components display will make more sense once OneCX Slots are explained.

Remote Components Value

The implementation details of a Remote Component are located in a specific Microfrontend’s source code. The client side of that Remote Component does not need to prepare additional technical code, which means that they are implemented once and maintained in a single place. With Remote Components it is easy to share the technical implementation details from one Application to another.

For example, Remote Components might come in handy when your Applications require the ability to change the current user’s password via a button. In that scenario, the User Profile UI would expose a Remote Component that implements such functionality, and other Applications with that requirement would use it in the desired place to allow users to change their password. Technical details on how the password change is handled would be in a single place, and all Applications using the Remote Component will not need to take care of that matter.

OneCX Slot

Every Remote Component requires a host to be displayed within a page. OneCX Slots are the elements fulfilling this role. To use a Remote Component it is necessary to first implement and expose it via a Microfrontend remote entry file and then create and confiure a OneCX Slot in which it should be displayed.

OneCX Slot Definition

OneCX Slot is a standard component used in the HTML content templates. It uses current workspace information to determine what content should be loaded inside the Slot. Slots themselves do not have any content, and their only purpose is to render Remote Components that are assigned to them. With OneCX Slots it is easy to reuse components and dynamically change the content displayed on the pages.

Slot Mechanism

Whenever it is desired to display a Remote Component, a Slot is needed to act as a host element for it. For OneCX Core Applications, there are existing Slots, which can be used to configure displayed content (especially Shell Application’s Slots).

To create a Slot the following requirements have to be fulfilled:

  • Register Slot in Application Store: Slot needs to be registered via the Application Store.

  • Use Slot in HTML template: Slot needs to be used in the HTML template of Microfrontend’s content.

  • Unique name: Slot requires having a unique name property to be recognizable.

To assign a Remote Component to a Slot the following requirements have to be fulfilled:

  • Prerequisites

    • Slot has to be created.

    • A Remote Component has to be exposed by the provider Application’s Microfrontend.

    • Both provider and consumer Application need to be registered for a Workspace.

  • Register Slot in Workspace: Slot needs to be registered for a Workspace that will be using it via Workspace Management.

  • Assign Remote Component to Slot: a Remote Component needs to be assigned to a Slot for a Workspace that will be using it via Workspace Management.

Remote Component loading

Modules exposed by a Microfrontend are loaded by the Shell Application’s UI App using routing rules. With Remote Components this responsibility is on OneCX Slot. Here is a quick overview of steps happening when Remote Components are being loaded:

  1. On initial page load, Shell UI gathers Remote Components and Slots data and passes it to a Topic.

  2. Slot Component:

    1. is rendered within a page.

    2. reads the data passed down via a Topic and fills out its content.

      1. checks for registered Remote Components.

      2. creates Remote Components and renders them inside itself.

      3. runs the initialization function of each Remote Component.

    3. listens to Input and Output changes and passes the data to registered Remote Components.

For more information about Microfrontend content loading, please refer here.

Useful Resources