Skip to main content
DevOps Image

This post is from the XebiaLabs blog and has not been updated since the original publish date.

Last Updated Jan 23, 2020 — DevOps Expert

Tutorial: Custom Tile Creation


Brian Foster, Sales Engineer and Rick Broker, Solutions Architect, XebiaLabs recently guided our customers through the process of custom tile creation in XL Release. This post will show you the benefits of creating custom tiles and a little how-to. If XL Release is not yet a part of your software delivery process, learn more here.

Custom tiles benefit your release process in many ways including:

  • Boosting the power of data presented to users in the dashboards
  • Gaining deeper insight into bottle necks based on the tools you are using
  • Creating team efficiencies and raising the visibility of releases throughout the company
  • Quickly identifying issues to tackle across the organization
  • Organizing management reporting in a better way
  • Sharing operational data quickly and easily via graphs without needing to dig through log files

Let's get started with creating custom tiles!

Part 1: Basic overview and getting project ready

How custom tiles get rendered in XL Release

  1. Open a release
  2. In the “Show” dropdown
  3. Select “Release dashboard”
  4. Click “Configure dashboard”
  5. Click “Add tiles”
  6. A list of available tiles you can add to the dashboard will appear for you to select. In the “Search” field, type in the name of the tile you want to add.
  7. Click the “Add” button to add the tile to the dashboard

Structure for resources folder

  • XL Release plugins should have a file structure similar to that on the right.
  • The plugin folder name stores your python files.
  • The key for custom tile creation is having a “web” folder. If the plugin you are working with does not have this folder, simply create one to store your html files.

Part 2: Core development cycle


This is the command center for your plugin. It defines the synthetic types in the XebiaLabs platform (tiles, tasks, triggers, etc.) For a new tile, you need to define the tile model like this:

Please note: xlrelease.Tile, github.UserTile, user-summary.html, and scope

Postman – identify your data

Postman is a great tool to use when starting your development and accessing the API rest endpoints you want to display in your tiles. Here is the JSON response for the user API from Github. We will leverage these variables in our python logic.

Now we create a python script that retrieves and organizes the JSON data we want to present. A few things to note:

  • Call to
  • We set the response data attribute with our JSON data
  • We are using jython, so you can leverage JAVA classes when needed ( –Githubplugin)

  • Methods here make connections, instantiate a client, get data, make request calls, use open source API’s, etc...
  • For this plugin, we are using the PyGithub API (Gitlab plugin)

Here is an example of a request call in the Gitlab plugin. This is another way to can access API rest endpoints. Notice how the response object data was converted to a JSON string and returned.

user-summary.html –(Githubplugin)

Now we build out the html file we want to use to display the JSON data in XL Release queryTileDatato get our response. Leverage the JSON object from the data variable in the response. You can access the response.dataobject via Javascript. You can use devtools in Chrome, for example, to see the response data object.

Part 3: Testing and third-party libraries

gitlab-echarts.js –(Gitlab plugin)

Use third party tools like echarts to create graphical charts in your tiles.

Again, access the data via the response data variable.

Gitlab plugin

When displayed in XL Release, charts can take any form such as pie charts, line charts, tables, etc...Build what best suits your organization!

Gradle –build.gradle

When you are ready to test your changes and render the code in XL Release, use Gradle to fire up a Docker image. Each plugin should have a build.gradle file. Make sure the xlDocker entries are in your build.gradle file. Your build.gradle file will also contain other dependencies your code needs like jython, PyGithub, license, etc.

Gradle – Let's test

When ready, you can run ./gradlew runDocker at a unix command line or within your IDE to start up a local instance of XL Release. Be sure you have Docker installed and running on your machine. Other helpful Gradle commands are −./gradlewclean, ./gradlewbuild

Learn More


More from the Blog

View more
Sep 13, 2021

The Expedited Journey of Digital Transformation

Alan Brown, Digital Transformation Advisor at conducts a se ...
Read More
Aug 23, 2021

Is Data Analytics Missing From Your Digital Transformation?

Nearly every major enterprise is already in the process of digital tra ...
Read More
Aug 19, 2021

Creative Ways to Automate Developer Workflows

When an organization begins an Agile or DevOps journey, the process ca ...
Read More
Aug 12, 2021

How Automation Enhances Efficiency and Delivery Speed In a DevOps Environment

When organizations make the decision to move to a DevOps environment, ...
Read More
Contact Us