On click of Cancel button,clear the form in CSM workspace

Saranya Babu1 · ‎12-22-2024

Hello All,

I have created onchange client script in which on change of the field showing a pop up message with two button as cancel and continue.I have used UI Page for this and in classic UI,below syntax will work but its not working in workspace. How can we do this in workspace?

We need to either clear all the fields or close the current window

function onCancel() {

var fields = g_form.getEditableFields();

for (var x = 0; x < fields.length; x++) {

g_form.setValue(fields[x], "");

}

Ankur Bawiskar · ‎12-22-2024

@Saranya Babu1

the script you shared doesn't reflect the details you shared in question.

But why to give OK and cancel button?

You will have to use g_modal in workspace

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

raj chavan · ‎12-22-2024

Hi @Saranya Babu1
In Snow Workspace g_form.getEditableFields() won't work directly
Try this approach
- Clear All Fields

function onCancel() {
       var fields = Object.keys(g_form.getEditableFields());
       fields.forEach(function(field) {
           g_form.setValue(field, "");
       });
   }

use spModal for Workspace

   spModal.open({
       title: "Confirmation",
       message: "Do you want to clear all fields or cancel?",
       buttons: [
           { label: "Continue", value: "continue" },
           { label: "Cancel", value: "cancel" },
       ],
   }).then(function(result) {
       if (result.value === "continue") {
           onCancel();
       }
   });

Kindly mark it correct and helpful if it is applicable.

Thanks,

Raj

Saranya Babu1 · ‎12-22-2024

Hello

Here am using a on change client script to open a pop message in which on click of cancel button, I want to close the window or clear the form.

<?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:ui_form>
	<div id="header" style="font-size: 20px;font-weight: 700;line-height: 28px;text-align: center;text-underline-position:from-font;text-decoration-skip-ink: none;color:#5514B4;">
There are open records for this Installed base Item style
</div><br></br>
<div id="secondary" style="font-size: 16px;font-weight: 500;line-height: 20px;text-align: center;text-underline-position:from-font;text-decoration-skip-ink: none;color:black;">
Do you still want to raise case?</div>
<br></br>

		<g:evaluate>
			var parentSysID = RP.getWindowProperties().sysparm_sys_id;
			var accId = RP.getWindowProperties().sysparm_acc_id;
	
		gs.info("parentSysID1"+${parentSysID})
					
	</g:evaluate>
<input type="hidden" id="parentSysID" name="parentSysID"  value="${JS:sysparm_sys_id}"/>
<input type="hidden" id="accId" name="accId"  value="${JS:sysparm_acc_id}"/>
		<div id = "modal_body"  style="min-height: 100px; overflow: hidden;"></div>

		<div id="modal-footer" align="right" class="modal-footer"> </div>
	
	<!-- <g:dialog_buttons_ok_cancel ok="return onOK();" cancel="return onCancel();" ok_type ="ok_button" cancel_type ="cancel_button" style="padding: 10px 20px; background-color: #5514B4; color: white; border: none; cursor: pointer;" ok_text ="${gs.getMessage('Continue Creation')}" cancel_text= "${gs.getMessage('Cancel')}" ></g:dialog_buttons_ok_cancel> -->
	<!-- <g:dialog_buttons_ok_cancel id="continue" type="button" style="padding: 10px 20px; background-color: #5514B4; color: white; border: none; cursor: pointer;" onclick="onCancel()">${gs.getMessage('ok')}</g:dialog_buttons_ok_cancel> -->
	<button  onclick="onCancel();" style="padding: 10px 20px; background-color: #5514B4; color: white; border: none; cursor: pointer;"  name="cancel" id="cancel">${gs.getMessage('Cancel')}</button>
	<button name="submit"  onclick="return submitChanges();" id="submit" style="padding: 10px 20px; background-color: #5514B4; color: white; border: none; cursor: pointer;">${gs.getMessage('Continue Creation')}</button> 
	</g:ui_form>
	
</j:jelly>

function onCancel() {
g_form.modified=false;

window.open('','_self').close();


}

(function() {
    // var message="";

    //var installBaseItem = "${RP.getWindowProperties().get('sysparm_installbase_name')}";
    //var installBaseItem = g_form.getValue("u_installed_base_item");

    var installBaseItem = document.getElementById("parentSysID").value;
    //alert(installBaseItem);
    // Create a GlideAjax object and call the script include
    var ga = new GlideAjax('sn_customerservice.B2BCasePopupUtil');
    ga.addParam('sysparm_name', 'getRelatedRecords'); // Method in the script include
    ga.addParam('installBaseItem', installBaseItem);
    ga.getXMLWait();
    var response = ga.getAnswer();
    // ga.getXML(instalBaseFun);

    //   function instalBaseFun(response) {
    //	ga.getXMLAnswer(function(response) {
    if (!response) {
        alert("No data returned from the server.");
        return;
    }

    // Parse the response
    var result = JSON.parse(response);
    // alert(JSON.stringify(result));
    if (!result || (!result.cases.length && !result.changes.length && !result.incidents.length)) {
        alert("No open records found for the selected Installed Base Item.");
        return;
    }



    var message = '<table style="width: 100%; border: 1px solid #ddd; border-collapse: collapse;">';
    message += '<tr><th>Number</th><th>State</th><th>Category</th></tr>';

    for (var i = 0; i < result.cases.length; i++) {
        var c = result.cases[i];

        var casenumber = "<a href='/sn_customerservice_b2b_technical_support.do?sys_id=" + c.sys_id + "'>" + c.number + "</a>";

        var url = 'now/cwf/agent/record/sn_customerservice_b2b_technical_support/' + c.sys_id; // Workspace URL
        message += '<tr>';
        message += '<td>' + casenumber + '</td>'; // Hyperlink
        message += '<td>' + c.state + '</td>';
        message += '<td>' + (c.category || 'N/A') + '</td>';
        message += '</tr>';
    }

    for (var j = 0; j < result.changes.length; j++) {
        var ch = result.changes[j];
        var url2 = '/now/cwf/agent/record/change_request/' + ch.sys_id; // Workspace URL
        message += '<tr>';
        message += '<td><a href="' + url2 + '" target="_blank">' + ch.number + '</a></td>'; // Hyperlink
        message += '<td>' + ch.state + '</td>';
        message += '<td>' + (ch.category || 'N/A') + '</td>';
        message += '</tr>';
    }

    for (var k = 0; k < result.incidents.length; k++) {
        var inc = result.incidents[k];
        var url3 = '/now/cwf/agent/record/incident/' + inc.sys_id; // Workspace URL
        message += '<tr>';
        message += '<td><a href="' + url2 + '" target="_blank">' + inc.number + '</a></td>'; // Hyperlink
        message += '<td>' + inc.state + '</td>';
        message += '<td>' + (inc.category || 'N/A') + '</td>';
        message += '</tr>';
    }

    message += '</table>';

    // Alert message (optional)
    //alert("Message: " + message);

    // Update the UI
    document.getElementById('modal_body').innerHTML = message;
    //   }
    //})();
})();



function submitChanges() {

    GlideDialogWindow.get().destroy();
    return true;
}

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }

    function openIBIPopup() {
        if (typeof(g_modal) !== 'undefined') {
            var title = '';
            getMessages([title], function(messages) {
                if (messages) {
                    url = "sn_customerservice_CasePopupMessage.do?sysparm_stack=no&sysparm_workspace=" + true + "&sysparm_sys_id=" + g_form.getValue("u_installed_base_item")+"&sysparm_acc_id=" + g_form.getValue("account");


                    g_modal.showFrame({
                        title: messages[title],
                        url: url,
                        height: '56vh',
                        font: 'BT Curve',
                        autoCloseOn: 'URL_CHANGED',
                        callback: function(ret, data) {
                            //jslog("-----------------");
                            //jslog(data);
                            //jslog("-----------------");
                            createContact(data);


                        }
                    });
                }
            });
        }
        var dialogClass = GlideModal ? GlideModal : GlideDialogWindow;
        var dialog = new dialogClass('sn_customerservice_CasePopupMessage');
        dialog.setPreference('sysparm_sys_id', g_form.getValue("u_installed_base_item"));
        dialog.render();


    }

    openIBIPopup();
    /*var installBaseItem = g_form.getValue('u_installed_base_item');
    alert("InstalledBaseItem" + installBaseItem);


  

        if (typeof(g_modal) !== 'undefined') {
            var ui_page_id = '945e8765fb6a92109e80fef1aeefdc8a';
            g_modal.showFrame({
                url: '/ui_page.do?sys_id=' + ui_page_id+'&sysparm_sys_id='+encodeURIComponent(installBaseItem),
                size: 'xl',
                height: 500
            });

        }
    var dialog = new GlideModal('sn_customerservice_CasePopupMessage', true, 500);
    // var dialogClass = GlideModal ? GlideModal : GlideDialogWindow;
    // var dialog = new dialogClass('sn_customerservice_CasePopupMessage');
     dialog.setPreference('installBaseItem', installBaseItem);
    dialog.render();
*/
}

