Jenkins - HTML Views (Jelly/Groovy)

About

Jenkins uses Jelly as the view technology. Jelly is a tool for turning XML into executable code. So Jelly is a Java and XML based scripting and processing engine.

This views are used to render HTML pages about each object.

Articles Related

Sample

Install the UI Samples Plugin. Demonstration of UI controls available in Jenkins based on Stapler, Jelly, Groovy, etc.

File Structure

Jelly files (view) are tied directly to classes.

Views are methods that work against a particular class and are then organized according to classes that they belong to, just like methods are organized according to classes that they belong to.

Syntax

Jelly views can call methods on those classes.

To reference the file they are tied to, jelly files use the it keyword. To define code, use the dollar sign and curly-braces, as so “insert code here”.

Depending on the page being rendered, other objects besides it may be predefined:

app - the instance of Jenkins (or Hudson)
instance - an object currently being configured, within a section of a configure page such as a BuildStep; null if this is a newly added instance rather than reconfiguring
descriptor - the Descriptor plugin object
h - an instance of hudson.Functions, with various useful functions

Predefined URLs: Pages can use the following variables to create absolute links:

rootURL - the Jenkins instance
resURL - static webapp resources such as JavaScript or HTML (cf. Jenkins.RESOURCE_PATH)
imagesURL - like resURL but with /images appended, for loading icons and the like

Tag libraries

Jenkins uses a set of tag libraries to provide uniformity in forms.

To determine where this tag is defined, first check the namespace URI, and then look under JENKINS/views/. For example,

is defined in JENKINS/views/lib/form/section.jelly.

It's also often useful to just check other similar scripts to see what tags they use. Views are always organized according to its owner class, so it should be straightforward to find them.

Support

Views: Groovy/Jelly views are re-compiled every time a browser requests a page, so just reload a page in the browser and you'll see the changes.

Example

global.jelly

<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
  <!--
    This Jelly script is used to produce the global configuration option.

    Jenkins uses a set of tag libraries to provide uniformity in forms.
    To determine where this tag is defined, first check the namespace URI,
    and then look under $JENKINS/views/. For example, <f:section> is defined
    in $JENKINS/views/lib/form/section.jelly.

    It's also often useful to just check other similar scripts to see what
    tags they use. Views are always organized according to its owner class,
    so it should be straightforward to find them.
  -->
  <f:section title="Hello World Builder">
    <f:entry title="French" field="useFrench"
      description="Check if we should say hello in French">
      <f:checkbox />
    </f:entry>
  </f:section>
</j:jelly>

Documentation / Reference