Jenkins : Reactive Reference Dynamic Parameter Controls

Reactive Reference: Display custom/dynamic UI parameter controls with dynamic HTML

Reactive Choices allow you to display dynamic HTML as a build form helper (reference) parameter. This has been quite enabling, but Active Choices v1.2 further enhances this functionality by allowing you to not only display custom/dynamic HTML controls, but also use their values as build parameters.

Required HTML Formatting

The value of a dynamic HTML control will be passed to the build as a parameter as long as the HTML element includes a name="value" attribute.

Using this feature you can add new types of UI controls to job forms to collect build parameter values. Another possible use case is changing the UI control type dynamically, depending on the context (incl. referenced parameter values). Eg. from 'select' to read only text input, when there's only one option, or to a warning message (without a value of course) when there's no option available.

Example: Add an Interactive Range Control to Build Forms

Here we demonstrate how to add a new sliding range control to adjust and display the radius of a circle. The value of the control will be passed to the build as a parameter.
The resulting build form is shown below:

Configuration: CircleRadius Active Choice Reactive Reference Parameter

CircelRadius.groovy

html=
'''
<p>
  <input type="range" min="1" max="150" id="nRadius" name="value">
  <label for="nRadius" 
         style="display: inline-block; width: 240px; text-align: left">
         radius = <span id="nRadius-value">
</span>
  </label>
</p>
<hr>
'''
return html

Configuration: D3Circle Active Choice Reactive Reference Parameter

This parameter provides the required D3 java script that dynamically updates the range control label and draws a circle

The groovy script code that adds the java script functions to the build form is shown below

D3Circle.groovy

d3HTML=
'''
<!DOCTYPE html>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 500;
var height = 300;
 
var holder = d3.select("hr")
      .append("svg")
      .attr("width", width)    
      .attr("height", height); 

// draw the circle
holder.append("circle")
  .attr("cx", 300)
  .attr("cy", 150) 
  .style("fill", "none")   
  .style("stroke", "blue") 
  .attr("r", 120);

// when the input range changes update the circle 
d3.select("#nRadius").on("input", function() {
  update(+this.value);
});

// Initial starting radius of the circle 
update(120);

// update the elements
function update(nRadius) {

  // adjust the text on the range slider
  d3.select("#nRadius-value").text(nRadius);
  d3.select("#nRadius").property("value", nRadius);
  // update the circle radius
  holder.selectAll("circle") 
    .attr("r", nRadius);
}

</script>
'''
return d3HTML

When the build starts the CircleRadius is passed and can be used as a parameter to the build. Note that the D3Cirle parameter is null which is the default behavior of a Reactive Reference parameter (used to display reference information but the value is not passed to the build)

Jenkins : Reactive Reference Dynamic Parameter Controls

Reactive Reference: Display custom/dynamic UI parameter controls with dynamic HTML

Example: Add an Interactive Range Control to Build Forms

Configuration: CircleRadius Active Choice Reactive Reference Parameter

Configuration: D3Circle Active Choice Reactive Reference Parameter

Attachments: