Add a custom component

warning

The content on this page is outdated and will not receive updates. For the most up-to-date functionality, refer to Setting up and managing flows.

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 must match the key used in the component JS for registering with the framework using manywho.component.register. The key can match any of name or alias.

   For example, a valid key could be any of signature-pad, SignaturePad, or signature_pad, for a component that uses:

   const SignaturePad = (props) => {...};
   manywho.component.register("signature-pad", SignaturePad,[ "signaturepad", "signature_pad"])

   To learn more about registering components with the legacy runtime, see the developer documentation at Register a React component.

5. Description: Enter a description for the component.

6. Legacy Runtime options: Upload the component file(s), consisting of a JS file (.js), and optionally a CSS file (.css).

info

Expand the Legacy runtime options accordion to show the options.

• Legacy 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).

• Legacy 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).

9. 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.

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

11. 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.