Our example will ask the user for two numbers, then add them when the user presses a button.

For example, is it part of circ? booking? cataloging? Today's example is under cataloging module.

Find the app.js for the appropriate module. The app.js files are in Open-ILS/web/js/ui/default/staff in the git repository, in /openils/var/web/js/ui/default/staff for installed systems.

Today, we'll add it to web/js/ui/default/staff/cat/catalog/app.js:

    $routeProvider.when('/cat/catalog/math', {
        templateUrl: './cat/catalog/t_add',
        controller: 'MathematicsCtrl',
        resolve : resolver
    });

This can be in the same js file as your route was. Here's one to add to web/js/ui/default/staff/cat/catalog/app.js:

.controller('MathematicsCtrl', ['$scope', 'egCore', function($scope, egCore) {
    $scope.firstNumber = 1;
    $scope.secondNumber = 6;
    $scope.add_things = function() {
        egCore.net.request('opensrf.math', 'add', $scope.firstNumber, $scope.secondNumber
        ).then(
            function(response) {
                $scope.sum = response;
            });
    }
}])

Look for an index.tt2 file that includes the JS file you were working on. Create a new file that begins with t_ in the same directory. Starting the template with t_ will add the Evergreen Web client header and other goodies from the index.tt2 file in the same directory. This includes the controller that you created during the last step.

The name and path to your new tt2 file should match the templateUrl you entered in your route. For example, if your templateUrl was ./cat/catalog/t_add, create a tt2 file at Open-ILS/src/templates/staff/cat/catalog/t_add.tt2 in the git repo or /openils/var/templates/staff/cat/catalog/t_add.tt2 in an installed system.

<form ng-submit="add_things()">
<label>[% l('First Number:')%] <input type="text" ng-model="firstNumber"></label>
<label>[% l('Second Number:')%] <input type="text" ng-model="secondNumber"></label>
<button type="submit" value="Add" class="btn btn-success" id="submit">[% l('Add')%]</button>
Sum: {{sum}}
</form>

It will be available at https://[DOMAIN_NAME]/eg/staff/cat/catalog/math

This example builds on the previous example of an addition screen by adding a button, which, when pressed, opens up a modal asking the user to confirm.

First of all, edit the controller to make sure it can access the egAlertDialog factory:

controller('MathematicsCtrl', ['$scope', 'egCore', 'egAlertDialog', function($scope, egCore, egAlertDialog) {

Then add a function to the controller that makes use of the factory:

$scope.provide_feedback = function() {
  egAlertDialog.open('I think so too!');
}

One problem with this example is that the text we entered ('I think so too!') is not translateable.

Here, we'll just add a simple button outside of the <form> that, when clicked, causes our alert to display:

<button ng-click="provide_feedback()" class="btn btn-default" id="feedback">
  [% l('I think Evergreen is cool!' %]
</button>

Note: Evergreen has several other built-in types of modals, such as egConfirmDialog, egPromptDialog, and egSelectDialog. You can find a complete list, as well as usage documentation, in this file: https://github.com/evergreen-library-system/Evergreen/blob/master/Open-ILS/web/js/ui/default/staff/services/ui.js