the Librarian

Ex Libris Primo VE Dropdown Widget

What Was the Problem with the Primo VE Widget?

We were noticing that after the search terms were being entered into the widget, the drop-down choice would bounce back to a default choice (often the first choice in the list) for those of us who were using a drop down widget with Primo VE on our library web pages. The fix outlined below forces the drop down choice to "stick" and shows your choice on the next page of the search results. 


Paste Both the HTML and the Javascript into Your Source

In order to use the widget fix I've created, you have to use both the HTML and the Javascript I've included in the gist I've linked here on GitHub. There are some small tweaks in the HTML that allow the Javascript to "hold on" to the elements in the drop-down menu and make sure those choices take hold. 

Javascript to the rescue

Javascript to the rescue

unsplash-logoEugen Str

So, How Does This Fix the Widget? 

The choice from the drop-down wasn't sticking because one choice was hard coded to remain no matter what the user picked. Back in December we were advised to remove two lines of HTML code that were forcing the widget to choose the "Library Catalog" tab each time. These lines were:

<input type="hidden" name="tab" value="LibraryCatalog">

<input type="hidden" name="mode" value="Basic">

Interestingly, the drop-down started to "stick" to the choices we were using, but the filters within Primo VE had completely broken. On the Primo VE results page, the side bar filters were bugged out, gone. This was a clue to me that Primo VE was dependent on those lines of code in order to show us the filters on the main search page.


The part of the widget that was working was 'primoScope,' which would output the drop-down choice each time, but there was another parameter named 'tab'. By default 'tab' was being assigned to one of the scope values but was never updated when the drop-down value was changed.


<input name="tab" value="Everything" type="hidden">

Code was added to allow this parameter to be changed via the Javascript command, .getElementById after the drop-down was selected. This code looked at the drop-down value and then updated the tab value based on what was selected. At our institution, Shoreline Community College, I discovered that the tab values were not the same as the names of the tabs and it took me a few tries to guess the naming of these values.


I believe the values match up with the values of the "scopes" within the Alma dashboard settings, which I did not know at the time I was working on this widget. The possible values for tab and scope were not the same and so tab could not merely be set to the current scope for every option. Special cases needed to be made for the 'MyInstituion' and 'MyInst_and_CI' dropdown values to be set to their specific tab values. I used a "switch" statement to force equivalent "MyInst_and_CI" with "Everything," which is the actual value that gave the user the central index and catalog search results in Primo. Otherwise the tab was updated to the scope value, or the exact same value that is seen in the drop-down menu which in the other few cases matched exactly with the value.

function searchPrimo() {
document.getElementById("primoQuery").value = "any,contains," + document.getElementById("primoQueryTemp").value.replace(/[,]/g, " ");

var dropdownValue = document.getElementById("primoScope").value;
var tabValue;
switch (dropdownValue){
    case "MyInstitution":
        tabValue = "LibraryCatalog";
    case "MyInst_and_CI":
        tabValue = "Everything";
        tabValue = dropdownValue;