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:30] – [NetService example] sandbergja | newdevs:angular_making_calls [2024/03/28 23:16] (current) – [NetService example] sandbergja | ||
---|---|---|---|
Line 81: | 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 109: | 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.1691548233.txt.gz · Last modified: 2023/08/08 22:30 by sandbergja