Opening a popup window from a widget in portal

[Kumar Tella]

I have a instance with link widget in portal, when I click on it, it will open an external link in new window/tab. This is working fine. But I would like to open that in a popup window NOT as a new window with menus etc. I know it's easy if it is in a header as a hyperlink with javascript:popupwindow function. I don't know how to accomplish this in a wdget. Any help would be appreciated.

This is what I have in Json section under Link Type and Destination: 

{
"target": {
"value": "_blank",
"displayValue": "New Window"
},
"link_template": {
"value": "Circle Icon",
"displayValue": "Circle Icon"
}
}

Can we add javascript popupwindow function in the above json?

Thanks

Kumar

[rahulpandey]

Hi,

I came across this situation once, test below code in a demo widget and see if link opens up in a pop up window.

initialize $scope.openLink on element click

$scope.openLink = function () {
var windowObjectReference = null;

if(windowObjectReference == null || windowObjectReference.closed){
windowObjectReference = window.open('url','width=450,height=530,font-size: 1.2em,display:inline-block,titlebar=yes","","width=450, height=530");
}
else
{
windowObjectReference.focus();
}
windowObjectReference.focus();

};

[Anais Geisen]

Hi,

You can also use the SPModal API here: https://docs.servicenow.com/bundle/kingston-application-development/page/app-store/dev_portal/API_re...

This will be adapted for Service Portal Widgets.

Best regards,

Anaïs

[rahulpandey]

Thanks,

Unfortunately, spModal is nothing but a wrapper for BS modal 😞

[Kumar Tella]

I Modified the Circle Icon code in HTML Template and added client script. 

<!--// Circle Icon popUp-->
<a ng-click="c.openPopUp()" class="circle_icon {{::options.class_name}} text-{{::options.color}}" >
<span class="image-container" ng-if="options.u_image">
<img class="media-object" src="{{::options.u_image}}" width="55" height="55" alt="${{{options.title}}}" style="cursor:pointer;">
</span>
<h2 style="cursor:pointer;">{{::options.title}}</h2>
<span class="text-muted" style="cursor:pointer;">{{::options.short_description}}</span>
</a>

Added this in client script in Client controller:

// Client script
function() {
var c = this;
c.openPopUp = function() {
var url = "my url";
var popup = window.open (url, "popup", "width=900, height=600");
}
}

Thank you all for the help.