The registerComponent method

Current version: 22.0

You call the registerComponent method as part of a flow for registering external components within the Components application in XM Cloud.

Import

To enable the registerComponent function, you first need to import it.

RequestResponse
import {registerComponent} from '@sitecore-feaas/clientside'
registerComponent(...);

Syntax

RequestResponse
registerComponent(component, options)

Options

The following is a list of supported parameters. The only required parameter is name. The list of properties are definitions of input fields for this component, visible to a content author when using the component inside XM Cloud Pages. The required and ui parameters reference these properties.

Name

Type

Description

name

string, required

The name of the component to display in the Components and Pages interface.

description

string

A description of the component to display in the Components and Pages interface.

thumbnail

URL

The URL of a thumbnail image to display in the Components builder for this component. The recommended dimensions are 280 * 520 px.

group

string

The collection of components to which this component belongs, for example, 'Default collection'.

properties

JSON schema object

A JSON schema that describes the component input properties. When using this component, the Pages user is presented with a configuration interface (UI) generated automatically based on that schema. The UI can be customized with the uiSchema provided in the ui property.

required

string array

An array of properties keys that require input from the Pages user.

ui

JSON schema object

UI-specific configurations for the specified properties. This option expects a uiSchema object.

Example

RequestResponse
FEAAS.registerComponent(MyComponent, {
    name: 'MyComponent',
    description: 'Description of MyComponent.',
    required: ['firstName'],
    properties: {
       firstName: {
       type: 'string',
       title: 'First name',
       required: true
       },
       telephone: {
       type: 'string',
       title: 'Telephone',
       minLength: 10
       },
    },
    ui: {
    firstName: {
      'ui:autofocus': true,
      'ui:placeholder': 'Write your first name'
    },
    telephone: {
      'ui:options': {
        inputType: 'tel'
      }
    }
  }
});

Do you have some feedback for us?

If you have suggestions for improving this article,