Class: FilterEditorView

FilterEditorView()

Creates a view of an editor for a custom search filter

Screenshot

Constructor

new FilterEditorView()

Since:
  • 2.17.0
Source:

Extends

  • Backbone.View

Members

className :string

The HTML classes to use for this view's element
Type:
  • string
Source:

classes :Object

The classes to use for various elements in this view
Type:
  • Object
Properties:
Name Type Description
fieldsContainer string the element in the template that will contain the input where a user can select metadata fields for the custom search filter.
editButton string The button a user clicks to start editing a search filter
cancelButton string the element in the template that a user clicks to undo any changes made to the filter and close the editing modal.
saveButton string the element in the template that a user clicks to add their filter changes to the parent Filters collection and close the editing modal.
deleteButton string the element in the template that a user clicks to remove the Filter model from the Filters collection
uiBuilderChoicesContainer string The container for the uiBuilderChoices and the associated instruction text
uiBuilderChoices string The container for each "button" a user can click to switch the filter type
uiBuilderChoice string The element that acts like a button that switches the filter type
uiBuilderChoiceActive string The class to add to a uiBuilderChoice buttons when that option is active/selected
uiBuilderLabel string The label that goes along with the uiBuilderChoice element
uiBuilderContainer string The element that will be turned into a carousel that switches between each UI Builder view when a user switches the filter type
modalInstructions string The class to add to the instruction text in the editing modal window
Source:

collection :Filters

If rendering an editor for a brand new Filter model, provide the Filters collection instead of the Filter model. A new model will be created and, if the user clicks save, it will be added to this Filters collection.
Type:
Source:

editorView :PortalEditorView

A reference to the PortalEditorView
Type:
Source:

excludeFields :Array.<string>

A list of query fields names to exclude from the list of options in the QueryFieldSelectView
Type:
  • Array.<string>
Source:

iconDir :string

The path to the directory that contains the SVG files which are used like an icon to represent each UI type
Type:
  • string
Source:

isNew

Set to true if rendering an editor for a brand new Filter model that is not yet part of a Filters collection. If isNew is set to true, then the view requires a Filters model set to the view's collection property. A model will be created.
Source:

model :Filter|ChoiceFilter|DateFilter|ToggleFilter

A Filter model to be rendered and edited in this view. The Filter model must be part of a Filters collection. // TODO: Add support for boolean and number filters
Type:
Source:

specialFields :Array.<AdditionalField>

A list of additional fields which are not retrieved from the query service index, but which should be added to the list of options in the QueryFieldSelectView. This can be used to add abstracted fields which are a combination of multiple query fields, or to add a duplicate field that has a different label.
Type:
Source:

template :Underscore.Template

References to the template for this view. HTML files are converted to Underscore.js templates
Type:
  • Underscore.Template
Source:

text

Strings to use to display various messages to the user in this view
Properties:
Name Type Description
editButton string The text to show in the button a user clicks to open the editing modal window.
addFilterButton string The text to show in the button a user clicks to add a new search filter and open an editing modal window.
step1 string The instructions placed just before the fields input
step2 string The instructions placed after the fields input and before the uiBuilder select
filterNotAllowed string The message to show when a filter type doesn't work with the selected metadata fields
saveButton string Text for the button at the bottom of the editing modal that adds the filter model changes to the parent Filters collection and closes the modal
cancelButton string Text for the button at the bottom of the editing modal that closes the modal window without making any changes.
deleteButton string Text for the button at the bottom of the editing modal that removes the Filter model from the Filters collection.
validationError string The message to show at the top of the modal when there is at least one validation error.
noFilterOption string The message to show when there is no UI available for the selected field or combination of fields.
Source:

uiBuilderOptions :Array.<UIBuilderOption>

The list of UI types that a user can select from. They will appear in the carousel in the order they are listed here.
Type:
Source:

Methods

activateModalButtons()

Find the save and cancel buttons in the editing modal window, and add listeners that close the modal and update the Filters collection on save
Source:

allowUI(uiBuilder)

Marks a UI builder is allowed (so that it can be selected) and updates the tooltip text with the description of this UI. If it's displayed, this function hides the message that indicates that there are no allowed UIs that match the selected query fields.
Parameters:
Name Type Description
uiBuilder UIBuilderOption The UI builder Object to block
Source:

blockUI(uiBuilder)

