How to create fields automatically on UI page

[Nihad]

How to create fields automatically on UI page

[SwarnadeepNandy]

Hello @Nihad,

To create fields automatically on a UI page in ServiceNow, you need to have some knowledge of HTML, Jelly, and JavaScript. Jelly is a scripting language that allows you to dynamically generate XML or HTML content. You can use Jelly tags and variables to define the layout and logic of your UI page. You can also use client-side or server-side scripts to handle user interactions and data processing.

There are different ways to create fields automatically on a UI page, depending on your requirements and preferences. Here are some possible methods:

• Use a UI Macro to define a reusable field that can be inserted into any UI page. A UI Macro is a script that generates HTML or Jelly code. You can create a UI Macro with parameters that allow you to customize the field’s appearance and behavior. For example, you can create a UI Macro that generates a text field with a label, a placeholder, and a validation function. You can then use the <g:insert macro=“”/> tag to insert the UI Macro into your UI page and pass the parameters as attributes. You can find more details on how to create and use UI Macros in this documentation.

<g:insert macro=“text_field” name=“name” label=“Name” placeholder=“Enter your name” validate=“true”/>​

• Use a GlideForm API to manipulate the fields on an existing form. A GlideForm is an object that represents a form on a UI page. You can use the GlideForm API to access and modify the fields on the form, such as adding, removing, hiding, showing, enabling, disabling, or setting values. For example, you can use the g_form.addField() method to add a new field to the form dynamically. You can find more details on how to use the GlideForm API in this documentation.

var g_form = GlideForm.get(‘my_form’); 
// get the form object 
g_form.addField(‘text’, ‘name’, ‘Name’); 
// add a text field called name with label Name 
g_form.setMandatory(‘name’, true); 
// make the name field mandatory 
g_form.setValue(‘name’, ‘John Doe’); 
// set the default value of the name field to John Doe​

• Use a Script Include to define a reusable script that can be called from any UI page. A Script Include is a server-side script that contains functions or classes that can be invoked from other scripts. You can create a Script Include that contains a function that creates fields automatically based on some input parameters. For example, you can create a Script Include that takes an array of field names and types as input and returns an HTML string that contains the corresponding fields. You can then use the GlideAjax API to call the Script Include from your UI page and append the HTML string to your page element.

var ga = new GlideAjax(‘FieldGenerator’); 
// create a GlideAjax object with the name of the Script Include 

ga.addParam(‘sysparm_name’, ‘getFields’); 
// add the name of the function to call in the Script Include 

ga.addParam(‘sysparm_fields’, JSON.stringify([‘name’, ‘email’, ‘phone’])); 
// add the input parameter as a JSON string 

ga.getXMLAnswer(function(answer) { 
// get the answer from the Script Include as HTML string 

var container = document.getElementById(‘container’); 
// get the container element where you want to append the fields 

container.innerHTML += answer; 
// append the HTML string to the container element }); ​

I hope this helps you

Kind Regards,

Swarnadeep Nandy

[Nihad]

Thank you so much

[prashantkulkarn]

Thank you .. This is such a great starting point where you have explained so well !