UI plug-ins

Using plug-ins, you can integrate PortaBilling with external systems and manage all of the data via the PortaBilling web interface.

The UI Plug-ins tab allows you to add plug-ins only once and automatically have them installed on all web servers. Upon adding new web servers, the plug-ins are automatically installed there. They are preserved after a system update to a new release as well. Refer to the Integrating external systems with UI plug-ins documentation for more details.

To configure the plug-in, make sure to prepare:

1. The ZIP archive with the following files:
   • The index.html file that describes the plug-in structure.
   • The main.css file that describes the visual appearance of the plug-in.
   • The main.js file that describes the logic and behavior of the plug-in.

     

2. the JSON file with the following fields:
   • route – specify the ID of a panel on the web interface where the plug-in is installed and shown, e.g., "route":"/customer/:id/general_info" means the new plug-in is available from the Customer > General info panel.
     You can add a panel only if there are existing panels at the same level under a specific entity, such as a customer or reseller. For example, you can add a subpanel to the Customer > General panel, as it already contains other subpanels, such as Address info, Web self-care, Life cycle panels, etc.
   • routerLink – specify the link that is used as the URL of the panel with the plug-in.
   • linkLabel – specify the name of the panel with the plug-in that is visible to the end users.

Optionally, you can also specify:

• • panelSize – the size of the panel where the plug-in is displayed. If you want to have a panel that is of a standard width, use “1”. You can also set other values to adjust the size. For example, setting it to “2” will make the panel twice as wide as the standard size.
  • data – any data that is shown in the panel with the plug-in.

    

1. Log in to the Configuration Server web interface, open the Update tab, and the system will display additional tabs.
2. Go to the UI Plug-in tab.
   1. Click Upload Plug-in on the toolbar.
   2. Specify the plug-in name in the Plug-in Name field, e.g., Contracts.
   3. Specify the JSON string of the already prepared file in the Configuration string field.
   4. Select the prepared file in the .ZIP format from the list, e.g., contracts_plug-in.
   5. Click Upload Plug-in.

      

3. Go to the Configurations tab and clone the currently active configuration.
4. From the Configuration Tree, click on the ClusterSuite > Web Cluster node.
   1. On the Groups panel, select the UI group and in the UI.Plugins option, select the created plug-in in step 1.

      

   2. Select the WebCustom group and in the WebCustom.Option field specify the options required by PortaBilling to communicate with an external system:
      1. [ExternalApps]Extras=<application_name> – defines the application name, sets the name instead of <application_name>, e.g., contracts.
      2. [<application_name>]ServerUrl=<server_URL> – defines the endpoint where PortaBilling sends POST requests, sets the server address instead of <server_URL>, e.g.,https://mybilling.com.

         

         Additionally, if this application requires user authentication by login and password, specify the []Login= and []Password= options.

         To establish an API session with the external system, PortaBilling sends the data in the following format:

         "auth_info": "{"login":"{{Login}}","password":"{{Password}}"}"

5. Click Save. Then click Verify.
6. Click Check/Apply to apply this configuration.