Toggle Advanced Fields

Developer

Tamara Marnell, Orbis Cascade Alliance

Description

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

Advanced search with Show Additional Fields button and Material Type, Language, and Date fields hidden
Advanced search with Hide Additional Fields button and all fields shown

System Components

Alma Discovery Configure Views, JS

Skill Set Requirements

Alma Discovery Configure Views, JS

Accessibility

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

Browser Support

Tested on Chrome, Firefox, and Edge

Mobile Support

Tested on Android

Implementation

Overview

  • Declare the module (step 2)
  • Insert a declaration to inherit the code from the Central Package (step 3)
  • Customize options and styles (steps 4 and 5)

Steps

  1. Turn on inheritance from the Central Package.
  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']);
  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 in Alma Discovery. Save your view.