Add Library with Custom Components to App Builder

This article describes how to add a library with custom components to the App Builder.

Table of contents:

  1. Add New Library with Custom Components
    1. Create a New Library
    2. Configure Git Sync
    3. Configure and Verify Asset Sync
    4. Enter Code for Custom Component Library
  2. Use Custom Components in App Builder

1. Add New Library with Custom Components

1.1. Create a New Library

Access Content > Apps > Libraries

  1. [+ New Library]
  2. Enter a Name and Internal name for the Library.
  3. [Save]

1.2. Configure Git Sync

NOTE: Alternatively, you an upload Assets from the Assets tab.

  1. Enable Sync with Git
  1. Access Git Sync tab.
  2. Git Username / Git Password: Enter your GitHub credentials.
  3. Repository URL: Enter the URL of a repository with custom component library to sync with.
  4. Optionally, configure the following parameters:
    • Repository sub Folder: Specify a subfolder path to fetch only its contents.
    • Branch: Enter the branch name you want to sync.
    • Git Tag: Enter a tag to sync with a specific version of the repository.
    • Webhook Secret: Provide a Webhook Secret.
      • NOTE: This feature allows you to automatically update App Template assets on specific events, for example, on Git push to a repository.
  5. [Save]
  6. [Synchronize Now]

1.3. Configure and Verify Asset Sync

  1. Access the Assets tab.
  2. Set Index Js File Type to "Module".
  3. [Save], this will refresh the list of assets. Verify that all library assets have been synchronised.

1.4. Enter Code for Custom Component Library

NOTE: The code that integrates the custom components into the App Builder can differ depending on the components architecture and library framework. Request the code for your custom components from [email protected].

  1. Access the Code tab.
  2. Enter the code for your custom components integration.
  3. [Save]

2. Use Custom Components in App Builder

  1. Open an existing App that uses the App Builder, or create a new one.
  2. Open the Components tab. The added custom components are displayed at the bottom of the menu.