Add a custom component

Add a custom component to your tenant to make it available in the page builder.

Overview

Custom components are added and managed on the Components page.

To open the Components page, select Components from the main left-hand menu.

On this page, you can:

• Add a new custom component to your tenant.

• Import a previously exported custom component. See Export and import custom components.

• Edit, export, and delete existing custom components.

Add a custom component

To add a custom component:

1. Open the Components page.

2. Select New Component.

3. Name: Enter a name for the new component.

4. Key: Enter the unique component registry key for the component. This value must be in lowercase.

   The key is used to automatically register the component. The component must include an export function, for example:

   const SignaturePad = (props) => {...};
   export default SignaturePad;

5. Description: Enter a description for the component.

6. Type: Select the required component from the drop-down.

   • Page component: You can add a page component directly to a page within a Flow. It represents a standalone section or piece of content, such as a form, text block, or image. You cannot use page components as column overrides.
   • Column component: You can apply a column component to a column within a page to modify how that column and its contents appear. You cannot drag column components directly onto a page; you can use them only as column overrides. You can use column components on Tables and Data grids.

7. Runtime: Upload the custom component file(s), typically consisting of a JS file (.js), and optionally a CSS file (.css).

   • Default JS: Select the Upload JS icon to upload a file into, or select an existing file from, your asset library. You can also enter a URL to a hosted custom component JS file (this can be hosted locally to help local development).

   • Default CSS: Select the Upload CSS icon to upload a file into, or select an existing file from, your asset library. You can also enter a URL to a hosted custom component CSS file (this can be hosted locally to help local development).

8. Design Time: Define how the component appears in the page builder, and which configuration options are available.

   

   • Icon: Select the icon to use for the component in the page builder.

   • Configuration Editors: Select the configuration options to make available in the page builder for the component.

   • Available Attributes: Define any attributes that can be selected and applied to the component. The attributes you add here become available for selection on the component in the page builder.

   • Preview Image: Optionally specify an image to show for the component in the page builder. Select the Upload Image icon to upload an image file into, or select an existing image file from, your asset library. You can also enter a URL to a hosted image file (this can be locally hosted).

   • Preview Component: Instead of specifying an image to show for the component in the page builder, you can have the component present as an existing component.

   • Preview: Shows how the component will be displayed in the page builder, using the preview image/component selections you have made.

   note

   If you have selected Column components as Type, then Configuration Editors, Available Attributes, Preview Image, Preview Component and Preview fields do not show up in the page builder.

9. Click Save Component to save and add the custom component into your tenant.

10. You are returned to the Components page.

    • The new custom component is shown in the table of custom components.

    • Edit the custom component by selecting either the Edit icon in the Actions column, or the link in the Name column.

    • Export the custom component by selecting the Export icon in the Actions column. See Export and import custom components.

    • Delete the custom component from the tenant by selecting the Delete icon in the Actions column.

    • The custom component becomes available to use in the page builder. See Use a custom component in a page.