Service Portal - SC Catalog Item Submit Button Tweak

[Keith Morgan2]

Hello all,

I have cloned the SC Catalog Item widget with a view to making a change to the 'Submit' button.

From the Service Portal, when the end-user clicks it, I want the button text to change to 'Submitting...', rather than having the current line of code:

<span ng-if="submitting" style="padding-left:4px">${Submitting...}</span>

Now, my knowledge of JS is minimal, but I was able to do it by updating the 'triggerOnSubmit' coding in the Client Script to look like:

	$scope.triggerOnSubmit = function(){
		if ($scope.options.isServiceWorkspace && $window.frameElement) {
			var workspaceParams = {};
			workspaceParams.sysparm_parent_table = $window.frameElement.getAttribute('parent-table');
			workspaceParams.sysparm_parent_sys_id = $window.frameElement.getAttribute('parent-sys-id');
			$scope.data.workspaceParams = workspaceParams;
		}
		$scope.data.sc_cat_item.item_action = "order";
		$scope.data.sc_cat_item.quantity = c.quantity;
	
		var myButton = document.getElementById("submitButton");
		myButton.innerHTML = "Submitting....";
		
		if (g_form)
			return g_form.submit();
		return false;
	}

However, whilst this changes the button text, it does as soon as the button is clicked. It will change it even if there are mandatory fields that still need completing - and thus it cannot be submitted. It then stays as 'Submitting...' which is misleading and confusing.

Can anyone help me work out where, within the Client Script, I place the code to fulfil this requirement?

Many thanks in advance.

[Mark Roethof · Accepted solution]

Hi there,

You could influence the below part in your HTML Template:

<button ng-if="::c.showOrderNowButton()" tabindex="0" name="submit" ng-disabled="submitting || submitted" ng-click="triggerOnSubmit()" class="btn btn-primary">{{::submitButtonMsg}}</button>

Change:

::submitButtonMsg

Into:

submitButtonMsg

Then in your Client Script / Client Controller, just after:

// order / create request
function getOne() {

Add:

$scope.submitButtonMsg = 'Submitting...';

(you could enhance this further by adding Submitting... to the server script so you can make this multi-language)

Kind regards,
Mark

---

LinkedIn

[Keith Morgan2]

Mark,

Worked like an absolute charm.

My sincere gratitude to you.

Thanks