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

[SM6]

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.

[SM6]

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

[DrewW · Accepted solution]

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;
		
	});
}

[SM6]

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

[DrewW]

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.

[SM6]

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.