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

SM6 · ‎01-10-2021

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.

DrewW · ‎01-10-2021

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

View solution in original post

Pranesh072 · ‎01-10-2021

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

or

you can open your record producer in iframe or window popup

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

SM6 · ‎01-10-2021

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.

Pranesh072 · ‎01-10-2021

so you can use

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

SM6 · ‎01-10-2021

<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?

Pranesh072 · ‎01-10-2021

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