integrating an API

Rijksmuseum API in Conzept

The easiest way to integrate a new API-endpoint is to copy a similar API-file from “app/explore2/src/fetch” and then making the necessary changes to it. You can choose how to present the results.

For some APIs you might want to render zoomable IIIF images, for others you may just want a “open in a new tab” link to a webpage. Some APIs support sorting options, others do not.

In general integrating an API involves the steps outlined below.

We'll use the Rijksmuseum API as an example. That API-file is located in “src/fetch/rijksmuseum.js”.

'rijksmuseum_inline' : {
  value: 'rijksmuseum:${item.title}:true', // API-arguments: name of the API in Conzept, title-string, if the API should be used  
  title: 'Rijksmuseum',
  prop: '0',         // required for all APIs 
  type: 'rest-json', // this indicates an API-endpoint
  mv: true,
  url: '',
  icon: 'fas fa-university',
  text: 'Rijks museum',
  section: 'art',
  rank: 70,
},
  • Add a line to “src/core/lib.js” in the insertMultiValues() function for that API. (note: in the future this step will be removed)
else if ( args.list.startsWith('rijksmuseum') ){

  fetchRijksmuseum( args, null, 1, 'relevance' ); // this calls the "fetchRijksmuseum()" function in "src/fetch/rijksmuseum.js"

  // fetchRijksmuseum( field-args, total-results, current-page, active-sorting-filter ) // the API-function call argument types

}
  • Copy a similar API-file from the “src/data/fetch” directory to your API-file, then modify to make it work as you want.
  • Test if the API integration works in Conzept, by viewing the results when you click on the field-link for a topic.