scratchpad:supercat_opac_example
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revision | |||
scratchpad:supercat_opac_example [2009/04/28 15:10] – miker | scratchpad:supercat_opac_example [2022/02/10 13:34] (current) – external edit 127.0.0.1 | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ==== Using Evergreen APIs for client-side bibliographic data rendering | ||
+ | === or Replacing result_detail.xml === | ||
+ | |||
+ | The following is a rough example of one mechanism available in Evergreen for displaying bibliographic data outside of the stock OPAC code. | ||
+ | |||
+ | |||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <script type=" | ||
+ | </ | ||
+ | < | ||
+ | </ | ||
+ | First, load Dojo, which is included in Evergreen 1.4.0 and beyond. | ||
+ | |||
+ | |||
+ | |||
+ | <code html> | ||
+ | <table border=1> | ||
+ | <tr> | ||
+ | |||
+ | < | ||
+ | <td type=" | ||
+ | <script type=' | ||
+ | if (item.getAttribute(' | ||
+ | return '< | ||
+ | } else { | ||
+ | return dojox.data.dom.textContent(item); | ||
+ | } | ||
+ | </ | ||
+ | </td> | ||
+ | </tr> | ||
+ | </ | ||
+ | Now we lay out some template slots that the bib data will be plugged into. This requires some extra explanation, | ||
+ | |||
+ | First, we need to mark the containing element (''< | ||
+ | |||
+ | Next we need to tell the query processor what to extract from the XML returned by the unapi service. | ||
+ | |||
+ | Finally, we may need to format the data in some special way. We do this by providing a chunk of Javascript that knows how to take the output of the '' | ||
+ | |||
+ | Two things to note about this ''< | ||
+ | |||
+ | By setting the '' | ||
+ | |||
+ | The block of code within this ''< | ||
+ | |||
+ | |||
+ | |||
+ | <code html> | ||
+ | <tr> | ||
+ | < | ||
+ | |||
+ | <td type=" | ||
+ | </tr> | ||
+ | </ | ||
+ | Here we see an example of a format other than '' | ||
+ | |||
+ | |||
+ | |||
+ | <code html> | ||
+ | <tr> | ||
+ | < | ||
+ | <td type=" | ||
+ | </tr> | ||
+ | </ | ||
+ | If no format is given, '' | ||
+ | |||
+ | |||
+ | |||
+ | <code html> | ||
+ | <tr> | ||
+ | < | ||
+ | |||
+ | <td type=" | ||
+ | </tr> | ||
+ | <tr> | ||
+ | < | ||
+ | <td type=" | ||
+ | <script type=' | ||
+ | return '< | ||
+ | dojo.query( | ||
+ | ' | ||
+ | item | ||
+ | ).map( | ||
+ | function(sf){ | ||
+ | return '< | ||
+ | } | ||
+ | ).join(' | ||
+ | '</ | ||
+ | </ | ||
+ | </td> | ||
+ | </tr> | ||
+ | </ | ||
+ | Here we see that by selecting nodes in the middle of the DOM tree (''< | ||
+ | |||
+ | |||
+ | <code html> | ||
+ | <tr> | ||
+ | < | ||
+ | <td> | ||
+ | <ul type=" | ||
+ | <script type=' | ||
+ | return '< | ||
+ | </ | ||
+ | </ul> | ||
+ | </td> | ||
+ | </tr> | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | And, finally, here's one way for dealing with the holidngs info appended to the bib by adding -full to the end of the format specifier. | ||
+ | |||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | |||
+ | dojo.addOnLoad( function() { | ||
+ | |||
+ | var all_slots = dojo.query(' | ||
+ | var rec = location.href.split('?' | ||
+ | |||
+ | var slots = {}; | ||
+ | all_slots.forEach(function(s){ | ||
+ | var datatype = ' | ||
+ | |||
+ | if (s.getAttribute(' | ||
+ | datatype = s.getAttribute(' | ||
+ | |||
+ | if (!slots[datatype]) slots[datatype] = []; | ||
+ | slots[datatype].push(s); | ||
+ | }); | ||
+ | |||
+ | for (var datatype in slots) { | ||
+ | _flesh_by_type_and_rec(slots[datatype], | ||
+ | } | ||
+ | }); | ||
+ | </ | ||
+ | This bit of Javascript sets the wheels in motion. | ||
+ | - Find all elements with a '' | ||
+ | - Get the target bib record id from the query section of the URL | ||
+ | - Group slots by their format | ||
+ | - For each format group, process all the slots | ||
+ | |||
+ | |||
+ | How does that processing happen? | ||
+ | |||
+ | <code html> | ||
+ | function _flesh_by_type_and_rec (slots, | ||
+ | dojo.xhrGet({ | ||
+ | url: '/ | ||
+ | handleAs: ' | ||
+ | load: function (bib) { | ||
+ | |||
+ | dojo.forEach(slots, | ||
+ | |||
+ | var slot_handler = dojo.query( | ||
+ | ' | ||
+ | slot | ||
+ | ).orphan().map( | ||
+ | function(x){return x.textContent || x.innerText || x.innerHTML} | ||
+ | ).join('' | ||
+ | | ||
+ | |||
+ | if (slot_handler) slot_handler = new Function(' | ||
+ | else slot_handler = new Function(' | ||
+ | |||
+ | slot.innerHTML += dojo.query( | ||
+ | slot.getAttribute(' | ||
+ | bib | ||
+ | ).map(slot_handler).join(' | ||
+ | |||
+ | delete(slot_handler); | ||
+ | |||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | This function takes the datatype and record id and makes an XHR request to the Evergreen unAPI service to retrieve the record in the required format. | ||
+ | |||
+ | And that's it. | ||