Created by

• Tamara Marnell, Orbis Cascade Alliance
• Wade Guidry, University of Washington

Description

In the February 2023 feature release, the chevron button to toggle the advanced search fields open and closed moved to the top right of the form, with no label. This customization adds a label to the button controlled either by a row in the Search Tile Labels table or by static values defined for the open and closed states of the form.

System Components

Alma Discovery (VE), Customization Package

Skill Set Requirements

JavaScript

Accessibility

Not tested

Browser Support

Chrome, Firefox, Edge

Mobile Support

Android, iOS

Implementation

Overview

• Add the module to the custom.js file in your customization package
• Optionally add labels to a code table in Primo VE
• Style the button with the custom1.css file in your customization package
• Zip package, and load to view via Alma Discovery

Steps

Variation 1: Label Controlled by Code Table

1. Within the anonymous function of your custom.js file, add the “advancedSearchChevron” module to the dependencies in your app variable.

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

2. Add the search-chevron custom element to the prm-icon-after component.

app.component('prmIconAfter', {template: '<search-chevron></search-chevron>'});

If you’ve used the prm-icon-after component for other customizations, add search-chevron to the existing template.

app.component('prmIconAfter', {template: '<badges-modal></badges-modal><search-chevron></search-chevron>'});

3. Define the advancedSearchChevron module with the following code.

angular
  .module('advancedSearchChevron', [])
  .component('searchChevron', {
  // Note: Add nui.search-advanced.chevron as a custom row in Search Tile Labels
    template: '<chevron-label ng-if="$ctrl.showLabel"><span translate="nui.search-advanced.chevron"></span></chevron-label>',
    controller: function ($scope) {
      this.$onInit = function() {
        this.showLabel = false;
        // Show the label if this icon is chevron-up and if the parent's controller contains the advancedSearch service
        if (angular.isDefined($scope.$parent.$parent)) {
          var icon = $scope.$parent.$parent;
          if ((icon.$ctrl.iconDefinition == 'chevron-up') && (angular.isDefined(icon.$parent.$parent.$ctrl))) {
              var search_ctrl = icon.$parent.$parent.$ctrl;
              this.showLabel = angular.isDefined(search_ctrl.advancedSearchService);
            }
          }
        }
      }
    }
  });

4. Within the Discovery section of Primo VE, add a new row to the Search Tile Labels table with the code “nui.search-advanced.chevron”. The value of this label will display on the chevron button in Primo VE.

You can additionally define labels in other languages for the same code.

5. Depending on the length of the label, the button can “crowd” the form on mobile devices. To mitigate this, the label can be hidden on smaller screen resolutions using your custom1.css file. Example:

@media screen and (max-width: 479px) {
  search-chevron {
    display: none;
  }
}

6. Zip, upload, and save your customization package in Primo VE.

Variation 2: Different Static Labels for Open and Closed States

This code variation for Step #3 implemented by Wade Guidry at the University of Washington displays different labels depending on the state of the form. Rather than a span element with a “translate” attribute to be controlled by the code tables, the template in this module populates the label with the result of a function that prints “Show Search Fields” when the form is collapsed and “Hide Search Fields” when the form is expanded. Key differences are in bold, below.

angular
  .module('advancedSearchChevron', [])
  .component('searchChevron', {
    template: '<chevron-label ng-if="$ctrl.showLabel">{{$ctrl.getLabel()}}</chevron-label>',
    controller: function ($scope) {
      this.$onInit = function() {
        this.showLabel = false;
        // Show the label if this icon is chevron-up and if the parent's controller contains the advancedSearch service
        if (angular.isDefined($scope.$parent.$parent)) {
          var icon = $scope.$parent.$parent;
          if ((icon.$ctrl.iconDefinition == 'chevron-up') && (angular.isDefined(icon.$parent.$parent.$ctrl))) {
            var search_ctrl = icon.$parent.$parent.$ctrl;
            this.showLabel = angular.isDefined(search_ctrl.advancedSearchService);
            this.getLabel = function() {
              return (search_ctrl.advancedSearchCollapsed ? 'Show Search Fields' : 'Hide Search Fields');
            }
          }
        }
      }
    }
  });