JS document.getElementById function in the script of catalog form

Products

• CA Service Catalog
• CA Service Management - Asset Portfolio Management
• CA Service Management - Service Desk Manager

Issue/Introduction

document.getElementById() call  no longer work  in the form's  JS script code  on different catalog systems 

Environment

Service Catalog 14.1 , Service Catalog 17.1 

Cause

Some users wrote the javascript code used by their catalog form  by using JavaScript function  document.getElementById(0 .   In document.getElementById() call ,  sometimes  they use the HTML id of the element there to refer to the component  (  such as    text field ,  select dropdown field , etc )  in a catalog form .

for example  , the following js code : 

projectset:function(){ 
console.log('inproject'); 
if (_.request.status >= 200){ 
IntakeName = ca_fdGetTextFieldValue('ItIntakeReq','intakename1'); 
console.log('intakeName: '+IntakeName); 
document.getElementById("x-auto-10-input").value= IntakeName; 
console.log('after document.get'); 
} 
},

"x-auto-10-input" used here can be different if the form is changed ( for example , more fields are added into it ) or it is exported and imported on different catalog system . 



 

Resolution

it is not recommended to use js function document.getElementById() to manipulate the components ( such as   text field , select field , etc ) in catalog form unless you absolutely have to . It is recommended to use OOTB catalog's js functions to achieve the same thing as possible as you can .

In catalog GUI, Administration -> Tolls -> Links -> Form Designer JavaScript API , it lists all those available OOTB catalog's js functions that you can use in your JS code in a form  to get or set the value of catalog form's components .  . document.getElementById() is less than ideal as the html id of the field (i.e. x-auto-<number>-input,   more specifically the number in it here ) can change if the field is moved or other fields are added or service along with the form imported into another system , and you will need to change the id in js code .