Custom GlideModal

[kchorny]

I am trying to use GlideModal in a list UI action to display a window with one field. The field will have multiple options, and multiple options can be selected. The idea is that the user can select multiple values to apply to one or more configuration item records.

I've created a custom UI Page that's called from the UI action - I can get the options to display when the ui action is clicked, and the user can select multiple options.

However, now I need to take what the user selected and update records using those values. I am completely stuck on how and where to get the selected values and pass them to a script include to process them.

The code I have so far is below. Keep in mind that I have no idea how to do this, so there is probably a lot of missing/unnecessary/completely wrong stuff or stuff in the wrong places. I have been researching relentlessly and am not finding what I'm looking for.

Please help!!

UI Page: ll_glide_modal_custom

HTML:

<g:ui_form onsubmit="return invokePromptCallBack('ok');">
<table width="100%">
	<tr>
		<g:evaluate>
			var title = "${RP.getWindowProperties().get('title')}";
			title = gs.getMessage(title);
		</g:evaluate>
		<td nowrap="true"><label for="glide_list_answer">${title}</label></td>
		<td nowrap="true">
			<g:evaluate jelly="true">
				var getOptions = new GlideRecord('u_ci_modification');
				getOptions.addQuery('u_active',true);
				getOptions.orderBy('u_name');
				getOptions.query();
			</g:evaluate>
			<select style="width:350px;" id="glide_list_answer" name="glide_list_answer" multiple="multiple">
				<j:while test="${getOptions.next()}">
					<option value="${getOptions.sys_id}">${getOptions.u_name}</option>
				</j:while>
			</select>
		</td>
	</tr>
        <tr>
            <td colspan="2" align="right">
                <g:dialog_buttons_ok_cancel 
                   ok="invokePromptCallBack('ok');" 
                   ok_type="button" 
                   cancel="invokePromptCallBack('cancel')" 
                   cancel_type="button" />
            </td>
        </tr>
	
</table>
</g:ui_form>

Client script:

addLoadEvent(focusInput);

function invokePromptCallBack(type) {
    var gdw = GlideDialogWindow.get();
    if (type == 'ok')
       var f = gdw.getPreference('onPromptComplete');
    else
       var f = gdw.getPreference('onPromptCancel');
    if (typeof(f) == 'function') {
        try {
			alert('line 11');
			alert(gel('glide_list_answer').value[0]);
            f.call(gdw, gel('glide_list_answer').value);
        } catch(e) {
			alert('oops error: ' + e.message);
        }
    }
    gdw.destroy();
    return false;
}

function focusInput() {
   var e = gel('glide_list_answer');
   Field.activate(e);
   triggerEvent(e, 'focus', true);
}

List UI Action called Flag CI:

function onFlag() {
    var recList = g_list.getChecked();
    if (recList) {
        var dialog = new GlideModal('ll_glide_modal_custom', true, 400);
        dialog.setTitle('Flag CI(s)');
        //dialog.setPreference('body', "Please select the appropriate flags for all of the selected CIs");
        //dialog.setPreference('focusTrap', true);
        dialog.setPreference('onPromptComplete', doComplete);
        dialog.setPreference('onPromptCancel', doCancel);
        dialog.render();
    } else {
		alert('Please select at least one record.');		
	}
    function doComplete() {
		//var e = document.getElementById("glide_list_answer");
		//var value = e.value;
		alert('yep');
        if (value) {
            var ga = new GlideAjax('cmmcUtilAjax');
            ga.addParam('sysparm_name', 'updateCIs');
            ga.addParam('sysparm_records', recList);
			ga.addParam('sysparm_flags',value);
            ga.getXML(serverResponse);
        } else {

        }
    }
    function doCancel() {

    }
}

function serverResponse(response) {
	var answer = response.responseXML.documentElement.getAttribute('answer');
	alert(answer);
    top.gsft_main.location.reload();
}

[kchorny · Accepted solution]