Saranya Babu1 · ‎12-22-2024

Hi,

I have tried the below script to open the pop up message instead of UI Page but that is also not working.No modal are getting opened.What am missing here?

function onChange(control, oldValue, newValue, isLoading, isTemplate) {

if (isLoading || newValue === '') {

return;

}

var installBaseItem = g_form.getValue("u_installed_base_item");

alert(installBaseItem);

// Create a GlideAjax object and call the script include

var ga = new GlideAjax('sn_customerservice.B2BCasePopupUtil');

ga.addParam('sysparm_name', 'getRelatedRecords'); // Method in the script include

ga.addParam('installBaseItem', installBaseItem);

// ga.getXML(installBaseItems);

ga.getXMLAnswer(function(response) {

if (!response) {

alert(response);

alert("No data returned from the server.");

return;

}

// Parse the response

var result = JSON.parse(response);

alert(JSON.stringify(result));

if (!result || (!result.cases.length && !result.changes.length && !result.incidents.length)) {

alert("No open records found for the selected Installed Base Item.");

return;

}

var message = '<table style="width: 100%; border: 1px solid #ddd; border-collapse: collapse;">';

message += '<tr><th>Number</th><th>State</th><th>Category</th></tr>';

for (var i = 0; i < result.cases.length; i++) {

var c = result.cases[i];

message += '<tr>';

message += '<td>' + c.number + '</td>';

message += '<td>' + c.state + '</td>';

message += '<td>' + (c.category || 'N/A') + '</td>';

message += '</tr>';

}

for (var j = 0; j < result.changes.length; j++) {

var ch = result.changes[j];

message += '<tr>';

message += '<td>' + ch.number + '</td>';

message += '<td>' + ch.state + '</td>';

message += '<td>' + (ch.category || 'N/A') + '</td>';

message += '</tr>';

}

for (var k = 0; k < result.incidents.length; k++) {

var inc = result.incidents[k];

message += '<tr>';

message += '<td>' + inc.number + '</td>';

message += '<td>' + inc.state + '</td>';

message += '<td>' + (inc.category || 'N/A') + '</td>';

message += '</tr>';

}

message += '</table>';

alert("Message: " + message);

spModal.open({

title: "There are open records for this Installed base Item style",

message: message,

buttons: [{

label: "Continue",

value: "continue"

},

{

label: "Cancel",

value: "cancel"

},

],

}).then(function(result) {

if (result.value === "cancel") {

onCancel();

}

if (result.value === "continue") {

submitChanges();

}

});

}

)();

function onCancel() {

GlideDialogWindow.get().destroy();

g_form.clearValue('account');

return false;

}

function submitChanges() {

GlideDialogWindow.get().destroy();

return true;

}