Hi,

There might be situations where we would like to show a popup when submitting a service catalog.

This article gives one way of implementing a custom popup.

1. Create an onLoad Catalog client script as shown below.

• showAlertPlatform
• * Will show a popup in the platform view. For the purpose of this article, I have used the existing OOB UI page - glide_confirm_standard to display as a popup. We can clone this and modify it according to our needs.
• showAlertServicePortal
• * Will show a custom widget as a popup when submitting the catalog in service portal.

function onLoad() {

    //g_user - GlideUser object

    g_user.readyForSubmit = false;

    g_user.showAlertPlatform = function(msg) {
        var dialog = new GlideModal('glide_confirm_standard');
        dialog.setPreference('warning', true);
        dialog.setSize(450);
        dialog.setTitle('Custom Title');
        dialog.setPreference('title', msg);
        dialog.setPreference('onPromptComplete', function() {
            g_user.readyForSubmit = true;
            saveProducer();     
        });
        dialog.setPreference('onPromptCancel', undefined);
        dialog.render();
    };

    g_user.showAlterServicePortal = function(msg) {
        var shared = {};
        shared.message = msg;
        var popupOptions = {
            title: 'Custom Title',
            widget: 'custom-popup',
            shared: shared,
            footerStyle: {display:'none'}
        };

        var modalInstance = spModal.open(popupOptions).then(function() {
            g_user.readyForSubmit = true;
            g_form.submit();
        });
    };

}

2. Create an onSubmit catalog client script one for the platform and another for portal.

Let's name our script as - Custom popup - onSubmit - Portal, which will contain below code.

UI Type field should be set to - Mobile / Service Portal

function onSubmit() {

    if (g_user.readyForSubmit) return true;

    g_user.showAlterServicePortal('Message to show in the popup');

    return false;   

}

In case of platform view, lets name our script as - Custom popup - onSubmit - platform, which will contain below code.

UI Type field should be set to - Desktop.

function onSubmit() {

    if (g_user.readyForSubmit) return true;

    g_user.showAlertPlatform('Message to show in the popup');

    return false;       
}

3. The custom widget code will be as shown below. This is a simple widget which will show the message that is sent as part of the spModal popup options.

HTML:

<div>

  <div class="row">
    <div class="col-sm-12 col-md-12">
      {{c.message}}
    </div>   
  </div> 
  <div class="modal-footer">
    <button type="submit" ng-click="$parent.$parent.buttonClicked($parent.$parent.options.buttons[1])" class="btn btn-primary pull-right m-l-sm">Submit</button>
    <button type="button" ng-click="$parent.$parent.$dismiss()" class="btn btn-default pull-right">Cancel</button> 
  </div>

</div>

Client script:

function() {
  /* widget controller */
  var c = this;
  var shared = c.widget.options.shared;
  c.message = shared.message;
}

4. Screenshot - Platform

5. Screenshot - Portal

Thanks