Custom Plug-in Structure
This topic describes how to use plug-in components.
- index.html: Contains the plug-in html code.
- main.js: Contains the plug-in JavaScript code.
- manifest.json: Contains the plug-in configuration details.
- style.css: Contains the plug-in stylesheet details.
- The scripts folder: Contains external scripts.
Get started with the sample templates to build your own plug-in.
Template Type | How to Use |
---|---|
Download the sample template for simple plug-in Includes examples using data source. |
Use this template to build a simple plug-in.
|
Download the sample template for advanced plug-in
Important: Do not import the sample template file as a
plug-in. Follow the instructions on how to use the downloaded template
to build a plug-in, which can be imported to Operations
Hub. |
Use this template to build an advanced plug-in.
|
The index.html file
JavaScript Dependencies
The easiest way to add external JavaScript dependencies is to place them in the
scripts folder (in the root folder) and reference this dependency in the
manifest.json
file.
The manifest.json file
Every plug-in must contain a manifest.json
file in the root folder
of the plug-in. This file provides the essential information about the plug-in to
Operations Hub.
manifest.json
file.Parameter | Description |
---|---|
typeName [String] |
The unique name of the plug-in. Does not support special characters. For example, comma, period, ampersand, dollar sign, percent sign, parenthesis, asterisk, etc. |
pluginId [String] |
The unique ID of the plug-in. The value for this parameter must be a long, random one. |
Type [String] |
The type of the plug-in. |
category [String] |
The category of the plug-in. |
description [String] |
The description of the plug-in. This value appears in Operations Hub when you design an application to include the plug-in. |
info |
The following information about the plug-in:
|
scripts [Array] |
The array for the scripts that you want to use in the plug-in. |
customIcon [String] |
The icon that will appear next to the name of the plug-in in Operations Hub when designing an application to include the plug-in. |
origin [String] |
The origin of the plug-in. Provide the value custom for this parameter. |
placeholder [String] |
A placeholder for the plug-in, which will appear in Operations Hub when designing an application to include the plug-in. |
preview [String] |
The picture preview of the plug-in that will appear in Operations Hub when designing an application to include the plug-in. |
fieldsDescription [Object] |
The plug-in description for informational messages. |
isNotAllowToAddFields [Boolean] |
Indicates whether to allow the user to add more data fields when designing an application to include the plug-in. If you do not want the user to add data fields, enter true. |
schema{} |
An array of the following types of schema:
|
Schema
manifest.json
file to
specify the plug-in input and output.- Input: The input for a plug-in can be static or dynamic. Static data is
available in any of the following JSON schema types:
- string
- number
- integer
- boolean
- null
- object
- array
- Output: The output of a plug-in is defined in the Operations Hub target, such as a query with inputs or a global variable.
manifest.json
is presented in Operations Hub in the html format. This
format is implemented using the react-jsonschema-form
library,
which introduces the concept of UI schema to provide the information about the form
behavior and to give an extensive API for the form customization. Customization is
typically done using custom fields and widgets that become part of the default form
registry. The library renders all form fields leveraging the Bootstrap semantics, so
that it can be styled with bootstrap themes or custom CSS.Supported Widgets
Field Type | Supported Widgets |
---|---|
Boolean |
|
String |
|
Number |
|