question Re: URGENT: Record Producer to open in spModal pop-up window on click of a button. in Developer forum

URGENT: Record Producer to open in spModal pop-up window on click of a button.

SM6 — Sun, 10 Jan 2021 16:09:39 GMT

Hi,

Can anyone help me how to use spModal to open a record producer inside a record producer. Here is the whole requirement.

I have record producer with a button "Add locations". When a user clicks on the button currently it redirects to a different record producer to Add Location. But I want it to open in the same window as a pop-up rather than redirect.

Here is the script for the button. This is where I want to add the pop-up instead of redirect to new window.

Widget HTML:

<a ng-href="{{options.href}}" target="_blank" class="btn btn-{{options.color}} m-b" ng-if="data.socialQAEnabled">{{data.buttonMsg}}</a>

Widget Client Controller:

function($element, $timeout) {
	/* widget controller */
	var c = this;
	$timeout(function() {
		$element.find('.btn').css("width", c.options.button_width);
	}, 100);
	console.log(c.options.button_width);
}

Widget Server Script:

data.buttonMsg = gs.getMessage(options.button_text || "Click Here");
data.socialQAEnabled = true;
if (options.href == "?id=sqanda_new_question") {
	data.socialQAEnabled = gs.getProperty('glide.sp.socialqa.enabled') === 'true';
}

The above widget is cloned from the OOB link-button widget.

Also I don't want to create a custom form widget as it's easy to maintain producer logics and scripts inside the producer script/script include.

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

Ankur Bawiskar — Sun, 10 Jan 2021 16:15:24 GMT

Hi,

update as this

<a ng-href="{{options.href}}" target="_self" class="btn btn-{{options.color}} m-b" ng-if="data.socialQAEnabled">{{data.buttonMsg}}</a>

Regards
Ankur

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

SM6 — Sun, 10 Jan 2021 16:27:59 GMT

This is forcing me to leave the page. I want users to submit the pop-up record producer and after the page is destroyed, I have ref field with will pick the newly entered location.

I already tested with "target". After a long search I understood this can be achieved using spModal. Since I'm not a portal developer, I'm unable to add the spModal functionality.

Here is the link that I found, but unable to replicate.

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

JerryJ071847183 — Sun, 10 Jan 2021 16:39:38 GMT

Hello check this LINK it will be helpful to you in achieving your objective

Mark my ANSWER as CORRECT and HELPFUL if it helps

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

Pranesh072 — Sun, 10 Jan 2021 16:54:04 GMT

You can render html in spmodal but to open a url it will be difficult. You can use this url for some help

https://stackoverflow.com/questions/13812962/modal-window-with-custom-url-in-angularjs

you can open your record producer in iframe or window popup

  onclick="window.open('https://google.com','popup','width=200,height=200,');

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

SM6 — Sun, 10 Jan 2021 16:57:55 GMT

I'm trying this on service portal and I'm not a portal developer, so I'm having a difficulty even to understand how I can achieve this.

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

SM6 — Sun, 10 Jan 2021 16:59:07 GMT

Can you please help me with the exact code of how I can add this to my widget?

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

DrewW — Sun, 10 Jan 2021 17:02:49 GMT

Sounds like you want a dialog window.

GlideDialogWindow: Advanced Popups Using UI Pages - ServiceNow Guru

But for service portal you need to use the widget-modal. Here is something I used to open one.

//Client HTML
<sp-widget widget="data.modalInstance" ng-if="data.modalInstance"></sp-widget>

//Client Script
$scope.openModal = function(ev, table, sysid, query, view){
	
	if(!sysid)
		sysid = -1;
	
	spUtil.get("widget-modal", {embeddedWidgetId: "widget-form", 
															embeddedWidgetOptions: {table: table, 
																											sys_id: sysid, 
																											view: view,
																											query: query,
																											disableUIActions: "true",
																											hideRelatedLists: true
																										 }
														 }).then(function(widget){
		var modalCtrl;
		var unregister = $scope.$on('sp.form.record.updated', function(){
			//Do work here when record updated and then close modal
			modalCtrl.close();

		});
			
		widget.options.afterClose = function(){
			unregister();
			$scope.data.modalInstance = null;
			modalCtrl = null;
		};
		
		widget.options.afterOpen = function(ctrl){
			modalCtrl = ctrl;
		};
		$scope.data.modalInstance = widget;
		
	});
}

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

