Can you set a static backdrop for spModal?

Robert Beeman
Kilo Sage

‎03-28-2018 09:33 AM

Is there a method to set the backdrop to static when using the spModal class? When using GlideModalV3 class I've been able to use the '.setBackdropStatic(true);' method, and with uibModal I can set the option 'backdrop: 'static' to accomplish this.

I have not been able to find an equivalent method to remove the ability of a user to click out of, or otherwise close a modal, without interaction with the buttons provided. 

Thanks in advance!

Labels:
0 Helpfuls
  • 1,795 Views
1 REPLY 1

balu3
Kilo Guru

‎08-11-2018 04:52 AM

Hi,

I'm quite late to answer this. But I think it'll be useful to anyone who refers it.

spModal is a light-weighted extension of uib modal.

 

To understand it, think of it as follows

  • Bootstrap v3 modal is the base. To do any styling to the modal contents, the Bootstrap classes have to be used. The functionality change however is invoked differently, see next point.
  • uib modal wraps the Bootstrap modal to AngularJs services. So any changes in the functionality should be provided as options to uib modal (Refer documentation: https://angular-ui.github.io/bootstrap/#modal)
  • spModal, as mentioned is a light-weighted extension of uib modal. To be more accurate, the most used functionality of uib modal with respect to Service Portal is wrapped to a new service. That service is spModal.

 

So any of the functionality of uib modal theoretically may be provided as options to spModal to acquire more functionalities over the light-weighted behavior. [Edit: I haven't tried this, because we have our own version of uib extension in our portal].

In your case provide an option backdrop: 'static' to the spModal options.

An example is as follows. This will open a new incident form and closes only when Ok button is clicked.

spModal.open({
  title: 'New incident:',
  size: 'lg',
  backdrop: 'static',
  widget: 'widget-form',
  widgetInput: {
    table: 'incident',
    sys_id: '-1'
  },
  buttons: [{label:'✔ ${Ok}', primary: true}]
}).then(function(action) {
  if (action.primary) 
    console.log('Incident action completed');
});

 

Thanks

Balu

 

0 Helpfuls