With our new mobilecaddy1__Expense_Type__c field available on SFDC we now want to update our client code to make use of this field. We will make changes to 2 areas of code;
- The UI Template – To display an input for this new field on the Create New Expense screen of our application.
- The associated angular controller that handles the submission of a new expense.
Firstly we want to run make sure that we are running our application with the mobilecaddy serve command, if you are not then move to the directory root of your project and run the following command.
|
1 2 3 |
mobilecaddy serve |
Not only will this start our application but it will also start a grunt watch task on our working files. This means that any change to our code will result in JS task manager running a useful set of tasks. These include the following if they are needed;
- JS Hinting on our JS
- SASS processing
- File copying
- Application bundle creation
Updating the UI Template
Add the highlighted lines below to the www/templates/projectTimeExpNew.html template file. The additional lines are just adding markup to show an HTML label and an input element that are associated to the expenseType angular value.
|
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
... ... <span ng-switch-when="Expense"> <label class="item item-input item-stacked-label"> <span class="input-label">Description</span> <input name="description" ng-model="description" type="text" placeholder="What did you spend money on?" /> </label> <label class="item item-input item-stacked-label"> <span class="input-label">How much was it?</span> <input name="expenseValue" ng-model="expenseValue" type="number" /> </label> <label class="item item-input item-stacked-label"> <span class="input-label">Expense Type</span> <input name="expenseType" ng-model="expenseType" type="text" /> </label> </span> ... ... |
Updating our Controller
The controller for new expenses (NewExpenseCtrl) includes a submitForm function that creates a new varNewExp object and calls our ProjectService’s newExpense function, passing this object in. Add a single line (as highlighted below) to the www/js/controllers/newExpense.controller.js file to use this new value from the HTML form and pass it into the object that would end up being inserted into the SmartStore.
|
29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
$scope.submitForm = function() { var newExp = { "mobilecaddy1__Short_Description__c": $scope.expenseForm.description.$modelValue, "Name": 'TMP-' + Date.now(), "mobilecaddy1__Project__c": $stateParams.projectId }; switch ($stateParams.type) { case 'time' : newExp.mobilecaddy1__Duration_Minutes__c = $scope.expenseForm.expenseValue.$modelValue; break; default : newExp.mobilecaddy1__Expense_Amount__c = $scope.expenseForm.expenseValue.$modelValue; newExp.mobilecaddy1__Expense_Type__c = $scope.expenseForm.expenseType.$modelValue; } ... ... ... ... |