alliance-pcsg / primo-explore-custom-actions Goto Github PK

View Code? Open in Web Editor NEW

15.0 9.0 7.0 361 KB

:hammer_and_wrench: easily add custom actions to primo-explore's actions menu.

License: MIT License

JavaScript 97.49% Shell 2.51%

primo-explore angularjs

primo-explore-custom-actions's Introduction

primo-explore-custom-actions

Features

Custom links can be added to the actions menu visible on Primo brief results and full display. Links can extract properties of the item's PNX record and apply them to the link URL.

Screenshot

Install

Make sure you've installed and configured primo-explore-devenv.
Navigate to your template/central package root directory. For example:
```
cd primo-explore/custom/MY_VIEW_ID
```
If you do not already have a package.json file in this directory, create one:
```
npm init -y
```

Install this package:

npm install primo-explore-custom-actions --save

Alternatively, just copy the contents of dist/module.js into your custom.js file.

Usage

Once this package is installed, add customActions as a dependency for your custom module definition.

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

Note: If you're using the --browserify build option, you will need to first import the module with:

import 'primo-explore-custom-actions';

You can add new actions by adding <custom-action> elements to the template of prmActionListAfter. Each element needs the properties below:

name	type	usage
`name`	string	a short, unique name for the action. don't include whitespace characters.
`label`	string	the name that will display on the action button. whitespace ok.
`index`	integer	where to insert the action. 0 would be "first", 1 would be "second", etc.
`icon`	string	the icon on the button. must be chosen from https://material.io/icons/. should be in the form "ic_icon_name_with_underscores_24px". some icons may not display.
`icon-set`	string	the set of icons from which the above icon is drawn.
`link`	string	URL to open when the action is clicked. supports templating (see below).

Templating

You can create interpolation expressions using { } in the link text and they will be replaced with corresponding values taken from the item - for example, {pnx.control.recordid[0]} would become the recordID of the item, taken from the pnx.

Example

The example below will generate a configuration similar to that visible in the screenshot above. It adds a "report problem" link that will navigate to the institution's "report problem" form and append the record ID as a GET parameter, and a link that will open the given record's PNX for viewing.

Update 2020-08-18: The previous example node for record IDs, pnx.search.recordid[0], contains long random strings for CDI records instead of the ID used in permalinks. PCSG suggests using pnx.control.recordid[0] instead.

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

app.component('prmActionListAfter', {
  template: `<custom-action name="open_pnx"
                            label="Open PNX"
                            index=8
                            icon="ic_find_in_page_24px"
                            icon-set="action"
                            link="/primo_library/libweb/jqp/record/{pnx.control.recordid[0]}.pnx" />
            <custom-action  name="report_bug"
                            label="Report Bug"
                            index=7
                            icon="ic_bug_report_24px"
                            icon-set="action"
                            link="http://my.institution.edu/report_problem?record_id={pnx.control.recordid[0]}" />`
})

More detailed documentation is available here on how to link to a specific Primo Record in various reporting systems such as Google Docs, Survey Monkey, and Qualitrics.

primo-explore-custom-actions's People

Contributors

Stargazers

Watchers

Forkers

mehmetc blakeegee sarahzum hollinslib nyulibraries uleodolter tnslibraries

primo-explore-custom-actions's Issues

Action panel and Full detail panel conflit

As shown in this video https://drive.google.com/file/d/14p9u3Gr52QhZj6VK3rSaSde2xt8d9K0u/view
When action panel below the search results and full detail panel both were open, one of them won't work properly.

openURL template functionality

This is a slick library. Another method that might be worth exploring/adding would be utilizing the openURL template(s) or custom link templates that are rendered in the part of the PNX section. Have you thought of that use case?

Custom action disappears when using "prev" links

With the introduction of the next/prev links in the new UI full display, custom actions disappear when clicking "prev". Tamara reported this:
Screencast: https://www.screencast.com/t/hOSH0O3WRRp

Actions require two clicks to fire

think this has something to do with the action not being "selected" until after the second click, but can't figure out what is causing it. The ActionList directive has:

    private performAction(actionName) {
        if(this.selectedAction===actionName) {
             this.onToggle[actionName]();
            this.primolyticsService.doBeaconReport({'p':'sendTo', 'op':actionName}, this.item, this.primolyticsService.getTimestamp());
        }
        else {
            this.selectedAction=actionName;
            let initializing = true;
            let listener=this.$scope.$watch(
                ()=>this.onToggle[actionName],
                ()=>{
                    if(initializing) {
                        initializing = false;
                    }
                    else {
                        this.onToggle[actionName]();
                        this.primolyticsService.doBeaconReport({'p':'sendTo', 'op':actionName}, this.item, this.primolyticsService.getTimestamp());
                        listener();
                    }
                }
            )

        }


    }

which looks like it should set selectedAction and call onToggle() no matter what.

write tests

Need help on how to implement

I need help to understand what to do with this package.
After "npm install primo-explore-custom-actions " command, what do I need to put into custom.js to trigger it? I tried "var app = angular.module('viewCustom', ['customActions'])" and "app.constant('customActions', [
{
name: "Report Bug",
type: "template",
icon: {
set: "action",
name: "ic_bug_report_24px"
},
action: "http://my.institution.edu/report_problem?record_id={recordId}"
},
{
name: "Open PNX",
type: 'template',
icon: {
set: 'action',
name: 'ic_open_in_new_24px'
},
action: "/primo_library/libweb/jqp/record/{recordId}.pnx"
}
])"

These two lines doesn't trigger anything. Do I need to modify any other files?
Thanks

Clicking on button doesn't activate action

I'm trying to implement the "Report a Problem" button and, while the button appears in the action list of the NUI, clicking on it doesn't do anything.

Perhaps the May 2017 release broke the code? I am getting this error:

angular.js:14329 TypeError: Cannot set property 'ReportBug' of undefined
    at Object.setCustomAction (http://localhost:8003/primo-explore/custom/bb/js/custom.js:70:53)
    at http://localhost:8003/primo-explore/custom/bb/js/custom.js:96:37
    at Array.forEach (native)
    at Object.vm.$onInit (http://localhost:8003/primo-explore/custom/bb/js/custom.js:94:21)
    at http://localhost:8003/primo-explore/lib/angular-d4994e7bce.js:2:4279
    at r (http://localhost:8003/primo-explore/lib/angular-d4994e7bce.js:1:1367)
    at p (http://localhost:8003/primo-explore/lib/angular-d4994e7bce.js:2:4144)
    at a (http://localhost:8003/primo-explore/lib/angular-d4994e7bce.js:2:169)
    at p (http://localhost:8003/primo-explore/lib/angular-d4994e7bce.js:2:4598)
    at http://localhost:8003/primo-explore/lib/angular-d4994e7bce.js:2:9808

Perhaps relatedly, I am also seeing this error in the console:

Error: [$compile:ctreq] Controller 'mdTabs', required by directive 'prmActionContainerAfter', can't be found!

refactor as service library only

also need to update README to reflect new usage strategy

Unfamiliar with 2_options.js file

Would you elaborate concerning this file and it's location...would I create it in "...primo-explore/custom/VIEW_CODE/js/" or edit the "custom.js" file found there?

orbis-cascade Namespace

When I add this using '@orbis-cascade/primo-explore-custom-actions', i then have to import using @orbis-cascade namespace as well or else it can't find the node package.
When I use the namespace for import, it then can't find the module customActions.
Does it sound like I'm doing something wildly wrong? Worth noting I'm using --browserify