After a lot more research and trial and error, I finally got this to work. In case anyone has a similar requirement, here is how I did it.

A list UI action must allow users to select multiple CI records from a list, and then 'flag' them with one or more options.

The options are stored in one custom table, and the UI action lives on another custom table where each record references a CI.

The UI action calls a GlideModal UI page that builds the window, and then populates the options from the custom table. The UI page then calls an ajax script include, which updates each CI record with the results.

UI Action: Flag CI

Client: checked

OnClick: onFlag()

function onFlag() {
    var recList = g_list.getChecked();
    if (recList) {
        var dialog = new GlideModal('ll_glide_modal_custom', true, 400);
        dialog.setTitle('Flag CI(s)');
        dialog.setPreference('recordList', recList);
        dialog.render();
    } else {
        alert('Please select at least one record.');
    }
}

UI Page:ll_glide_modal_custom

HTML:

<g:ui_form onsubmit="return invokePromptCallBack('ok');">
<table width="100%">
	<tr>
		<g:evaluate>
			var title = "${RP.getWindowProperties().get('title')}";
			title = gs.getMessage(title);
		</g:evaluate>
		<td nowrap="true"><label for="glide_list_answer">${title}</label></td>
		<td nowrap="true">
			<g:evaluate jelly="true">
				var getOptions = new GlideRecord('u_ci_modification');
				getOptions.addQuery('u_active',true);
				getOptions.orderBy('u_name');
				getOptions.query();
			</g:evaluate>
			<select style="width:350px;" id="glide_list_answer" name="glide_list_answer" multiple="true">
				<j:while test="${getOptions.next()}">
					<option value="${getOptions.sys_id}">${getOptions.u_name}</option>
				</j:while>
			</select>
		</td>
	</tr>
        <tr>
            <td colspan="2" align="right">
                <g:dialog_buttons_ok_cancel 
                   ok="invokePromptCallBack('ok');" 
                   ok_type="button" 
                   cancel="invokePromptCallBack('cancel')" 
                   cancel_type="button" />
            </td>
        </tr>
	
</table>
</g:ui_form>

 Client script:

addLoadEvent(focusInput);

function invokePromptCallBack(type) {
    var gdw = GlideDialogWindow.get();
    if (type == 'ok') {
        var recList = gdw.getPreference('recordList');
        try {
            var selections = [];
            var obj = document.getElementById('glide_list_answer').selectedOptions;
            for (var i = 0; i < obj.length; i++) {
                selections.push(obj[i].value + '');
            }
            var ga = new GlideAjax('cmmcUtilAjax');
            ga.addParam('sysparm_name', 'updateCIs');
            ga.addParam('sysparm_records', recList);
            ga.addParam('sysparm_flags', selections);
            ga.getXML(serverResponse);
        } catch (e) {
            alert('Error: ' + e.message);
        }
    }
    gdw.destroy();
    return false;
}

function focusInput() {
    var e = gel('glide_list_answer');
    Field.activate(e);
    triggerEvent(e, 'focus', true);
}

function serverResponse(response) {
    var answer = response.responseXML.documentElement.getAttribute('answer');
    alert(answer);
    top.gsft_main.location.reload();
}

Script include: cmmcUtilAjax

Client callable: checked

var cmmcUtilAjax = Class.create();
cmmcUtilAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {
	
	updateCIs: function() {	
		var recs = this.getParameter('sysparm_records'); //this is the list of cmcc records
		var opts = this.getParameter('sysparm_flags');
		recsArray = recs.split(',');
		for (var i=0;i<recsArray.length;i++) {
			var cmmc = new GlideRecord('u_mitll_cmmc');
			cmmc.get(recsArray[i].toString());
			var ci = cmmc.u_configuration_item.toString();
			var updateCI = new GlideRecord('cmdb_ci');
			updateCI.get(ci);
			updateCI.u_modify_ci_flag = opts;
			updateCI.update();
		}		
		return recsArray.length + ' CI records updated.';
	},

});