How to register to the onClick event of a Close button element

user_9238925 0
Viewed 2349

I am using a UI Action in serviceNow to call a GlildeModalForm popup window. That window has a X(close button) that I need to catch when the user press that button. I do not have any feedback on that button click and need to catch it

I have seen some exemple on ServiceNow communty where you can register to some callback function but it is used only after submitting the form.

var modalForm = new GlideModalForm('Create User Member' , tableName );
modalForm.setOnloadCallback(formOnLoadCallback);
modalForm.setCompletionCallback(formAfterSubmitCallback);
modalForm.render();

function formOnLoadCallback() {
//Access GlideModal g_form to set field for the new record
var d_form = window.frames["dialog_frame"].g_form;
d_form.setValue('field', g_form.getValue('field'));
d_form.setValue('field', g_form.getValue('field'));
}

function formAfterSubmitCallback(action_verb, sys_id, table, displayValue) {
//Get the newly created record sys_id and then set e.g a value to the starting record
g_form.setValue('field', sys_id);
//Save the record
g_form.save();
}

By using the element inspector of my browser i can see that the Close button is define as below :

<button data-dismiss="GlideModal" class="btn btn-icon close icon-cross" 
id="x_58872_needit_cascadesequence_closemodal">                 <span 
class="sr-only">Close</span>                
</button>

I would need to find that button from the script above and then register to its onClick, then in onClick even I would like to simply send an alert of potential loosing data message

Thanks for help on this

servicenow javascript
3 Answers

Since click events bubble up the DOM, you can simply register a click listener on the document. The event object is automatically passed to the handler function you pass to addEventListener(). Inside the handler, you can check if the click event was raised on an element that has data-dismiss="GlideModal":

document.addEventListener('click', function(e) {
  if (e.target.matches('[data-dismiss="GlideModal"]') {
    alert ('Close modal clicked');
  }
})

This is called a delegate event listener because the listener is not registered on the element you expect the event to occur on, but higher up the DOM tree. This also has the advantage that it works for dynamically created elements (like supposedly your modal HTML).

Edit: I just double-checked the HTML you've shown. Possibly you might have to check whether the click originates from the span inside the button, rather than the button itself:

document.addEventListener('click', function(e) {
  if (e.target.matches('[data-dismiss="GlideModal"] span') {
    alert ('Close modal clicked');
  }
})
user_37443040

The SerivceNow GlideModalForm extends GlideModal which supports event registration via the on method. There are 2 supported events that might work for what you want:

  • closeconfirm: called by the destroy method, can be used to abort destruction
  • beforeclose: called once the window has already been hidden

I think you can just use the closeconfirm event to know when the close happens, you don't necessarily need to care about aborting the action, and it'll fire as soon as the user clicks the button, but before the window is removed. Notably, however, this will probably also fire when the user clicks the "Close" button (not the X) which optionally shows via the modal preference: myGlideModal.setPreference('sysparm_button_close', 'Close')

Here's a rough example:

var myGlideModal = new GlideModal(...);
dd.on("beforeclose", function (){ /* do stuff, maybe return false to cancel */ });
user_259620

You can create an onclick function as follows:

html:

<button data-dismiss="GlideModal" class="btn btn-icon close icon-cross" 
id="x_58872_needit_cascadesequence_closemodal" onclick="myFunction()">                 
  <span class="sr-only">Close</span>                
</button>

JavaScript:

function myFunction() {
  alert("I am an alert box!");
}
user_96784620
Related