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.

[DrewW]

So you do not want to display a record producer catalog item you want a regular form to show up so you can just create a new record in the table and then the user can pick it in one of the fields.  Which is what the full code I posted does.  Shows the form view of the table you give it and displays the record for the sys_id you passed in.  Pass in -1 or leave sysid blank for a new record.  If you want to pre fill out fields that just sent the query with the fields and values they should be.  Set the form view if needed.  I use it all the time when I need this.  So create a widget that just has the button html, and add the widget var to your cat item.

[SM6]

Thank you Drew, 

That's exactly what I'm looking for.

Is this how I have to write that code. Sorry, I'm not very good at Service Portal Development, so I require bit more assitance. 🙂 

Below is my code. I don't know what I'm writing wrong but on click of the button, nothing happens

//Client HTML
<div>
<button class="btn btn-primary m-b" ng-click="c.openModal()">${Add/Update Location} 
<sp-widget widget="data.modalInstance" ng-if="data.modalInstance"></sp-widget>
</button>
  </div>

//Client Script
function($scope, spModal) {
  /* widget controller */
  var c = this;
	
	$scope.openModal = function(ev, table, sysid, query, view){
	
	if(!sysid)
		sysid = -1;
	
	spUtil.get("widget-modal", {embeddedWidgetId: "sc_cat_item_v2_custom", 
															embeddedWidgetOptions: {//table: table, 
																											sys_id: 'b1807e151be1e8d063a6ed7b2f4bcba3' 
																											//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;
		
	});
}
	
}