How do I embed a Primo search widget on my library webpage and how can I be sure that it's accessible?

Answer

Table of Contents:


Ex Libris provides instructions on creating a search box.

There are two main components, a script tag and a form.

Script tag

Place this script tag in the head or other applicable location. Some CMS may have a separate field for javascript or script tags. Note that you may need to paste this code into Notepad or another program before using it on your site. We're unable to post it here with the correct format because that would make LibGuides treat it as code.

<!-- Script that converts the query string into valid parameter -->
<script type="text/javascript">
function searchPrimo() {
document.getElementById("primoQuery").value = "any,contains," + document.getElementById("primoQueryTemp").value;
document.forms["searchForm"].submit();
}
</script>

Form

Place this form in the BODY tag where you want the box to appear on the page.

<!-- Fill in Highlighted Parameters -->
<form id="simple" name="searchForm" method="get" target="_self" action="https://<host_name>/discovery/search" enctype="application/x-www-form-urlencoded; charset=utf-8" onsubmit="searchPrimo()">
<input type="hidden" name="vid" value="<inst_code>:<view_code>">
<input type="hidden" name="tab" value="<tab_code>">
<input type="hidden" name="search_scope" value="<scope_name>">
<input type="hidden" name="lang" value="<2_char_lang_code>">
<input type="hidden" name="pcAvailability" value="XXXXX">
<!-- Fixed parameters -->
<input type="hidden" name="query" id="primoQuery">
<input type="text" id="primoQueryTemp" value="" size="35">
<!-- Search Button -->
<input id="go" title="Search" onclick="searchPrimo()" type="button" value="Search" alt="Search" style="height: 22px; font-size: 12px; font-weight: bold; background: #DE6E17; color: #ffffff; border: 1px solid;">
</form>

You must replace the highlighted values:

  • host_name: This value equals https://suny-xxx.primo.exlibrisgroup.com where suny-xxx is your Alma ID. E.g. https://suny-gcc.primo.exlibrisgroup.com
  • inst_code:view_code: This value should resemble 01SUNY_XXX:01SUNY_XXX (though you can have any name for a view code) where SUNY_XXX is your Alma ID. Find this value in Configuration > Discovery > Display Configuration > Configure Views under the code heading. e.g. 01SUNY_GCC:01SUNY_GCC
  • tab_code: This value is the search profile slot you wish to use, probably Everything. Find this value in Configuration > Discovery > Display Configuration> Configure Views > Edit > Search Profile Slots under the code heading.
  • scope_name: This value is the search profile, if you used Everything as the tab_code, this value is probably MyInst_and_CI Find this value in Configuration > Discovery > Display Configuration - Configure Views > Edit > Search Profile Slots under the search profiles heading.
  • 2_char_lang_code: default is en, so you may not even need this line, but Ex Libris recommends it in their documentation
  • pcAvailability: Use this to change whether the widget leads the patrons to your expanded (full-text + non full-text) results, or only full-text results. Counterintuitively, you'd enter false for filtered results and true for expanded

See the primo_search_html.txt attachment for an example of widget code from Buffalo State University.


Advanced Options:

You can add other features to your widget:

  • mode is only needed if you want your search to start as an Advanced search. (&mode=advanced) or <input type="hidden" name="mode" value="advanced">
  • offset is only used when paging through results, and is not needed when generating a search from a search box. The default behavior will be used, which will start with the 1st result. (&offset=0)
  • You could allow your patrons to pick the scope that they'd like to search - see the multiple_tabs_searchbox attachment
  • Logan Rath designed a basic and an advanced journal search. See attachments.
  • ​Nancy Babb at University at Buffalo figured out how to create multiple widgets on a page using different names/ids. See attached multiple widget pdf file.
  • Note that all widget input elements may need to be styled to match your existing web environment.
  • If you plan to add this code to LibGuides, best practice is to add it as a Media/Widget asset rather than paste it into a Rich Text box source code.

Accessibility:

If you run this widget through an accessibility checker, you'll notice that you're missing form labels. Here are a few suggestions:

  • Add the <label>text tags around your option values
  • Add an aria-label to your scope selector if you use one
  • Add an aria-label to your text input code

Examples:

<select aria-label="search options" id="scopeSelecter" name="scopeSelecter" onchange="primoScopeSwitch(this)">

<option value="Everything"><label>Almost Everything</label></option>

<option value="Library Catalog"><label>ASC Library Holdings</label></option>

<option value="CentralIndex"><label>Articles</label></option> </select>

<input id="primoQueryTemp" size="35" type="text" value="" aria-label="Search" />

For more information, see https://www.w3.org/WAI/tutorials/forms/labels/

Topics

  • Last Updated Sep 08, 2023
  • Views 9374
  • Answered By Michelle Eichelberger

FAQ Actions

Was this helpful? 19 1