Hi,
OOB there is no way to display Tooltip/Helptext for individual choice Value in Service Catalog Variables. But this can be certainly achieved as per the steps mentioned below with some coding:
1) Create a Variable say a Select Box with your required choices defined. For example I have created a Variable called "City" with choices as "Melbourne and Sydney" as shown below:
2) Now create a field with type as "String" similar to the name of the Variable created above for ease in any of the Custom Table or any other table suitable as per your instance design. For example I have created a field called "City(u_city)" in my Custom Table "ACL Testing(u_acl_testing)" with the Same choices defined as that in the Variable. Same has been shown below:
3) Once the field has been created and Choices has been defined in your desired Table then Navigate back to your catalog Item and create a new Variable called say Detailed Description(Don't Worry about this Variable, Once all the Configurations are done we are going to hide this Variable from all views) with Type as Multi Line Text and default Value specified as per the below script:
Script:
javascript: (function getChoiceList() {
var arr = [];
var choices = new GlideRecord('sys_choice');
choices.addQuery('name', 'u_acl_testing'); //Replace your Table Name here in place of u_acl_testing
choices.addQuery('element', 'u_city'); //Replace your backend Field Name here in place of u_city
choices.addQuery('inactive', false);
choices.orderBy('sequence');
choices.query();
while (choices.next()) {
arr.push({
label:String(choices.label),
value:String(choices.value),
hint:String(choices.hint)
});
}
return JSON.stringify(arr);
})();
So now once the above Detailed Description field is configured, if you check your Catalog Item form, it should have this Variable Detailed Description with the Choices and Hint Value present in that Variable in JSON Format as shown below:
4) Now create an On Load Catalog Client Script for that particular Catalog Item with the script as mentioned below:
Script:
function onLoad() {
var json = g_form.getValue('detail_Description'); // Multi Line Text Variable
var choiceList = JSON.parse(json);
g_form.clearOptions('city'); //Replace "city" with your Variable Name
// Add the -- None -- option if needed, or set html to ''
var html = '<option value="" selected="selected">-- None --</option>';
var c;
// generate the html for the new choice list
for (var i = 0; i < choiceList.length; i++) {
c = choiceList[i];
html += '<option value="'+c.value+'" title="'+c.hint+'">'+c.label+'</option>';
}
g_form.getControl('city').innerHTML = html; //Replace "city" with your Variable Name
document.getElementById("city").style.backgroundColor = "red"; //Replace "city" with your Variable Name
}
5) Now the final Step is to hide the Detailed Description Variable created, which can be done simply by using the Catalog UI Policy for that particular catalog Item. To Apply it on all three View Go to Advanced View of UI Policy and select Applies On Catalog View, Item and Task View.
Result:
Hope this helps.Mark the answer as correct/helpful based on impact.
Regards,
Shloke
