Add Custom Action

Created by

Paul Ojennus, Whitworth University

Nick Budak, formerly Lewis & Clark

Description

Add custom action such as report a problem, send text message, or view PNX to the “Send to” ribbon in Primo.

Example of a custom action in the Send To section of a Primo full record.

System Components

Alma Discovery (VE), Customization Package

Skill Set Requirements

Alma Discovery Customization Package, Javascript

Accessibility

Not tested

Browser Support

Chrome, Firefox, Safari

Implementation

Overview

  • Turn on inheritance from the Central Package.
  • Add “customActions” to your app variable.
  • Add code snippet describing your custom action to the main body of your custom.js file.

Steps

  1. Turn on inheritance from the Central Package.
  2. In your local custom.js file, add ‘customAction’ to your app variable near the top:

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

    If you are using other customizations, separate each one with a comma within the brackets:

    var app = angular.module('viewCustom', ['customActions', 'oadoi']);
  3. Below the “app” declaration (but before the  })(); at the end of the file), add a code snippet describing your custom action (this one is for querying Google Scholar by title):

    app.component('prmActionListAfter', {
    template: `<custom-action name="google_scholar"
    label="Google Scholar"
    index=1
    icon="ic_school_24px"
    icon-set="social"
    link= "https://scholar.google.com/scholar?hl=en&as_sdt=0%2C38&q={pnx.display.title}" ></custom-action>
    `
    })


    Your custom action should include the following components:
    1. name: a label within the html describing what it is
    2. label: the words that will appear in Primo describing the custom action
    3. index: the placement of your custom action within the row (0 is first, 1 is second, etc.)
    4. icon: the name of the icon from https://fonts.google.com/icons
    5. icon-set: the name of the icon-set category, also from https://fonts.google.com/icons
    6. link: the URL you are opening. You can insert parts of the PNX, like {pnx.search.recordid[0]} for dynamic URLs.
  4. You can add multiple custom actions: repeat the <custom-action> element in the template and assign a unique name to each action.
  5. Zip your customization package, and load it to Alma->Discovery->View Configuration->Manage Customization Package

Augmenting the Link with Additional Information

There may be cases where you want to add a custom action, but need data that is not available in the PNX record. In that case, you may need to augment the code in your local custom.js file to locate the additional information, and inject it into your URL.

The following example shows how to augment the code in step 3 to get additional data. This custom action provides a link to the PNX record, but the ‘context’ parameter is needed to construct the URL. The additional/relevant code is in bold:


app.component('prmActionListAfter', {
  template: `<custom-action name="open_pnx"
    label="View PNX"
    index=0
    icon="ic_school_24px"
    icon-set="action"
    link="/discovery/fulldisplay?context={{context}}&docid={pnx.control.recordid[0]}&vid=01ALLIANCE_LCC:LCCCP&showPnx=true" ></custom-action>
  `,
  controller: function($scope){
    var queryString = window.location.search;
    var context = urlParams.get('context')
    $scope.context=context;
  }
})

Since every case is likely unique, feel free to reach out to the Primo Customization Standing Group for help.