The registerComponent method

You call the registerComponent method as part of a flow for registering external components within the Component builder.

Import

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

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

Syntax

javascript

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 the Page builder. 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

javascript

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'
      }
    }
  }
});

If you have suggestions for improving this article, let us know!