newdevs:angular_making_calls
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
newdevs:angular_making_calls [2023/08/08 22:27] – [PcrudService example] sandbergja | newdevs:angular_making_calls [2024/03/28 23:16] (current) – [NetService example] sandbergja | ||
---|---|---|---|
Line 25: | Line 25: | ||
Let's start out with a simple PcrudService request: | Let's start out with a simple PcrudService request: | ||
- | // Create a new object in memory with the required information | + | /* Create a new object in memory with the required information |
- | // | + | * |
- | // | + | * The " |
- | // | + | * table in the database. |
- | // | + | * the fm_IDL.xml file. |
+ | */ | ||
const note = this.idl.create(' | const note = this.idl.create(' | ||
note.staff(' | note.staff(' | ||
Line 41: | Line 42: | ||
this.pcrud.create(note) | this.pcrud.create(note) | ||
| | ||
- | // Pcrud calls are asynchronous, | + | /* Pcrud calls are asynchronous, |
- | // | + | * block other work that the browser needs to do in |
- | // | + | * the staff client. |
- | // | + | * |
- | // | + | * The following alert will happen once the PcrudService |
- | // | + | * receives a message back from OpenSRF |
+ | | ||
.subscribe(() => { alert(' | .subscribe(() => { alert(' | ||
Line 60: | Line 62: | ||
this.net.request( ' | this.net.request( ' | ||
' | ' | ||
- | // This OpenSRF method takes two parameters: the user's token and | + | /* This OpenSRF method takes two parameters: the user's token and |
- | // | + | * an array of item IDs to make bookable |
+ | */ | ||
this.auth.token(), | this.auth.token(), | ||
// Like the PcrudService, | // Like the PcrudService, | ||
.subscribe(() => { alert(' | .subscribe(() => { alert(' | ||
| | ||
- | // Since the previous alert has to wait until a communication | + | /* Since the previous alert has to wait until a communication |
- | // | + | * comes back from OpenSRF, the following alert will almost |
- | // | + | * certainly appear to the user before the |
- | // | + | * 'Those items are bookable now' alert. |
+ | */ | ||
alert(' | alert(' | ||
| | ||
Line 77: | Line 81: | ||
===== Reading data from the database ===== | ===== Reading data from the database ===== | ||
- | Examples coming soon | + | ==== PcrudService example ==== |
+ | |||
+ | | ||
+ | // The IDL class we want to search: this is shelving locations | ||
+ | ' | ||
+ | // The filters we want to pass (the SQL WHERE clause). | ||
+ | // This uses the | ||
+ | | ||
+ | ).subscribe((location) => console.log(location.name())); | ||
+ | |||
+ | Each shelving location is considered to be a different RxJS event, so the above | ||
+ | code will log each shelving location to the console separately. | ||
+ | to wait for them to finish and log them all at once in an array, you can do so | ||
+ | with the RxJS toArray operator: | ||
+ | |||
+ | this.pcrud.search( | ||
+ | ' | ||
+ | {opac_visible: | ||
+ | ).pipe(toArray() | ||
+ | ).subscribe((locations) => { | ||
+ | // Only log the name field, not the whole object | ||
+ | console.log(locations.map((location) => location.name())) | ||
+ | }); | ||
+ | |||
+ | |||
+ | |||
+ | More information about the JSON query syntax is [[documentation: | ||
+ | |||
+ | The above assumes that you have injected the '' | ||
+ | |||
+ | ==== NetService example ==== | ||
+ | |||
+ | Some interfaces need data in very specific formats, or need to use complicated JOINs | ||
+ | when querying the database. | ||
+ | OpenSRF method in Perl and use the angular NetService to call it. In this example, | ||
+ | we're calling the ' | ||
+ | ton of information about the purchase order with ID #1. Refer to the OpenSRF method' | ||
+ | documentation to know which parameters you need to send with your request. | ||
+ | |||
+ | this.net.request( | ||
+ | ' | ||
+ | ' | ||
+ | this.auth.token(), | ||
+ | 1, { | ||
+ | flesh_provider: | ||
+ | flesh_notes: | ||
+ | flesh_po_items: | ||
+ | flesh_po_items_further: | ||
+ | flesh_price_summary: | ||
+ | flesh_lineitem_count: | ||
+ | } | ||
+ | ).subscribe(po => console.log(po)); | ||
+ | |||
+ | The above assumes that you have injected the '' | ||
===== Updating data in the database ===== | ===== Updating data in the database ===== | ||
+ | ==== PcrudService example ==== | ||
- | Examples coming soon | + | The basic workflow for updating data in the database is to: |
+ | - Retrieve the object you wish to change. | ||
+ | - Make your changes in memory. | ||
+ | - Use the Pcrud service' | ||
+ | |||
+ | The following example retrieves the item with ID #1, changes its barcode to 1234567 in memory, then saves the updated barcode to the database: | ||
+ | |||
+ | this.pcrud.retrieve(' | ||
+ | .pipe(switchMap((item) => { | ||
+ | item.barcode(' | ||
+ | return this.pcrud.update(item); | ||
+ | })).subscribe(); | ||
+ | |||
+ | Notice that we use the rxjs '' | ||
+ | |||
+ | |||
+ | ==== NetService example ==== | ||
+ | |||
+ | Here is an example of refreshing the contents of an automatically-generated carousel (the one with ID 201): | ||
+ | |||
+ | this.net.request(' | ||
+ | ' | ||
+ | this.auth.token(), | ||
+ | 201).subscribe(() => { | ||
+ | alert(' | ||
+ | }); | ||
===== Deleting data in the database ===== | ===== Deleting data in the database ===== | ||
- | Examples coming soon | + | ==== PcrudService example ==== |
+ | As with updating objects, you will need to retrieve an object and have a copy in memory before you can delete it. The following example searches for all shelving locations called " | ||
+ | |||
+ | this.pcrud.search(' | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | |||
+ | ==== NetService example ==== | ||
+ | |||
+ | Here's an example of deleting record bucket #13 from the database, along with all its bucket entries (assuming the currently logged in user has the DELETE_CONTAINER permission): | ||
+ | |||
+ | | ||
+ | ' | ||
+ | this.auth.token(), | ||
+ | ' | ||
+ | 13).subscribe(() => { | ||
+ | alert(' | ||
+ | }); | ||
===== Troublsehooting OpenSRF calls in your browser ===== | ===== Troublsehooting OpenSRF calls in your browser ===== | ||
Line 105: | Line 208: | ||
- On the response tab, you will see a list of all traffic that happened within the websocket. | - On the response tab, you will see a list of all traffic that happened within the websocket. | ||
+ | ==== Chrome, Edge, and other Chromium-based browsers ==== | ||
+ | |||
+ | - Open [[https:// | ||
+ | - Open the Network tab | ||
+ | - Perform the action in the UI that you are troubleshooting (e.g. navigate to the screen you are working on, press the button that is causing problems, etc.) | ||
+ | - In the devtools, press the WS button to limit to Websockets traffic. | ||
+ | - Select the websocket request from the list of requests. | ||
+ | - On the messages tab, you will see a list of all traffic that happened within the websocket. | ||
newdevs/angular_making_calls.1691548048.txt.gz · Last modified: 2023/08/08 22:27 by sandbergja