How to create a custom button on Service Portal

Hari1 · ‎07-20-2022

Hi,

I have a requirement to remove the existing "Submit" button on the portal and add a custom "Calculate" button on the service portal. I have a couple of fields on the record producer and once all the field values are filled and i click on the calculate button the i need to fill in couple of fields with the calculated value.

Currently i am able to achieve this using the catalog client script. But i need this to be done by using the calculate button.

Below is the existing client script. I am new to Portal and I have seen couple of blogs that says that we could achieve this using the portal widget but i have sure how that can be done.

var hours = 36;
var material = 28;
	
var labour = hours * 2;
var overHead = hours * 2;
	
var licence = parseInt(g_form.getValue('lic_cost'));
var fulfiller = parseInt(g_form.getValue('fulfiller'));
var support = parseInt(g_form.getValue('support'));
var totalServer = parseInt(g_form.getValue('total_servers'));
	
var overHead = (labour + material + overHead) * 12 * (licence + fulfiller + support + totalServer);
	
g_form.setValue('overhead_cost',overHead);

Thanks.

Mohith Devatte · ‎07-20-2022

Hello Hari,

1) Create a custom type variable in your record producer

2) Then create a widget and tag it to a "Custom" type variable like below

need to tag this widget in the custom variable that you have created

Widget Code:

<div>
  <button  type="button" class="btn btn-info btn-block" ng-click="calculateValue()">Calculate</button>

</div>

Client Controller:

api.controller=function($scope) {
	/* widget controller */
	var c = this;

	c.calculateValue = function() {
var g_form = $scope.page.g_form;
var hours = 36;
var material = 28;
var labour = hours * 2;
var overHead = hours * 2;
	
var licence = parseInt(g_form.getValue('lic_cost'));
var fulfiller = parseInt(g_form.getValue('fulfiller'));
var support = parseInt(g_form.getValue('support'));
var totalServer = parseInt(g_form.getValue('total_servers'));
	
var overHead = (labour + material + overHead) * 12 * (licence + fulfiller + support + totalServer);
	
g_form.setValue('overhead_cost',overHead);
			

		
	};
};

Please mark my answer correct if it helps you

View solution in original post

Mohith Devatte · ‎07-20-2022

Hello Hari,

are the alerts coming ?

every thing is executed but is it not setting the value ?

is this the issue?

please replace your HTML code with below

<div>
  <button  type="button" class="btn btn-info btn-block" ng-click="c.calculateValue()">Calculate</button>

</div>

Mark my answer correct if it helps you

Hari1 · ‎07-20-2022

Hi Mohith,

Yes, I don't even see the alert.

I believe that the function is not called and it is not even getting inside the function block.

Mohith Devatte · ‎07-20-2022

Hello did you replace the html logic which i mentioned above ?

<div>
  <button  type="button" class="btn btn-info btn-block" ng-click="c.calculateValue()">Calculate</button>

</div>

Hari1 · ‎07-20-2022

Hi, The one that you have added now has c.calculateValue. Earlier "c" was missing and we just had calculateValue(). It's working fine now. Thanks Mohith.

I do have 1 more question. Can't we add this button above/below the submit button that is on the right side of the screen on the record producer . As per the below snapshot.

Mohith Devatte · ‎07-20-2022

i would suggest do not touch it as the record producers and catalog item uses sc_cat_item widget which is OOB and very huge and at this point of time we can do but it takes long time to achieve it and also touching sc_cat_item widget was a scary night mare experience for me !

Anyways if my solution helped you please mark my answer correct and close the thread

Good Day!