The registerComponent method

Current version: 22.x

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,