How to add a checkbox field beside a table form field?

[subhadeep1618]

Hello Everyone, 

I need to add a checkbox beside a table's form field (e.g. Incident form), as shown in the below screenshot.

The value of this checkbox (true/false) needs to be captured as current variable.

That is, if the checkbox field's name is u_select_all - then, current.u_select_all should read the value.

What is the easiest way of doing this? Please help.

[Danish Bhairag2]

Hi @subhadeep1618 ,

What is the requirement over here for creating the select all field?

Thanks,

Danish

[subhadeep1618]

Hi @Danish Bhairag2 ,

My service offering field has a operational status = operational reference qualifier. When user checks the 'select all' box, then all offerings will be listed.

I have already implemented this - and this is perfectly working for me.

Only thing that I need is to show the checkbox beside the service offering field, not above it.

Refer below screenshot.

[Danish Bhairag2]

Hi @subhadeep1618 ,

I don't think OOTB there is any way,may be u can try UI macro in order to achieve this. It might help.

I am not good at jelly scripting though 😅.

Thanks,

Danish

[subhadeep1618 · Accepted solution]

Hello Everyone, 

I have implemented this solution by myself, with little help from around the community.

So, for everyone's help, I am just posting here what I have done.

At the end of the day, this was not that difficult, once you know little bit of HTML and plain-old JavaScript.

The solution is given below:

1st Step - develop a UI Macro:

Give a name to this macro, e.g. 

service_offering_select_all

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<div style="padding: 5px;" 
title="Click here to list all service offerings">

<input type="checkbox" id="u_select_all" name="u_select_all" 
style="margin-right: 5px;width: 15px; height: 15px;" 
onclick="listAll(this.checked);"/>

<label style="vertical-align: 2.5px; font-style: italic;">List All</label>
</div>
<script>
function listAll(flag){
	if(flag == true)
		g_form.setValue('u_select_all', true);  // explained in Step-3
	else
		g_form.setValue('u_select_all', false); // explained in Step-3
}
</script>
</j:jelly>

What the above macro does is basically create a HTML checkbox and a JavaScript function, that will be called when user checks/unchecks the checkbox.

2nd Step - Hook up the UI Macro with the Form field (server-side table)

For doing this, right-click on the field and go to Configure Dictionary.

Then in Attributes, simply add this:

ref_contributions=service_offering_select_all

Screenshot is also given here.

Whatever you are writing after ref_contributions is basically the name of the UI macro defined above.

3rd Step - Create a True/False field in the Form (table column) and keep it hidden and read-only

Simply create a new field, name that I've given - u_select_all (DB column name).

Through a UI Policy defined on this table, just make this field Read-only and Hidden.

How the above steps come together?

Now, the checkbox in the UI macro is purely client-side.

But I want to capture what user is doing in this checkbox within the form and then pass it on to my server-side script. So, how to do that? Very simple, as explained below.

Go back to the UI macro JavaScript function, and see the 2 lines I've commented with 'explained in Step-3'

• When user checks the macro's checkbox, the u_select_all value is set to True;
• When user unchecks the macro's checkbox, the u_select_all value is set to False.

This true/false value of the form's or table's field can now be used very easily in a server-side script by simply passing it as an argument/parameter to a script include code.

Hope this will be helpful for all of you.

For more variations and advanced level UI Macro knowledge, please view the below documentation page:

https://docs.servicenow.com/bundle/utah-api-reference/page/script/general-scripting/reference/r_Jell...

You can also refer to the below page for some quick insights in jelly scripting.

https://gist.github.com/nguyen0096/4d7f239689be0aac559c75b73acfdcb2

Keep sharing; knowledge grows when you share it !!!