Can we use DialogWindow in portal development ?

[String]

Hi Team ,

we are developing the catalog item for portal using widget  and we trying to show DialogWindow in client controller but we are unable to get the DialogWindow .Same code is working in backend 

Below is my code 

api.controller = function($scope, spUtil) {

    /* widget controller */

    var c = this;

    try {

        $scope.clickMethod = function() {

            alert("check"); //

            var loadingDialog = new GlideDialogWindow('loading_message', true);

            loadingDialog.setTitle('Please wait ..’);

            loadingDialog.setSize(400, 200);

            loadingDialog.render();

c.server.get(inputs).then(function(resp) {

  $scope.page.g_form.setValue(‘Value’, 'test');

loadingDialog.destroy();

            });

        };

    } catch (exception) {

alert("error" + exception);

  }

};

Please guide me 

[Tushar]

Hi @String 

As per above you are creating a GlideDialogWindow directly within the client-side controller.

However, I think GlideDialogWindow is primarily designed for server-side usage in ServiceNow and  directly invoking it from the client side within a widget might not work as expected.

create a server-side script include for GlideDialogWindow creation:

// Script Include: invokeDialogScript.js

var InvokeDialogScript = Class.create();
InvokeDialogScript.prototype = Object.extendsObject(AbstractAjaxProcessor, {

    //  invoke the dialog and perform necessary server-side actions
    invokeDialog: function() {
        var loadingDialog = new GlideDialogWindow('loading_message', true);
        loadingDialog.setTitle('Please wait ...');
        loadingDialog.setSize(400, 200);
        loadingDialog.render();

        // perform server-side actions here

        loadingDialog.destroy();
        return 'success'; // Return a success message to the client
    },

    type: 'InvokeDialogScript'
});

client side -

// Client-Side Controller: api.controller.js

api.controller = function($scope, spUtil) {
    var c = this;

    try {
        $scope.clickMethod = function() {
            alert("check");

            var inputs = {}; // define your inputs here

            // Invoke the server-side script include to handle the dialog
            c.server.get('invokeDialogScript.invokeDialog', inputs).then(function(response) {
                $scope.page.g_form.setValue('Value', 'test');
            });
        };
    } catch (exception) {
        alert("error" + exception);
    }
};

The client-side controller invokes the server-side script include using c.server.get

Please, don't forget to mark my answer as correct if it solves your issue or mark it as helpful if it is relevant for you!

Regards,
Tushar

[Iraj Shaikh · Accepted solution]

Hi @String 

When you're developing for the Service Portal, you should be aware that some of the APIs available in the platform UI (like the standard ServiceNow interface) are not available or work differently in the Service Portal. The `GlideDialogWindow` is one such example—it's typically used in the platform UI and not in the Service Portal.

For the Service Portal, you should use AngularJS and Service Portal modal functions provided by the `spModal` service instead. Here's an example of how you can modify your code to use `spModal`:

api.controller = function($scope, spUtil, spModal) {
    /* widget controller */
    var c = this;

    $scope.clickMethod = function() {
        // Show a simple alert using spUtil
        spUtil.addInfoMessage("check");

        // Open a modal dialog using spModal
        var options = {
            title: 'Please wait...',
            message: 'Processing your request.',
            size: 'lg' // 'sm' for small, 'md' for medium, 'lg' for large
        };

        spModal.open(options).then(function() {
            // This function is called when the modal is closed.
            c.server.get({}).then(function(resp) {
                // Assuming you have a page object and g_form is available
                if ($scope.page && $scope.page.g_form) {
                    $scope.page.g_form.setValue('Value', 'test');
                }
            });
        });
    };
};

In this example, I've replaced the `GlideDialogWindow` with `spModal.open()`, which is the appropriate way to open a modal in the Service Portal. The `spModal` service provides a promise-based API, so you can perform actions after the modal has been closed by the user.

Please note that the `spModal` service does not have a `setSize` method. Instead, you specify the size when you open the modal with the `size` option ('sm', 'md', or 'lg'). Adjust the size according to your needs.

Also, I've replaced the `alert` function with `spUtil.addInfoMessage`, which is a more Service Portal-friendly way to show information messages to the user.

Remember to inject `spModal` into your controller function, as I've done in the example above. This is necessary to use the `spModal` service within your controller.

Please mark this response as correct or helpful if it assisted you with your question.

[Ankur Bawiskar]

@String 

GlideDialogWindow is not supported in portal.

you should use spModal