Widget to Get fields variables to display and calculate their totals, Please help!!!

[Peter Williams]

Good Morning everyone,

i created a custom widget with HTML code.

Its an expense form and i am not able to get the variables to display on the html and have their totals calculated.

here is a screen shot of it:

i would like to have the office value seen above to display in the amount section below and then the grand total

Same said for the other fields.

here is my code so far:
HTML:

<div ng-app="expenseApp" ng-controller="expenseCtrl" class="expense-table">
<table>
<thead>
<tr>
<th>Category</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Office</td>
<td>{{expenses.office_total}}</td>
</tr>
<tr>
<td>Client</td>
<td>{{expenses.client_total}}</td>
</tr>
<tr>
<td>Business</td>
<td>{{expenses.business_promotion_total}}</td>
</tr>
<tr>
<td>Grand Total</td>
<td>{{expenses.grandTotal}}</td>
</tr>
</tbody>
</table>
</div>

Client Script:

function($scope, $http) {
// Initialize the expense fields

$scope.expenses = {
office: parseFloat($scope.options.office_total) || 0.00, //office_total is the catalog item variable name and same for the others below
client: parseFloat($scope.options.client_total) || 0.00,
business: parseFloat($scope.options.business_promotion_total) || 0.00,
grandTotal: 0
};

// Calculate the Grand Total whenever any expense field is updated
$scope.calculateGrandTotal = function() {
$scope.expenses.grandTotal = $scope.expenses.office + $scope.expenses.client + $scope.expenses.business;
};

// Watch for changes in the expense fields and recalculate the Grand Total
$scope.$watch('expenses', function() {
$scope.calculateGrandTotal();
}, true);
}

please help!!!

[Amit Gujarathi]

HI @Peter Williams ,
I trust you are doing fine.

It sounds like you have created a custom widget for an expense form and are experiencing difficulties with displaying the variables and their totals in the HTML. I'll be happy to help you with this!

From the HTML code you provided, I see that you are using AngularJS to bind the variables to the view. To display the values of the variables, you need to make sure that they are defined in the $scope object of the controller.

In the client script you provided, I see that you have initialized the variables office, client, and business with the values of the corresponding catalog item variables. However, you have used different variable names in the HTML code (expenses.office_total, expenses.client_total, expenses.business_promotion_total).

To fix this, you need to update the HTML code to use the same variable names that you have defined in the client script. Here is the updated HTML code:

<div ng-app="expenseApp" ng-controller="expenseCtrl" class="expense-table">
  <table>
    <thead>
      <tr>
        <th>Category</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Office</td>
        <td>{{expenses.office}}</td>
      </tr>
      <tr>
        <td>Client</td>
        <td>{{expenses.client}}</td>
      </tr>
      <tr>
        <td>Business</td>
        <td>{{expenses.business}}</td>
      </tr>
      <tr>
        <td>Grand Total</td>
        <td>{{expenses.grandTotal}}</td>
      </tr>
    </tbody>
  </table>
</div>

In addition, you can update the client script to calculate the grand total whenever any of the expense fields is updated. Here is the updated client script:

function($scope, $http) {
  // Initialize the expense fields
  $scope.expenses = {
    office: parseFloat($scope.options.office_total) || 0.00,
    client: parseFloat($scope.options.client_total) || 0.00,
    business: parseFloat($scope.options.business_promotion_total) || 0.00,
    grandTotal: 0
  };

  // Calculate the Grand Total whenever any expense field is updated
  $scope.calculateGrandTotal = function() {
    $scope.expenses.grandTotal = $scope.expenses.office + $scope.expenses.client + $scope.expenses.business;
  };

  // Watch for changes in the expense fields and recalculate the Grand Total
  $scope.$watch('expenses', function() {
    $scope.calculateGrandTotal();
  }, true);

  // Watch for changes in the office field and update the total
  $scope.$watch('expenses.office', function(newValue, oldValue) {
    $scope.calculateGrandTotal();
  });

  // Watch for changes in the client field and update the total
  $scope.$watch('expenses.client', function(newValue, oldValue) {
    $scope.calculateGrandTotal();
  });

  // Watch for changes in the business field and update the total
  $scope.$watch('expenses.business', function(newValue, oldValue) {
    $scope.calculateGrandTotal();
  });
}

[Peter Williams]

Thank you for your reply but still not getting the information passed to the html code

I have created a catalog Item and not a record producer

should i be using the @$scope.options or should it be g_form.getValues?

[Peter Williams]

its something to do with this line of code:
$scope.expenses = {
office: parseFloat(g_form.getValue('office_total')) || 0.00,
client: parseFloat(g_form.getValue('client_total')) || 0.00,
business: parseFloat(g_form.getValue('business_promotion_total')) || 0.00,
grandTotal: 0.00
};

i added a static value in it and it displayed on the html side of the widget, however i am not able to get the values to be brought over from the fields on the catalog item form

[Peter Williams · Accepted solution]

I was able to figure it out.
I had 3 MRV's and i created the widgets to total all their values and have the results outputed to the HTML code.

Client controller code:

api.controller = function($scope) {
var g_form = $scope.page.g_form;

// Watch for changes in all three MRVs
$scope.$watchGroup([
function() {
return g_form.getValue('bill_office_mrv');
},
function() {
return g_form.getValue('clients_billing_mrv');
},
function() {
return g_form.getValue('business_promotion_mrv');
}
], function(newValues) {
var grandTotal = 0;
var office = 0;
var client = 0;
var business = 0;
for (var i = 0; i < newValues.length; i++) {
var mrvValue = newValues[i];
if (mrvValue) {
var jsonData = JSON.parse(mrvValue);
var amountFieldName = "";
if (i === 0) {
amountFieldName = "amount_bo"; // amount field name for bill_office_mrv
} else if (i === 1) {
amountFieldName = "amount_cb"; // amount field name for bill_client_mrv
} else if (i === 2) {
amountFieldName = "amount_bp"; // amount field name for bill_business_mrv
}

// Calculate the total for the current MRV
var total = 0;
for (var j = 0; j < jsonData.length; j++) {
var amountValue = parseFloat(jsonData[j][amountFieldName]) || 0;
total += amountValue;
}

// Add the current MRV's total to the grand total and respective variable
grandTotal += total;
if (i === 0) {
office = total;
} else if (i === 1) {
client = total;
} else if (i === 2) {
business = total;
}

// Set the total for the current MRV
var mrvTotalFieldName = "";
if (i === 0) {
mrvTotalFieldName = "total_bo"; // total field name for bill_office_mrv
} else if (i === 1) {
mrvTotalFieldName = "total_cb"; // total field name for bill_client_mrv
} else if (i === 2) {
mrvTotalFieldName = "total_bp"; // total field name for bill_business_mrv
}
g_form.setValue(mrvTotalFieldName, "$" + total.toFixed(2));
}
}

// Set the grand total and respective variable
g_form.setValue("grand_total", "$" + grandTotal.toFixed(2));
$scope.expenses = {
office: office.toFixed(2),
client: client.toFixed(2),
business: business.toFixed(2),
grandTotal: grandTotal.toFixed(2)
};
});
};