Display UI page as a pop up from widget

[Lokesh5]

 Hi All, I have created a widget which displays list of applications as shown in the fig. So when I click on application, a UI page should visible as a  popup with the  same application logo and name. Could some help me on how to achieve this?

[Community Alums]

Hi @Lokesh5 ,

it is possible to access a GlideWindow/GlideModal dialog and its parameters from a widget in the scenario described.

Example:

Showing the dialog from the UI platform:

var dialog = new GlideModal("portal_page_container");
dialog.setTitle('Create Jira Ticket');
dialog.setPreference('sysparm_portal_page_id', "some_portal_page");
dialog.setPreference('sysparm_ok', okHandler);
dialog.render();


function okHandler(result){
    alert("ok() called with result=" + result);
}

Inside the Portal widget:

// The widget may be running inside the nav frame or not, so look for GlideModal in two places.
var glideModal = top.GlideModal || top.frames[0].GlideModal;

// get ref to dialog by specifying the ui page that its hosting
var dialog = glideModal.prototype.get("portal_page_container");

// get dialog setting (in this example it is a function/callback reference)
var ok = dialog.getPreference('sysparm_ok');
ok("passed");

// if you need to close from within the widget:
dialog.destroy();

Also, refer to this article : https://www.servicenow.com/community/developer-articles/custom-ui-page-in-a-popup/ta-p/2319550

[Community Alums]

it is possible to access a GlideWindow/GlideModal dialog and its parameters from a widget in the scenario described.

Example:

Showing the dialog from the UI platform:

var dialog = new GlideModal("portal_page_container");
dialog.setTitle('Create Jira Ticket');
dialog.setPreference('sysparm_portal_page_id', "some_portal_page");
dialog.setPreference('sysparm_ok', okHandler);
dialog.render();


function okHandler(result){
    alert("ok() called with result=" + result);
}

Inside the Portal widget:

// The widget may be running inside the nav frame or not, so look for GlideModal in two places.
var glideModal = top.GlideModal || top.frames[0].GlideModal;

// get ref to dialog by specifying the ui page that its hosting
var dialog = glideModal.prototype.get("portal_page_container");

// get dialog setting (in this example it is a function/callback reference)
var ok = dialog.getPreference('sysparm_ok');
ok("passed");

// if you need to close from within the widget:
dialog.destroy();

Also, refer to this article : https://www.servicenow.com/community/developer-articles/custom-ui-page-in-a-popup/ta-p/2319550

[Lokesh5]

Hi @Community Alums,  I have used the below HTML and client script on the widget to display the app info when its clicked. but its not showing appropriate result. can you please check and let me know where I am doing the mistake
Html:

<a id="{{app.appId}}" class="app-launcher-link"  title-{{app.appId}}" ng-click="c.openAppDetailsModal(app)">

Client:
c.openAppDetailsModal = function(app) {
var modalOptions = {
title: app.title,
message: '<img src="' + app.logo + '" alt="' + app.title + '" /><br><p>' + app.description + '</p>',
buttons: [{
name: 'Close',
primary: false
}]
};
var $spModal = $spModal.open(modalOptions);
};