Add Library with Custom Components to App Builder

This article describes how to add a library with custom components to the App Builder. There are two approaches of configuring and maintaining custom components:

  • Customer-developed and maintained custom components: Your organization's developers build components for use with App Builder.
  • MI-developed Custom Components: Metric Insights developers will build the specific components that meet your requirements, you only have to upload the Library to Metric Insights.

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.
    • NOTE: The Internal name must match the name of the component directory.
      • Request this name from the Metric Insights support for MI-developed custom components, or see Library Structure for customer-developed custom components.
  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.

  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.