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

Ankur Bawiskar · ‎01-10-2021

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

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

SM6 · ‎01-10-2021

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.

Ct111 · ‎01-10-2021

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

Mark my ANSWER as CORRECT and HELPFUL if it helps

SM6 · ‎01-10-2021

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