Web UI Framework

Aggregate Widget Types

Updated: October 16, 2020

This page presents widget types to be used to display aggregate buckets.

As described in Page Provider Aggregates, you can define aggregates on content views based on Elasticsearch. In order to display and select the buckets returned by an aggregate, new widget types have been added to the platform.

The following picture shows the default search of Nuxeo Platform where you can see a couple of aggregate widget type in action on the left-hand side panel.

 

Here is a table sumarizing the different type of widget to display aggregate buckets.

WidgetNameRendererSinceSpecificityExample (when available)Compatible Aggregate Type
CheckboxselectManyCheckboxAggregatecheckbox6.0   Term Aggregate Significant Term Aggregate
SelectselectManyListboxAggregateselect26.0 
Directory CheckboxselectManyCheckboxDirectoryAggregatecheckbox6.0See section Directory Terms Aggregate Widget Typesdc_coverage_agg
Directory SelectselectManyListboxDirectoryAggregateselect26.0 
Document CheckboxselectManyCheckboxDocumentAggregatecheckbox6.0See section Document Terms Aggregate Widget Types 
Document SelectselectManyListboxDocumentAggregateselect26.0 
User CheckboxselectManyCheckboxUserAggregatecheckbox6.0See section User Terms Aggregate Widget Types 
User SelectselectManyListboxUserAggregateselect26.0dc_creator_agg
Histogram CheckboxselectManyCheckboxHistogramAggregatecheckbox6.0  Histogram Aggregate
Histogram SelectselectManyListboxHistogramAggregateselect26.0 
Date Histogram CheckboxselectManyCheckboxDateHistogramAggregatecheckbox6.0 dc_created_aggDate Histogram Aggregate
Date Histogram SelectselectManyListboxDateHistogramAggregateselect26.0 
Range CheckboxselectManyCheckboxRangeAggregatecheckbox6.0See section Range Aggregate Widget Typescommon_size_aggRange Aggregate
Range SelectselectManyListboxRangeAggregateselect26.0 
Date Range CheckboxselectManyCheckboxDateRangeAggregatecheckbox6.0dc_modified_aggDate Range Aggregate
Date Range SelectselectManyListboxDateRangeAggregateselect26.0 

All these widget types have an important property in common, selectOptions, which needs to be set with the list of bucket returned by the associated aggregate. This will always be:

<property name="selectOptions">#{contentView.pageProvider.aggregates['xxx'].extendedBuckets}</property>

where xxx is the id of aggregate (see the page Page Provider Aggregates).

As you can see, each widget type is actually available with checkbox or select2.

All select2-based widgets have the following properties:

  • placeholder: The placeholder of the select2 widget. Default is Select a value .
  • width: The width of the select2 widget default is 100%.

All checkbox-based widget have the following properties:

  • moreLessLimit: By default, only six buckets (i.e. checkboxes) are displayed. If there are more buckets, a 'More'/'Less' link will make show/hide the other buckets. Use this property to change this setting.
  • emptyChoiceMessage: The message to be displayed when there are no returned buckets. Default is No available result .

User Terms Aggregate Widget Types

Using one of these widget types will force to resolve the bucket key (i.e. the value stored in the document property) as a user id and will display its "Firstname Lastname" if any.

Directory Terms Aggregate Widget Types

Using one of these widget types will force to resolve the bucket key (i.e. the value stored in the document property) as a directory entry and will display its localized label.

These widget types have the specific widget properties:

  • directoryName&nbsp; : The name of the directory from which the entry must be resolved (required)
  • localize : Whether the entry should be localized
  • dbl10n&nbsp; : false (default) means the entry is to be localized from messages_xx.properties file. true means the directory directly support localization in dedicated columns .

Document Terms Aggregate Widget Types

Using one of these widget types will force to resolve the bucket key (i.e. the value stored in the document property) as a document uuid and will display its title.

Range Aggregate Widget Types

Range aggregates define a set of ranges for which we can define the label to be displayed. This is possible with the use of selectOptions on the widget definition. Here is an example with the range aggregate on common:size:

<widget name="common_size_agg" type="selectManyCheckboxRangeAggregate">
  <fields>
    <field>defaults:common_size_agg</field>
  </fields>
  <widgetModes>
    <mode value="edit">#{contentView.pageProvider.hasAggregateSupport() ?
      'edit' : 'hidden'}</mode>
  </widgetModes>
  <properties widgetMode="any">
    <property name="selectOptions">#{contentView.pageProvider.aggregates['common_size_agg'].extendedBuckets}</property>
    <property name="localize">true</property>
  </properties>
  <selectOptions>
    <option itemLabel="label.aggregate.size.tiny" itemValue="tiny" />
    <option itemLabel="label.aggregate.size.small" itemValue="small" />
    <option itemLabel="label.aggregate.size.medium" itemValue="medium" />
    <option itemLabel="label.aggregate.size.big" itemValue="big" />
    <option itemLabel="label.aggregate.size.huge" itemValue="huge" />
  </selectOptions>
  <controls mode="any">
    <control name="supportInsideInputWidgetEffects">true</control>
  </controls>
</widget>