Widget Tricks - ods-select

ods-select allows the selection of one or more items from a list of options. This resource present different combination with ods-facet-results or ods-analysis to feed the selection list.

ods-select widget documentation

Basic example, fed by a static list

ods-select accept any kind of source as long as it’s a json array. It can be an array of strings, but also an array of object and ods-select label-modifier and value-modifier can be used to specify which key in the array item to use for, respectively the label and the field value.

Basic example, with a default selection

Start with a selected value, and let the user select another one.

You can also force the user to always have a selection.

Filter by type, fed by a facet (via ods-facet-results widget)

ods-facet-results enumerates the values (“categories”) of a facet, and exposes it in a variable. this variable can then be the option source of ods-select.

ods-facet-results widget documentation

Note 1: that facets are limited to the first 100 results, it’s then suitable for categories, types, properties that have a small set of distinct values

Note 2: set disjunctive mode to true in the context parameters to keep other values available after a selection

Filter by the results of an analysis (via ods-adv-analysis widget)

  • Select cities by their population
  • Select companies by their capital, number of employees
  • Select regions by their solar power production
  • Select power sources by their production etc…

Computing the average, maximum, sum of a field to sort de list of proposition in ods-select

ods-adv-analysis Code Library resource and it’s documentation.

Note 1: performing an adv-analysis on a field containing huge quantity of distinct values can alter performances of the page (the browser needs to download the long list of possible values, then it displays and manipulates the list into the widget)

Note 2: selecting a value and refining the context will no longer let you choose other values as they will disappear with the selection. (contrary to ods-facets and ods-facet-results that can use the disjunctive mode, ie. multi selection mode). To counter that, we need 2 contexts: 1 to perform the analysis and feed ods-select, 1 to refine and display the chart

Last but not least, the good practice for geo filters ! (showcasing ods-results)

Each time it’s available, filter with the ID! and avoid labels or names! Specially for geographical division (City names, States etc…)

This resource showcase ods-results as the source of ods-select but most of all Opendatasoft geo referentials that always propose codes and labels for each division.

ods-results documentation.

IMPORTANT: In the lander context, an optional parameter fields is set to limit the size of the results. It improves DRASTICALLY the performance to avoid manipulating big geo shapes in geo datasets. We STRONGLY advise to keep this parameter and list only the required fields (ie. the “label field” and the “value field” of your ods-select)

Filters as a sentence

Read a sentence that describes the applied filters in your page by inlining several ods-select.

Simple inlined layout

ods-select takes all the available width. In order to inline several ods-select on the same line and keep the same strategy, you need to add some CSS. This resource provides the minimum CSS you need to achieve this easily.

For mobile display, to assure a minimum width of your ods-select, it can be convenient to set a min-width, see comments in the CSS code.

Drilldown select for geographical levels

A reuse of ods-select to create filters based on a serie of geographical levels.

IMPORTANT: This example integrates advanced parameters that can be customized:

  • disabled parameter in ods-select: used to disable the filter if the condition is true. In the example, the filter is disabled when the previous filter is not activated.
  • on-change parameter in ods-select: used to clear previous filters on the context ctx when a new selection is made. In the example, it enables you to select a région, a département, and then switch to another région, without having to clear the filter département.
  • Angular expressions after each ods-select: used to sync the selection on all the geographical levels. In the example, it enables you to have a list of département filter on the région selected.

Note: you will need to create one context for each geographical level, in order to keep the full list of the items after the refine.