Marks a UI builder is blocked (so that it can't be selected) and updates the tooltip with text explaining that this UI can't be used with the selected fields. If the UI to block is the currently selected UI, then switches to the next allowed UI. If there are no UIs that are allowed, then shows a message and hides all UI builders.
Parameters:
Name Type Description
uiBuilder UIBuilderOption The UI builder Object to block
Source:

createModel(event) → {Object}

Functions to run when a user clicks the "save" button in the editing modal window. Creates a new Filter model with all of the new attributes that the user has selected. Checks if the model is valid. If it is, then returns the model. If it is not, then returns the errors.
Parameters:
Name Type Description
event Object The click event
Source:
Returns:
Returns an object with a success property set to either true (if there were no errors), or false (if there were errors). If there were errors, then the object also has an errors property with the errors return from the Filter validate function. If there were no errors, then the object contains a model property with the new Filter to be saved to the Filters collection.
Type
Object

events() → {object}

A function that returns a Backbone events object
Source:
Returns:
A Backbone events object - an object with the events this view will listen to and the associated function to call.
Type
object

getCommonAttributes(filterModel, newFilterType) → {Object}

Checks for attribute keys that are the same between a given Filter model, and a new Filter model type. Returns an object of model attributes that are relevant to the new Filter model type. The values for this object will be pulled from the given model. objectDOM, cid, and nodeName attributes are always excluded.
Parameters:
Name Type Description
filterModel Filter A filter model
newFilterType string The name of the new filter model type
Source:
Returns:
returns the model attributes from the given filterModel that are also relevant to the new Filter model type.
Type
Object

handleErrors(errors)

Shows errors in the filter editor modal window.
Parameters:
Name Type Description
errors object An object where keys represent the Filter model attribute that has an error, and the corresponding value explains the error in text.
Source:

handleFieldChange(selectedFields)

Run whenever the user selects or removes fields from the Query Field input. This function checks which filter UIs support the type of Query Field selected, and then blocks or enables the UIs in the editor. This is done to help prevent users from building mis-matched search filters, e.g. "Year Slider" filters with text query fields.
Parameters:
Name Type Description
selectedFields Array.<string> The Query Field names (i.e. Solr field names) of the newly selected fields
Source:

handleFilterIconClick(event)

Function that takes the event when a user clicks on one of the filter type options, gets the name of the desired filter type, and passes it to the switch filter function.
Parameters:
Name Type Description
event object The click event
Source:

hideModal()

Hide and destroy the filter editor modal window
Source:

hideNoFilterOptionMessage()

Removes the message displayed by the FilterEditorView#showNoFilterOptionMessage function and un-hides all the filter builder UIs.
Source:

initialize(options)

Executed when this view is created
Parameters:
Name Type Description
options object A literal object of options to pass to this view
Properties:
Name Type Description
options.model Filter | ChoiceFilter | DateFilter | ToggleFilter The filter model to render an editor for. It must be part of a Filters collection.
Source:

isBuilderAllowedForFields(uiBuilder, selectedFields) → {boolean}

Determine whether a particular UIBuilder is allowed for a set of search field names. For use in handleFieldChange to enable or disable certain UI builders using allowUI/blockUI when the user selects different search fields.
Parameters:
Name Type Description
uiBuilder UIBuilderOption The UIBuilderOption object to check
selectedFields Array.<string> An array of search field names to look for restrictions
Source:
Returns:
Whether or not the uiBuilder is allowed for all of selectedFields. Returns true only if all selectedFields are allowed, not just one or more.
Type
boolean

render()

Render the view
Source:

renderEditorModal()

Render and show the modal window that has all the components for editing a filter. This is created on-the-fly because creating these modals all at once in a FilterGroupsView in edit mode takes too much time.
Source:

renderFieldInput()

Create and insert the component that is used to edit the fields attribute of a Filter Model. Save it to the view so that the selected fields can be accessed on save.
Source:

renderUIBuilders()

Create and insert the "buttons" to switch filter type and the elements that will contain the UI building interfaces for each filter type.
Source:

showNoFilterOptionMessage(message, typeopt)

Hides all filter builder UIs and displays a warning message indicating that there are currently no UI options that support the selected fields.
Parameters:
Name Type Attributes Default Description
message string A message to show. If not set, then the string set in the view's text.noFilterOption attribute is used.
type string <optional>
 "warning" The type of message to display (warning, error, or info)
Source:

switchFilterType(newFilterType)

Switches the current draft Filter model to a different Filter model type. Carries over any common attributes from the previously selected filter type. If no filter type is provided, defaults to type of the view's model
Parameters:
Name Type Description
newFilterType string The name of the filter type to switch to
Source: