Skip to content

Everything you need to create an Element

Before you can configure an Element, the following should be in place:

  1. A Super admin account type - only these users will be able to create, configure and manage Elements.
  2. Git repository URL and access - this is where the required configuration files and index.html files for Elements are stored. Access permissions need to be in place to download and manage the files from the repository.
  3. Knowledge of JSON configuration - the user needs to be familiar with the structure and syntax of JSON configuration files. Elements rely on a config.json file for their configuration. Understanding how to define properties, values and data types within JSON files is essential for proper customisation.
  4. Familiarity with use cases for your Elements - the user needs to understand the specific use cases and requirements for the Element. The intended forms or pages where the Element will be utilised, as well as any specific functionalities or parameters it should support, have to be identified.

Git Repository

Our current best practice is to use two repositories for each Element: one for the development source code and the other for the Element finalised code which will link to your Catalyst system.

Required files

The Element project has two required files, without which the installation will fail:

  • config.json file (defining various attributes and any parameters that need to be set)
  • index.html file (the entry point for the Element when displayed)

In addition, the config.json must be in the exact structure shown below. Again, if this is not correct, the installation will fail.

Key config fields

  • Version needs to be a string. It doesn’t necessarily need to be numbers; it could be names.
  • Logo will be a URL to a hosted logo.
  • Publisher would be your company/third party company name as the author of the Element. It is shown in one of the default columns in the Elements list.
  • Publisher URL – the URL here is used to link from the Publisher in the list to the given web address.

  • Parameters – the first 3 shown are required. They are used in the Element configuration when used on a form.

If the parameter_type is enum, you will also need to use parameter_options to define the list of options which will present as a drop-down. An example is shown in the code below:

Screenshot 2023-09-11 at 16.31.25.png

Note: parameter_limit is not currently being used.

As we are using React, the index.html file (shown below) is used to import the script from the assets file.

The Assets folder contains:

  • the minified javascript code built from react
  • the css
  • the image for the loader

Creating an Element in Catalyst

In the main navigation menu, go to Administration / Elements and click the +Create button.

You must give your Element a unique name. You can add a description if you wish.

1706m.png

The fields in the Package Management section require you to get information from your repository.

Git repository URL

(Note: we are showing Gitlab)

Open the Clone menu and click the Copy URL against the “Clone with HTTPS” option. Paste this into the field.

Git repository username and Git repository token

Go to Settings / Access Tokens. Here you will be able to create the access token.

Required scopes

The main thing to remember is to select these two required scopes:

  • read_api
  • read_repository

Having created the Access Token, you will need to immediately copy it to the Git repository token field in Catalyst because, for security reasons, it will not remain on your page once you click away from it.

Usually, a newly created Access Token will expire after 4 weeks. Therefore, add it as soon after creation as you can so that you have plenty of time to import and test your Element. If the access token has expired, the installation will fail. If it is in keeping with your IT policy, it is a good idea to choose (and log for reference) an expiry date for the access token which is much further into the future.

The “Token name” should be copied to the Git repository username field.

Finally, select the system areas where you want the Element to be available for use, Enable it in the top right and click Import. This will enable the Save button. Your new Element will be added to the list of Elements.

Useful info

For more information about creating access tokens, please use these links for some of the better known repositories: