Tutorial: Customization

Customization

Customize your instance

With attributes

Each directive has each own attributes that change the behaviour of the search, in this section we will see the most important attributes for each directive.

In general, all directives but invenio-search have the attribute template in which you specify the URL of the template you'd like to use.

Example:

<invenio-search-results
  template="http://domain.com/templates/results.html"
></invenio-search-results>

invenio-search

search-endpoint

The URL for the REST API

Example: http://domain.com/api/records

search-headers

The Headers to be sent on each request

Example:

{
  "Content-Type": "application/json"
}
search-extra-params

Enhance the user query with extra parameters

Example:

{
  "collection": "heroes"
}

This will add to each API request the parameter ?collection=heroes

search-hidden-params

Enhance the user query with extra parameters without updating the URL (window.location)

By default the invenio-search updates the browser's location with the requested parameters, there is a way to enhance the query without the parameters been visible with this attribute.

{
  "collection": "restricted"
}

invenio-search-bar

placeholder

This attribute can be used in the template, usually for the input's placeholder attribute.

Example:

The directive initialization

<invenio-search-bar
  template="searchBar.html"
  placeholder="Type something"
></invenio-search-bar>

In the template searchBar.html

<input placeholder="{{ placeholder }}" />

invenio-search-error

error-message

This attribute can be used in the template, usually for displaying a message when there is an error.

Example: The directive initialization

<invenio-search-error
  template="error.html" error-message="Error message"
></invenio-search-error>

In the template error.html

<p>ERROR: {{ errorMessage }}</p>

invenio-search-loading

loading-message

This attribute can be used in the template, usually for displaying a message when a request is ongoing.

Example: The directive initialization

<invenio-search-loading
  template="loading.html"
  loading-message="Loading"
></invenio-search-loading>

In the template loading.html

<p>Loading: {{ loadingMessage }}!</p>

invenio-search-pagination

show-go-to-first-last

This attribute is whether or not to display the first and last button on the pagination.

adjacent-size

This attribute is how many pages to display if there are more than 10.

Example: The directive initialization

<invenio-search-pagination
  template="pagination.html"
  show-go-to-first-last="true"
  adjacent-size="4"
></invenio-search-pagination>

invenio-search-sort-order

sort-key

Select which key to use for sorting.

Example: The directive initialization

<invenio-search-sort-order
  template="sort.html"
  sort-key="city"
></invenio-search-sort-order>