How to: Extend the Digital.ai Release UI to add other Menu Items or Custom Screens

Dan Robichau

October 29, 2020 15:04

Scenario

Sometimes you might feel the need to extend your Digital.ai Release UI so that you may have your own Menus or Menu Items &/or a separate screen.

Environment

Digital.ai Release

Steps to Follow

1. Basic plugin structure

Your plugin must have a web directory that points to the HTML file which draws your interface. It must also have an include directory that contains the definition of the Angular module. (See step 2 for more detail on Angular.) For more information about the files, refer to the Sample plugin section below.

Apart from it, there are 2 optional files.

xl-rest-endpoints.xml for adding new REST endpoints &
xl-ui-plugin.xml for adding new top-menu items

Below is the sample directory structure

shashank-mbp:xl-ui-plugin admin$ tree
.
├── META-INF
│   └── MANIFEST.MF
├── synthetic.xml
├── web
│   ├── include
│   │   └── app.js
│   └── shashank
│       └── index.html
├── xl-rest-endpoints.xml
└── xl-ui-plugin.xml

 4 directories, 6 files

2. Define Angular module

Digital.ai Release depends on the Angular.js module to load the library. This library is defined in xl-ui-plugin.xml file.

You can see the definition below.

<library name="xlrelease.releasesListPage"/>

We need to create an Angular.js module which needs to be put inside the web/include directory in a file called app.js.

For this, create a file called app.js (You may rename it to anything if you want. Only the extension is important.)
Below is the content.

const xlrintegrated = angular.module('xlrelease.releasesListPage', []);

You can see that this Angular module refers to the library which was defined to be loaded in the xl-ui-plugin.xml file.

3. Package the plugin as a Java Archive

Now that we have our directory structure ready, we will now need to package the contents as a .jar file.

If you create a directory called xl-ui-plugin (This directory contains contents of your plugin. Refer to the directory structure explained in step 1.) and issue the command below which will create a jar file with the name xl-ui-plugin.jar.

jar -cvf xl-ui-plugin.jar *

4. Put this plugin in the XLR_HOME/plugins directory

Now place this plugin inside your XLR_HOME/plugins directory & restart Digital.ai Release.

You will notice that a new menu item has been added to the Digital.ai Release Menu bar.

If you click on the child menu Release List, it will load the interface defined by your HTML file.