Adding a Color Picker as a Report Parameter

In this post, we would like to show you an example of how to add a javascript color picker as a report parameter, which can be then used as any other parameter in your SQL queries. This is the basis for further scripts we are posting here soon, so stay tuned!

We create a script parameter (, since a script parameter allows you to write custom HTML and javascript.

For this purpose, download the latest jscolor javascript file from here: At the time of writing, the latest version was 2.0.5. Copy the downloaded jscolor.js file into this location: Fileserver Root/lib/jscolor/jscolor.js. Check in the ”Properties” tab the URL of this file in your installation. It should be something similar to: http://localhost:8080/reportserver/reportserver/fileServerAccess?id=2189950.

Now you can create the script which will be the basis of your script parameter. We name this script PalettePicker.groovy:

    <script type="text/javascript" src="http://localhost:8080/reportserver/reportserver/fileServerAccess?id=2189950"></script>
    <script type="text/javascript">
	var callback;

	function initParameter(param, cb){
		callback = cb;
		//alert("The current value is: " + param.defaultValue);
		document.getElementById("mycolor").value = param.defaultValue;
		document.getElementById("mycolor").style.backgroundColor = '#' + param.defaultValue;

	function setValue(value){
		//alert("Updating the value to: " + value);

    <input id="mycolor" class="jscolor" onchange="setValue(this.value);">
As you can see in the script, you install a color picker and use the default value for setting the initial value and background color of the input field. The URL mentioned previously must be adapted to your configuration:
<script type="text/javascript" src="http://localhost:8080/reportserver/reportserver/fileServerAccess?id=2189950"></script>
Finally, you can create the script parameter in your report and set the script field to point to your PalettePicker.groovy script in your parameter’s ”Specific Properties” dialog. Set your parameter’s default value to e.g.: ”FF0000” (without apostrophes). You can now use the color picker’s value in your query as:
SELECT * FROM myTable where myField = ${mycolor}

Note that your parameter’s name must be set to ”mycolor” for using this query.

This approach works for virtually all javascript libraries. Script arguments are a powerful tool for extending ReportServer parameters to user-defined functionality.

Many thanks to Karolina Boboli for sending us this and allowing us to publish the script.

ReportServer needs your support

Dear ReportServer users,

the ReportServer team in InfoFabrik GmbH needs your support!
We would like to invite you to participate in The BI Survey 19, the world’s largest annual survey of business intelligence (BI) users.

BARC’s annual survey gathers input from thousands of organizations to analyze their buying decisions, implementation cycles and the benefits they achieve from using BI software.

As a participant, you will:

  • Receive a summary of the survey results when they are published
  • Be entered into a draw to win one of ten $50 Amazon vouchers
  • Ensure that your experiences are included in the final analyses

The BI Survey 19 should take about 15 minutes to complete and is for us and the ReportServer Community a great opportunity to increase the visibility of ReportServer. As a result, we will be able to incorporate your experiences and needs into the ReportServer development in a more significant manner in a near future.

The survey is available in the following link:

Thank you in advance for your participation!

Your ReportServer Team