I've searched high and low on these forums and the internet and haven't found a way to create a radio button list (multiple choice) with images next to the radios. I just spend the past hour making this, and wanted to share my solution with the world. My situation was to provide a selection of desk phones for the end-user to select.
The whole process involves 2 variables, a UI page and uploading your images. Pretty simple.
- Upload all of your images
- save yourself some time and bulk upload them: Storing Images in the Database - ServiceNow Wiki
- Create a UI page
- Create variable for UI page
- Create variable to store the actual selected value
The UI page contains your radio button list and the images. It's straight forward and looks great! Unfortunately, the selections in this UI page don't get saved with the catalog item when ordered, so you have to create a second variable that stores the value. This was a single line of text.
UI Page consists of HTML for the radio list, and some script that detects the value selected and fills in the text box for the value
HTML
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<form name="phone_choice">
<img src="comm_accy_Avaya4621.jpg" /><input type="radio" name="phone_model" value="Avaya 4621">Avaya 4621</input>
<img src="comm_accy_Cisco7911.jpg" /><input type="radio" name="phone_model" value="Cisco 7911">Cisco 7911</input>
<img src="comm_accy_Cisco7940.jpg" /><input type="radio" name="phone_model" value="Cisco 7940">Cisco 7940</input>
<img src="comm_accy_Cisco7942.jpg" /><input type="radio" name="phone_model" value="Cisco 7942">Cisco 7942</input>
<img src="comm_accy_Cisco7945.jpg" /><input type="radio" name="phone_model" value="Cisco 7945">Cisco 7945</input>
<img src="comm_accy_Cisco7960.jpg" /><input type="radio" name="phone_model" value="Cisco 7960">Cisco 7960</input>
<img src="comm_accy_Cisco7962.jpg" /><input type="radio" name="phone_model" value="Cisco 7962">Cisco 7962</input>
<img src="comm_accy_Cisco8941.jpg" /><input type="radio" name="phone_model" value="Cisco 8941">Cisco 8941</input>
<img src="comm_accy_Cisco8945.jpg" /><input type="radio" name="phone_model" value="Cisco 8945">Cisco 8945</input>
<img src="comm_accy_Cisco9951.jpg" /><input type="radio" name="phone_model" value="Cisco 9951">Cisco 9951</input>
<img src="comm_accy_Cisco9971.jpg" /><input type="radio" name="phone_model" value="Cisco 9971">Cisco 9971</input>
<img src="comm_accy_Nortel2616.jpg" /><input type="radio" name="phone_model" value="Nortel 2616">Nortel 2616</input>
</form>
</j:jelly>
Client Script
var rad = document.phone_choice.phone_model;
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = function() {
g_form.setValue("model", this.value);
};
}
What is this doing? Well, you have a form named phone_choice and a radio list of phone models. They all have the name phone_model to tie them into the same radio list.
The javascript looks in the webpage (document) at the form named phone_choice and the radio buttons named phone_model. When one gets clicked, it sets a Catalog Item variable named model (this is the name of the single line of text variable added) to the value of the radio button clicked.
Here is the final result
You can add some UI policies to hide the single line text box (stored value) on item order screen, but show that and hide the UI page on the task or RITM page. Up to you!
