Before a Record producer in Portal is submitted, execute a script in widget.

[santoshsahoonis]

In the service portal I have a widget, as a variable, in a record producer and I want to execute a script in the widget before the record producer is submitted.

So, from the widget, is there any way to identify when the record producer is being submitted? any events?

Thanks,

Santosh

[ChrisBurks · Accepted solution]

NOTE: I'm describing what I see on Kingston
There is a private event on the initialized g_form and there is an event from and emit. In your widget you can log them out with these:
$scope.page.g_form.$private.events.on("submitted", function(data){
    console.log(data); // logs out "submit"

})

$rootScope.$on("$sp.sc_cat_item.submitted", function(evt,data){
  console.log(data); // logs out the object being sent to the redirect handler in the oob widget for a catalog item
  alert("Hold On") // used to stop the pause the submission so that you can see this particular submit depending if "checkout is being used"
})

However, doing anything in these won't stop the submission. 
The private event happens when the "Order now" button. 
Then the "$sp.sc_cat_item_submitted" happens when clicking the "check out" button. But this is all before the submission actually happens because if you put an alert in the this one it will pause the script and you can go an check to see if there are any new RITMs. And it won't be until you "ok" out of the alert. 

I'm not sure what you need to do but I hope this info helps.

[santoshsahoonis]

Thanks Chris,

This is exactly what I need. Let me check if it works as you suggested.

[santoshsahoonis]

Where/ How did you find these information ? 😄

[ChrisBurks]

You're welcome. I'm glad I could help.

I found this information by reading through the widget that renders a catalog item. I followed the trail of what happens when clicking the "Order now" button.
By doing an element inspect on the button you can see that it triggers the function called "triggerOnSubmit()"

From there I need to know which widget to look at so I do a CTRL + Click (Mac)/ CMD +Right-click (PC). This reveals the widget that is rendering. I click on one of the options to view the widget (I flip flop between "widget in editor" and "instance in page editor").

While in the editor I do a "Ctrl + F" to find the text "triggerOnSubmit()". I find that the function calls g_form.submit()

$scope.triggerOnSubmit = function(){
	$scope.data.sc_cat_item.item_action = "order";
	$scope.data.sc_cat_item.quantity = c.quantity;
	if (g_form)
	    g_form.submit();
}

and then search g_form. Within g_form I find that it listens to a private event before triggering one of three functions, getOne(), addToCart(), or updateCart() depending on what "action" is being performed, in this case getOne(). So, I thought can another widget in the same context listen for the same event.

var g_form;
$scope.$on('spModel.gForm.initialized', function(e, gFormInstance){
	g_form = gFormInstance;

	// This runs after all onSubmit scripts have executed
	g_form.$private.events.on('submitted', function(){
		if ($scope.data.sc_cat_item.item_action === "order")
			getOne();
		else if ($scope.data.sc_cat_item.item_action === "add_to_cart")
			addToCart();
		else if ($scope.data.sc_cat_item.item_action == "update_cart")
			updateCart();
	});
});

And of course I had to know what is in getOne(). Thus, followed that trail and found that it emits or sends an event out called "$sp.sc_cat_item.submitted" within the promise of post submittal. 

// order / create request
function getOne() {
	$scope.server.get({
		action: 'log_request',
		itemDetails: {sys_id: $scope.data.sc_cat_item.sys_id, 
		name: $scope.data.sc_cat_item.name,
		sys_class_name: $scope.data.sc_cat_item.sys_class_name}
	});

	if ($scope.data.sys_properties.twostep && $scope.data.sc_cat_item.sys_class_name != "sc_cat_item_producer") {
		$scope.server.get({
			cart: 'cart_' + $scope.data.sc_cat_item.sys_id,
			itemDetails: {
                             sys_id: $scope.data.sc_cat_item.sys_id, 
                             quantity: $scope.data.sc_cat_item.quantity, 
                             fields: getVarData($scope.data.sc_cat_item._fields), 
                             newRecordID: $scope.data._generatedItemGUID
                        },
			action: $scope.data.is_wishlist_item ? "order_wishlist_item" : "order_item"
		}).then(function(response) {
			var orderItemModalCtrl;
			var unregister = $scope.$on('$sp.service_catalog.cart.place_order', function(){
					orderItemModalCtrl.close();
				});

			var orderItemModal = angular.copy(response.data.orderItemModal);
			orderItemModal.options.afterOpen = function(ctrl){
				orderItemModalCtrl = ctrl;
			};
			orderItemModal.options.afterClose = function() {
				unregister();
				c.orderItemModal = null;
				orderItemModalCtrl = null;
			};
			c.orderItemModal = orderItemModal;
		});
	} else {
		postCatalogFormRequest().then(function(response) {
			var a = response.data.result;
			$scope.$emit("$$uiNotification", a.$$uiNotification);
			$scope.$emit("$sp.sc_cat_item.submitted", a);
			if ($scope.data.is_wishlist_item)
			    $rootScope.$broadcast("$sp.service_catalog.wishlist.update");
			
                        if (a.number)
			    handleRedirect(a.number, a.table, a.sys_id, a.redirect_to, a.redirect_portal_url);
			    $scope.submitting = false;
			    $scope.submitButtonMsg = $scope.m.submittedMsg;
		});
	}
}

After that it was a matter of testing and listening for those events within another widget to find out the process flow.