User Tools

Site Tools


dev:browser_staff:examples

This is an old revision of the document!


Examples of developing for the Web client

Minimum Working Example: Screen that gets data from OpenSrf

Decide on the requirements and UI of your new screen

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

Decide which Evergreen module your screen is part of

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

Add a route for your screen

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
    });

Create a controller for your screen

This can be in the same js file as your module 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;
            });
    }
}])

Create a tt2 template for your screen

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>First Number: <input type="text" ng-model="firstNumber"></label>
<label>Second Number: <input type="text" ng-model="secondNumber"></label>
<button type="submit" value="Add" class="btn btn-success" id="submit">Add</button>
Sum: {{sum}}
</form>
dev/browser_staff/examples.1522683238.txt.gz · Last modified: 2022/02/10 13:34 (external edit)

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.