How to extend the XL Release UI to add other Menu Items or Custom Screen

Follow

Shashank Srivastava -

Scenario

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

Environment

XL Release

Steps to Perform

1. Basic plugin structure.

Your plugin must have a web directory which points to the HTML file which draws your interface. It must also have an include directory which contains definition of the Angular module. More on it is mentioned in step #2. 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 simple 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.

Xl Release depends on 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"/> 

So, we need to create an Angular.js module which needs to be put inside 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 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 xl-ui-plugin.xml file.

3. Package the plugin as 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.) & issue below command, it will create a jar file with the name xl-ui-plugin.jar.

jar -cvf xl-ui-plugin.jar *

4. Put this plugin in XLR_HOME/plugins directory.

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

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

UI_Menu_Item.png

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

UI_message.png

Sample plugin.

For demonstration, you may use the attached plugin. All required files are packaged inside it.

Additional Information

Refer to original XebiaLabs documentation for more information.

Tags

xl-release, how-to, UI, extend

Have more questions? Submit a request
Powered by Zendesk