dev:browser_staff:examples
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
dev:browser_staff:examples [2018/06/04 11:32] – [Edit the controller] clarifying that the fielder flattened search and the json_query formats are a little different sandbergja | dev:browser_staff:examples [2023/06/01 13:20] (current) – [Edit the tt2 template] master to main dyrcona | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== Examples of developing for the Web client ====== | ====== Examples of developing for the Web client ====== | ||
+ | ===== Angular ===== | ||
- | ===== Minimum Working Example: | + | ==== Minimum Working Example: |
- | ==== Planning ==== | + | === Create a new component |
- | === Decide on the requirements and UI of your new screen | + | Components are the building blocks of the Angular staff client. |
+ | |||
+ | To start with, we will create a super simple component that just displays the words " | ||
+ | |||
+ | Inside your folder, create a file called eg-math.component.ts with the following content: | ||
+ | |||
+ | < | ||
+ | |||
+ | @Component({ | ||
+ | template: '< | ||
+ | }) | ||
+ | export class EgMathComponent { | ||
+ | }</ | ||
+ | |||
+ | === Add your component to a module === | ||
+ | |||
+ | Next, components have to be grouped into modules -- basically collections of similar components. | ||
+ | |||
+ | |||
+ | < | ||
+ | import {EgMathComponent} from ' | ||
+ | import {RouterModule, | ||
+ | |||
+ | |||
+ | const routes: Routes = [{ | ||
+ | path: ' | ||
+ | component: EgMathComponent | ||
+ | }]; | ||
+ | |||
+ | |||
+ | @NgModule({ | ||
+ | imports: [RouterModule.forChild(routes)], | ||
+ | exports: [RouterModule], | ||
+ | declarations: | ||
+ | }) | ||
+ | export class MathModule { }</ | ||
+ | |||
+ | === Add your module to the Staff router === | ||
+ | |||
+ | Finally, it's time to let the rest of Evergreen' | ||
+ | |||
+ | < | ||
+ | path: ' | ||
+ | loadChildren: | ||
+ | },</ | ||
+ | |||
+ | Re-compile, the client, and you should see your brand new screen at https:// | ||
+ | |||
+ | === Add another component with an OpenSRF call === | ||
+ | |||
+ | Create a new .ts file in Open-ILS/ | ||
+ | |||
+ | < | ||
+ | import {Component, OnInit} from ' | ||
+ | import {NetService} from ' | ||
+ | |||
+ | @Component({ | ||
+ | selector: ' | ||
+ | templateUrl: | ||
+ | }) | ||
+ | export class AdderComponent implements OnInit { | ||
+ | sum: number = 0; | ||
+ | addTwoNumbers: | ||
+ | |||
+ | constructor( | ||
+ | private net: NetService | ||
+ | ){} | ||
+ | |||
+ | ngOnInit() { | ||
+ | this.addTwoNumbers = (first: number = 0, second: number = 0) => { | ||
+ | this.net.request( | ||
+ | ' | ||
+ | ' | ||
+ | first, second) | ||
+ | .subscribe(response => this.sum = response); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | This has some differences from our first one. First of all, it has a selector, which means that we can include it in other components by saying < | ||
+ | |||
+ | < | ||
+ | <label i18n> | ||
+ | <label i18n> | ||
+ | <button (click)=" | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | Let's update our module to let it know about the new component: | ||
+ | |||
+ | < | ||
+ | import {EgMathComponent} from ' | ||
+ | import {AdderComponent} from ' | ||
+ | import {RouterModule, | ||
+ | |||
+ | |||
+ | const routes: Routes = [{ | ||
+ | path: ' | ||
+ | component: EgMathComponent | ||
+ | }]; | ||
+ | |||
+ | |||
+ | @NgModule({ | ||
+ | imports: [RouterModule.forChild(routes)], | ||
+ | exports: [RouterModule], | ||
+ | declarations: | ||
+ | }) | ||
+ | export class MathModule { }</ | ||
+ | |||
+ | Finally, let's update our first component' | ||
+ | ===== AngularJs ===== | ||
+ | |||
+ | ==== Minimum Working Example: Screen that gets data from OpenSrf ==== | ||
+ | |||
+ | === Planning === | ||
+ | |||
+ | == 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. | 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 === | + | == Decide which Evergreen module your screen is part of == |
For example, is it part of circ? booking? cataloging? | For example, is it part of circ? booking? cataloging? | ||
- | ==== Creating your screen | + | === Creating your screen === |
- | === Add a route for your screen | + | == Add a route for your screen == |
Find the app.js for the appropriate module. | Find the app.js for the appropriate module. | ||
Line 29: | Line 147: | ||
</ | </ | ||
- | === Create a controller for your screen | + | == Create a controller for your screen == |
This can be in the same js file as your route was. Here's one to add to '' | This can be in the same js file as your route was. Here's one to add to '' | ||
Line 47: | Line 165: | ||
</ | </ | ||
- | ===Create a tt2 template for your screen=== | + | ==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 '' | Look for an index.tt2 file that includes the JS file you were working on. Create a new file that begins with '' | ||
Line 62: | Line 180: | ||
</ | </ | ||
- | ===Test your screen=== | + | ==Test your screen== |
It will be available at https:// | It will be available at https:// | ||
- | =====Add a popup modal to your screen===== | + | ====Add a popup modal to your screen==== |
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. | 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. | ||
- | ====Edit the controller==== | + | ===Edit the controller=== |
First of all, edit the controller to make sure it can access the egAlertDialog factory: | First of all, edit the controller to make sure it can access the egAlertDialog factory: | ||
Line 81: | Line 199: | ||
}</ | }</ | ||
- | ====Add your string to egCore.strings==== | + | ===Add your string to egCore.strings=== |
We want to be able to translate the egAlertDialog text to the language that the user prefers. | We want to be able to translate the egAlertDialog text to the language that the user prefers. | ||
Line 90: | Line 208: | ||
s.SHARE_YOUR_OPINION = "[% l('I think so too!') %]"; | s.SHARE_YOUR_OPINION = "[% l('I think so too!') %]"; | ||
</ | </ | ||
- | ====Edit the tt2 template==== | + | ===Edit the tt2 template=== |
Here, we'll just add a simple button outside of the < | Here, we'll just add a simple button outside of the < | ||
Line 100: | Line 218: | ||
</ | </ | ||
- | Note: Evergreen has several other built-in types of modals, such as egConfirmDialog, | + | Note: Evergreen has several other built-in types of modals, such as egConfirmDialog, |
- | =====Add an egGrid to your screen===== | + | ====Add an egGrid to your screen==== |
One of the best ways to present tabular data in Evergreen is to use an egGrid. | One of the best ways to present tabular data in Evergreen is to use an egGrid. | ||
- | ====Edit the controller==== | + | ===Edit the controller=== |
First of all, edit the controller to make sure it can access the egGridDataProvider factory: | First of all, edit the controller to make sure it can access the egGridDataProvider factory: | ||
Line 123: | Line 241: | ||
The query is in a [[https:// | The query is in a [[https:// | ||
- | ====Edit the tt2 template==== | + | ===Edit the tt2 template=== |
Here, we'll add an eg-grid directive with some additional configuration options: | Here, we'll add an eg-grid directive with some additional configuration options: | ||
Line 141: | Line 259: | ||
The '' | The '' | ||
+ | |||
+ | ====Populate a dropdown menu using Permacrud==== | ||
+ | |||
+ | ===Edit the controller=== | ||
+ | |||
+ | This example uses a simple `retrieveAll` call. If you want to be more selective about the records you pull in, you can put filters, sorting, fleshing, etc. inside the second argument. | ||
+ | < | ||
+ | egCore.pcrud.retrieveAll(' | ||
+ | function(list) { | ||
+ | $scope.best_hold_order_list = list; | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | ===Edit the tt2 template=== | ||
+ | |||
+ | Add the following to your template: | ||
+ | |||
+ | < | ||
+ | <select ng-model=" | ||
+ | </ |
dev/browser_staff/examples.txt · Last modified: 2023/06/01 13:20 by dyrcona