Toggle Advanced Fields


Tamara Marnell, Central Oregon Community College


Add a button underneath the advanced search form that will toggle the display of “additional fields” (e.g., Material Type, Language, Publication Date). You can customize the label on the button and choose whether the button will appear for all screen resolutions or for mobile resolutions only (600px wide).

Show additional fields button in Primo advanced search.
Advanced search with additional material type fields.

System Components

PBO, Package Manager

Skill Set Requirements

PBO, JavaScript


Button has Aria labels, but has not been tested for accessibility.

Browser Support

Tested on Chrome, Firefox, Edge, IE11, and Safari

Mobile Support

Tested on Android and Apple phones

Implementation Steps

  1. In the PBO, make sure you have the “Inherit Central Package” box checked.
  2. In your local package, in the custom.js file, include the module ‘toggleAdvancedFields’ in your app definition. For example:

    var app = angular.module('viewCustom', ['toggleAdvancedFields']);

    If you are using other angular modules, include them in your app definition as well. For example:

    var app = angular.module('viewCustom', ['toggleInstitutions', toggleAdvancedFields']);
  3. Also in the custom.js file, add the following line of code within the anonymous function (that is, before the closing brackets at the end of the file):

    app.component('prmAdvancedSearchAfter', { template: '<toggle-advanced-fields />' });
  4. If you want to customize the display of the button, add the following block of code (also within the anonymous function) and edit the values.

    app.value('advancedFieldsOptions', {
        show_button_for: "mobile",
        show_label: "Show Additional Fields",
        hide_label: "Hide Additional Fields"

    For “show_button_for,” you can set the value to “mobile” (to hide the additional fields and show the button for screen widths less than 600px only), or “all” (to hide the fields and show the button for all screen widths)

    “show_label” and “hide_label” can be any text string you want to appear on the button.

    By default, the values are “mobile,” “Show Additional Fields,” and “Hide Additional Fields”
  5. The button has the ID “advancedFieldsButton” for styling with CSS.
  6. Zip and upload your package.
  7. Deploy your view.