Disclaimer: Not compatible with Helsinki.
For anyone migrating their Service Catalog from CMS to Service Portal, you quickly realize the limitations when dealing with variable sets. While you can show and hide variables, this task seems futile when attempting to use variable sets since you cannot hide the set as whole, nor can you hide the variable set title. Until now.
There are a few solutions and thoughts about this topic floating around, but none that quite seem simple enough. While the solution I propose could be created with a UI Script, there are script library limitations that will not permit all the functions I've used. I also realize there are possibly Script Include solutions, however, once again, there are script library limitations. I needed a medium that could mitigate all script limitations, be accessible when I required, but not get in the way of SNOW or interrupt the framework.
I chose to leverage Service Portal widgets. Editing a widget I quickly realized I effectively had a conduit between client-side and server-side scripting that could be readily accessed from catalog item client scripts. Below I will outline my strategy and then provide you a link to the update set that will allow you to decide for yourself if this is a viable solution.
How to install & use
Simply install the update set provided, go to your desired catalog item and add the SC_Functions variable set to your catalog item. Don't worry, I've made the order number something ridiculous so that it should always be the last one listed. Once you install the variable set you will have full access to the following helper functions:
1. forceField() - used to manipulate variables on a large scale (display, mandatory, clear....)
2. guardian() - used to manipulate variable sets, the submit button group, DOM classes, DOM IDs...yes you can do ANYTHING with this function set.
Notes:
1. You MUST initialize the function sets at the top of your client script. You can use whatever variable (JavaScript variable) naming convention. I like Marvel comics, so you're stuck with that in my examples.
2. You CAN use these functions in all your other variable sets, but you MUST have SC_Functions loaded to your catalog item for this to work. There is an alternative, but for the sake of confusion I won't go there now.
Exmaple 1: Hiding/Showing Variable Sets (SP view only...not CMS)
Client Script: onLoad
UI Type: All
View: Applies on a Catalog Item view (only this checkbox)
function onLoad() {
//Initiate helper functions
//guardian() is the function set. guardian() has a number of additional methods, below are just the hide/show variable set methods
var marvel = new guardian();
//Hide Variable Sets starting with the 1st one in your variable set related list in your catalog item. This will hide every single variable set and it's fields starting at 1. There is no '0' for some of you super geeky types. It may be helpful to make notes in your code to reduce confusion. You simply start at the top of your list and count up from '1'.
marvel.hideVsetAll(1); //Starting from RequestedFor variable set
//Show Variable Set Titles.
marvel.showVsetAll(1);
//Hide Individual Variable Sets...only one
marvel.hideVset(2);
marvel.hideVsetAll(4);
//Show Individual Variable Sets...only one
marvel.showVset(7);
}
You can use these in any strategy you choose within your scripting logic. I use these in onChange, onLoad...within IF statements...whatever you desire. Sometimes I'll hide everything and then reveal specific variable sets.
So what's the catch? The only catch is that while guardian() will show/hide your variable set, it will not (currently) set the variables to mandatory = false or true. Allow me to introduce forceField();
forceField() was born out of my desire to avoid pain. I was in the middle of creating a catalog item with more than 250 variables and two things occurred to me. One, I really hate writing 3 lines of code for one variable when I wish to perform a hide, mandatory = false, and value clear. That action alone is 750 lines of code. That's a lot of copying and pasting! The second realization, is that traditionally, this type of coding style becomes very difficult to maintain. Try sifting through 10 nested IF statements and 250 variables...not cool.
Here is how forceField() works.
Exmaple 2: Hiding/Showing Variable Sets (forceField works in SP and CMS. In CMS I use it for Request, RITM, and Task views)
Client Script: onLoad
UI Type: All
View: Applies on a Catalog Item view (only this checkbox)
function onLoad() {
//Initiate helper functions
//forceField() is the function set. forceField() has a number of additional methods, below are just the hide/show methods
var hero = new forceField();
//Hide form fields. This function actually hides, clears, and sets mandatory to false for all listed variable names in the array.
var hiddenfields1 = new Array('system_owner_n','sys_owner_id_n','sys_owner_title_n','sys_owner_email_n','sys_owner_phone_n','password_info','acct_recert','add_unix','add_win','app_code','app_name','des_access','id_system','id_system_database','id_system_datastage','id_system_ldap','id_system_Mainframe','id_system_unix','id_system_windows','id_type','non_prod_env','num_id','omv','pass_req','projcl','projcl_syscodes','req_pass';
hero.hide(hiddenfields1);
//Show form fields. This function only shows all listed variable names in the array.
var show1 = new Array('app_name','des_access','id_system','id_system_database','id_system_datastage');
hero.show(show1);
//Show & Mandatory. This function shows all listed variable names in the array and sets mandatory to true.
var show1 = new Array('system_owner_n','sys_owner_id_n');
hero.showMan(show1);
//Show & Mandatory. This function shows all listed variable names in the array and sets mandatory to true.
var clear1 = new Array('system_owner_n','sys_owner_id_n');
hero.clear(show1);
//Hide form fields that have no value or were not filled out by the user. This function allows you to show only those fields that were actually filled out. The variables listed in the array are the only fields that will be affected. So you can put all your fields in this array, or only a few...you're choice. This allows fulfillment to focus on fields they actually need to action.
var hiddenfields2 = new Array('system_owner_n','sys_owner_id_n','sys_owner_title_n','sys_owner_email_n','sys_owner_phone_n','password_info','acct_recert','add_unix','add_win','app_code','app_name','des_access','id_system','id_system_database','id_system_datastage','id_system_ldap','id_system_Mainframe','id_system_unix','id_system_windows','id_type','non_prod_env','num_id','omv','pass_req','projcl','projcl_syscodes','req_pass';
hero.full(hiddenfields2);
}
Here is the comprehensive list of functions available:
You can get the update set and PDF file here (MIT lic.): SC Helper Functions
HTML in Field Message (new as of 19 September 2017):
function onLoad() {
//Initiate helper functions
var marvel = new guardian();
//Simply call the fieldMessagesToHtml method without parameters and it will allow HTML in all field messages. If you choose not to use HTML nothing will be changed for that field message.
marvel.fieldMessagesToHtml();
g_form.showFieldMsg('name','<a target="_blank" href="https://google.com"><b>Hello</b></a><br><br><li>this one</li><li>dlakjdf</li>','info');
g_form.showFieldMsg('name2','<h3>test</h3>','error');
}
Jakarta Update (new as of 9 October 2017):
All the functions still work the way they are outlined in the help pdf, however now you can simply use forceField() to show or hide a variable set by using the name of the variable set.
function onLoad() {
//Initiate helper functions
var marvel = new forceField();
//hide variable sets
var hideVset = new Array('variable set1','Requested For Set');
marvel.hide(hideVset);
//show variable sets
var showVset = new Array('variable set1','Requested For Set');
marvel.hide(showVset);
}
Of course you can mix variables and variable sets together in the same array and simply separate them with a comments line.
Additional considerations. Functions can be customized, extended or otherwise adjusted to fit your specific needs.
I hope this proves to be useful. If you have questions please feel free to ask.
Thank you for your time.