SM6 — Sun, 10 Jan 2021 17:27:32 GMT

Can you please help me with the exact code of how I can add this to my widget?

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

SM6 — Sun, 10 Jan 2021 17:31:14 GMT

Where do I add the "Record Producer URL" in the above script?

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

Pranesh072 — Sun, 10 Jan 2021 17:36:11 GMT

so you can use

  onclick="window.open('https://google.com','popup','width=200,height=200,');

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

SM6 — Sun, 10 Jan 2021 17:45:57 GMT

<a ng-href="{{options.href}}" target="_blank" class="btn btn-{{options.color}} m-b" ng-if="data.socialQAEnabled">{{data.buttonMsg}}</a>

Where do I place onclick in the above code?

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

Pranesh072 — Sun, 10 Jan 2021 17:55:21 GMT

you are using <a> tag instead you can use button tag with ng-click

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

Pranesh072 — Sun, 10 Jan 2021 18:00:13 GMT

<button class="btn2 btn-default2" ng-click="openurl('/YOUR_URL')">Button</button>

$scope.openurl = function(url){
    window.open(url, 'popup','heigth=600,width=600');   // may alse try $window

}

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

SM6 — Sun, 10 Jan 2021 18:08:53 GMT

<button class="btn2 btn-default2" ng-click="openurl('URL')">Button</button>

$scope.openurl = function(url){
    window.open(url, 'popup','heigth=600,width=600');   // may alse try $window

}

This is how I used in the widget HTML and Client Controller. Button does not do anything.

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

Pranesh072 — Sun, 10 Jan 2021 18:18:06 GMT

can you share your widget xml?

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

SM6 — Sun, 10 Jan 2021 18:33:54 GMT

Attached the Widget

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

SM6 — Sun, 10 Jan 2021 18:42:09 GMT

I just realized my mistake. Updated Client Controller.

function($scope) {
  /* widget controller */
  var c = this;
$scope.openurl = function(url){
    window.open(url, 'popup','heigth=600,width=600');
}
		
}

But this is opening as new window not as a dialog box and when user submits the form from the new window, its redirecting to the ticket page.

Here is my requirement in detail.

I want a window just like window pop-up of MRVS (multi-row variable set). But this pop is a url to an other Record Producer. When user submits the pop-up record producer, the dialog window must close and the user must remain in the previously opened Record Producer.

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

DrewW — Mon, 11 Jan 2021 16:55:25 GMT

For what you want you need to find the widget that will load a catalog item and then review the code to see how to tell it to load the catalog item you want. So I believe you need something like this

spUtil.get("widget-modal", {embeddedWidgetId: "widget-sc-cat-item-v2", 
   embeddedWidgetOptions: { sys_id: <SYS_ID OF CAT ITEM> }
}).then(function(widget){

Keep in mind that the OOB catalog item widget does NOT allow you to change the catalog item once you have loaded one. So if you are expecting to be able to have different catalog items display based on different buttons you may have to have multiple popups.

It will be interesting to know if you can submit this item without it causing other issues.

Re: URGENT: Record Producer to open in spModal pop-up window on click of a button.

SM6 — Mon, 11 Jan 2021 20:02:24 GMT

So if you look into MRVS functionality. It shows in a spModal format. So I want exactly the same view but the pop-up has to be a record producer itself.

Button on the Record Producer1.

Desired View of Record Producer2.

So this should not be an Add row functionality. In this place I want RP2 to pop-up.

Reason: User should submit RP2 and add the newly added location to the RP1 then submit RP1.