How to create a custom button on Service Portal

[Hari1]

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 · Accepted solution]

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

[Hari1]

Hi Mohith,

Thank you for the response. I have create a custom variable and have created a widget and have tagged that widget to the custom variable. As per the above steps described. But I don't see the field values being populated with the calculated values.

Widget:

Below is the variable:

Not sure where i am doing it wrong.

On the Record Producer I see the calculate button.

[Mohith Devatte]

Hello Hari can you please re attach the images they are broken and i am not able to see teh screenshots

[Hari1]

Hi Mohith,

Sure.

FYI. It is a custom scope not global scoped application.

Widget:

Variable:

On the Record Producer: