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

Answer

Creating a search box in Primo VE

ExLibris provides detailed instructions on creating a search box. Follow the link in the Links & Files section.

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.

<!-- 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.replace(/[,]/g, " ");
document.forms["searchForm"].submit();
}
</script>
 

Form

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

You must replace the following values:
 

<host_name>

This value equals https://suny-xxx.primo.exlibrisgroup.com where suny-xxx is your Alma ID.

 

<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.

 

<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.

 
<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()">
<!-- Customizable Parameters -->
<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="mode" value="basic">
<!-- Fixed parameters -->
<input type="hidden" name="displayMode" value="full">
<input type="hidden" name="bulkSize" value="10">
<input type="hidden" name="highlight" value="true">
<input type="hidden" name="dum" value="true">
<input type="hidden" name="query" id="primoQuery">
<input type="hidden" name="displayField" value="all">
<!-- Enable this if "Expand My Results" is enabled by default in Views Wizard -->
<input type="hidden" name="pcAvailabiltyMode" value="true">
<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>
 
Attached is a sample html document (primo_search.html). Note that the sample document has been setup for Buffalo State College and the values highlighted above will need to be changed to reflect your campus.
 
Also attached is a sample html document (advanced_primo_search.html) that features a more feature-rich search widget found on the ExLibris Developers Network.
 
All widget input elements may need to be styled to match your existing web environment.
 
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</label> 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 id="scopeSelecter" name="scopeSelecter" onchange="primoScopeSwitch(this)" aria-label="search options">

            <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" />
 
 
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.

Topics

  • Last Updated Jul 17, 2020
  • Views 4292
  • Answered By Michelle Eichelberger

FAQ Actions

Was this helpful? 10   1