Auto-Expand Item Details

Developer

Wade Guidry, University of Washington

Description

This customization auto-expands items to make visible to the user all configured display fields.

The issue this customization addresses is users not knowing, or knowing how to, expand items to view additional info that may be useful to them.

Primo VE item record view, collapsed by default.
Before: Item details collapsed by default
Primo VE item record expanded
After: Item details expanded on load

System Components

Alma Discovery (VE), Customization Package

Skillset Requirements

Alma Discovery Customization Package, JavaScript

Accessibility

Not tested.

Browser Support

Tested on Chrome, Firefox, and Safari.

Mobile Support

Not tested.

Implementation Steps

Overview

  • Add ‘expand-items’ to your app variable in custom.js
  • Add the ‘expand-items’ module to your custom.js file
  • Save and deploy

Steps

  1. In your local package, in the custom.js file, include the module ‘expand-items’ in your app definition. For example:

    var app = angular.module('viewCustom', ['expand-items']);
  2. Also in the custom.js file, within the anonymous function, insert the code below:

    /* ====== Expand physical items in full display by default ===== */
    angular
    .module('expand-items', [])
    .component('prmLocationItemAfter', {
    bindings: { parentCtrl: '<' },
    controller: function ($timeout) {
    var ctrl = this;
    this.$onInit = function () {
    {
    $timeout(showDetails, 2000);
    function showDetails() {
    ctrl.parentCtrl.loc.isExpandAll = true;
    ctrl.parentCtrl.currLoc.items.forEach((item) => {
    item.isExpanded = true;
    });
    }
    }
    };
    }
    });
    /* ====== end expand-items ====== */

  3. Zip and upload your package in Alma Discovery. Save your view.