Left Menu Right Menu
October 10, 2018

Toggle Advanced Fields

Developer

Tamara Marnell (Central Oregon Community College)

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

toggle-advanced-iphone-x-hidden

toggle-advanced-iphone-x-shown

System Components

PBO, Package Manager

Skillset Requirements

PBO, JavaScript

Accessibility

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

Browser Support

Tested on Chrome, Firefox, Edge, IE11, and Safari

Mobile Support

Tested on Android and Apple phones

Implementation Steps

1.       In the PBO, make sure you have the “Inherit Central Package” box checked.

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']);

If you are using other angular modules, include them in your app definition as well. For example:

var app = angular.module('viewCustom', ['toggleInstitutions', 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.

7.       Deploy your view.

 

Back to Blog
Comments (0)
Reply To Article