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.
|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.
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
You can see the definition below.
So, we need to create an Angular.js module which needs to be put inside web/include directory in a file called
For this, create a file called
const xlrintegrated = angular.module('xlrelease.releasesListPage', );You can see that this Angular module refers to the library which was defined to be loaded in
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
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
jar -cvf xl-ui-plugin.jar *
4. Put this plugin in
For demonstration, you may use the attached plugin. All required files are packaged inside it.
Refer to original XebiaLabs documentation for more information.
xl-release, how-to, UI, extend
Have more questions? Submit a request