UI Page checkbox help

[guestee]

I have created an UI Action to Call UI Page which renders a popup shows Task CI associated with the change record and checkbox to each record . I want to get the sys_id / values whichever is checked in the popup ui page when i click on OK dialog button.

Please help

Screenshot of the popup

UI Page :-

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<j:set var = "jvar_current_task" value = "${sysparm_task}" />
<g:evaluate var="jvar_gr" object="true" jelly="true">
var inc = new GlideRecord('task_cmdb_ci_service');
inc.addQuery('task', '${jvar_current_task}');
inc.query();
inc;
</g:evaluate>
<h2>${jvar_gr.getValue('cmdb_ci_service.name')}</h2>
<h3>Please untick the CI which you dont want</h3>
<g:ui_form>
<table>
<j:while test="${jvar_gr.next()}">
<script>
var rowIndex = 0;
var cellIndex = 0;
var t1 = document.getElementByTagName("table");
var row = t1.insertRow(rowIndex);
var cell1 = row.insertCell(cellIndex);
cell1.innerHTML =
</script>
<!-- <td align="center">${jvar_gr.getValue('cmdb_ci_service')}</td> -->

<!-- <td align="center">${jvar_gr.getDisplayValue('cmdb_ci_service.name')}</td> -->

<td align="left"><g:ui_checkbox id="checkbox" name="${jvar_gr.getValue('cmdb_ci_service.name')}" value="${jvar_gr.getValue('cmdb_ci_service.name')}" onChange='printChecked(this.checked)' />${jvar_gr.getValue('cmdb_ci_service.name')}</td>
<!-- <td align="center"><input type="checkbox" name="${jvar_gr.getValue('cmdb_ci_service.name')}" value="${jvar_gr.getValue('cmdb_ci_service.name')}"/>${jvar_gr.getValue('cmdb_ci_service.name')}<br></br></td> -->
<p>
</p>
<tr>
<script>
cellIndex = 0;
rowIndex++;
var row2 = t1.insertRow(rowIndex);
</script>
</tr>
</j:while>
<div>
<tr id="dialog_buttons">
<td colspan="2" align="right">
<g:dialog_buttons_ok_cancel ok="return save()" ok_type="button" cancel_type="button" />
</td>
</tr>
</div>
</table>
<br/>
</g:ui_form>
</j:jelly>

Client Script:-

function printChecked(){
alert('1');
var items=document.getElementsByName('checkbox');
var selectedItems="";
for(var i=0; i<items.length; i++){
if(items[i].type=='checkbox' && items[i].checked==true)
selectedItems+=items[i].value+"\n";
}
alert(selectedItems);
}

[kklosterman · Accepted solution]

I modified your code to use incidents so I could test, you will need to modify the client script code to do something other than alert the sys_ids.

HTML/XML

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <g:evaluate var="jvar_gr" object="true" jelly="true">
        var test = new GlideRecord('incident');
        test.setLimit(3);
        test.query();
        test;
    </g:evaluate>
    <h3>Please untick the CI which you dont want</h3>

    <g:ui_form>
        <div class="row">
            <div class="col-md-12">
                <ul style="list-style-type: none;" id="checkedItems">
                    <j:while test="${jvar_gr.next()}">
                        <li>
                            <g:ui_checkbox name="${jvar_gr.getValue('sys_id')}" id="${jvar_gr.getValue('number')}" /> ${jvar_gr.getValue('number')}
                        </li>
                    </j:while>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="pull-right">
                    <g:dialog_buttons_ok_cancel ok="save()" ok_type="button" cancel_type="button" />
                </div>

            </div>
        </div>
    </g:ui_form>
</j:jelly>

Client Script

function save() {
	var sys_ids = [];
	$j("#checkedItems li input:checked").each(function(){
		var _sysID = $j(this).attr('id')? $j(this).attr('id').toString().toLowerCase().replace('ni.', '') : undefined;
		if (_sysID) {
			sys_ids.push(_sysID);
		}
	});
	alert(sys_ids);
}

[guestee]

Works great ... It is possible to pass these sys_id from client script to processing script. I want to get these sysid and create a record in custom table? Please suggest

[kklosterman]

You would need to create a Script Include to call via AJAX that would the create your records in the custom table.

https://docs.servicenow.com/bundle/newyork-application-development/page/script/ajax/topic/p_AJAX.htm...

Example

Script Include ( make sure to check the Client Callable checkbox on the form )

var MyCustomTableUtils = Class.create();
MyCustomTableUtils.prototype = Object.extendsObject(AbstractAjaxProcessor, {
	
	createRecords: function() {
		
		var sysIds = this.getParameter('sysparm_sysids');
		var returnIds = [];
		
		if (sysIds && sysIds != "") {
			var _sysIds = sysIds.split(',');
			_sysIds.forEach(function(id){
				var task = new GlideRecord('task');
				task.initialize();
				task.setValue('referenceField', id); // Sys ID PASSED IN
				task.setValue('short_description', 'This is a test');
				returnIds.push(task.insert());
			});
		}
		
		return returnIds.join(',');
		
	},

    type: 'MyCustomTableUtils'
});

Client Script

function save() {
    var sys_ids = [];
    $j("#checkedItems li input:checked").each(function () {
        var _sysID = $j(this).attr('id') ? $j(this).attr('id').toString().toLowerCase().replace('ni.', '') : undefined;
        if (_sysID) {
            sys_ids.push(_sysID);
        }
    });
    var ga = new GlideAjax('MyCustomTableUtils');
    ga.addParam('sysparm_name', 'createRecords');
    ga.addParam('sysparm_sysids', sys_ids);
    ga.getXMLAnswer(function(ans){
        alert(ans);
    });
}

[Erica2]

Hello,

Can someone please help! 

The above codes works really well.  However, how can we save each selected boxes information in the comments or work notes?  Don't save if it is no selected.

Please advise.

Thank you