Tutorial: Add a Pivot Table

We want to configure the Mashup UI to display a Pivot Table widget on which the user can refine the search results.

For our example, we want to see the sales quantity for each cloth article by country .

Note: This widget is only available in Mashup Builder Premium.

This task shows you how to:

Configure the Pivot Table Widget

  1. In Mashup Builder, go to the /search page and select Design.
  2. From the Widgets panel, select Table > Pivot Table.
  3. Drag the Pivot Table on to the /search page so it is just below the Navigation Header widget.
  4. Click the Pivot Table widget header.
  5. In the Search API tab, for Search Logic, select sl0.
  6. To configure the table header, go to Columns:
    1. In Facet name, select sales_category
    2. In Sort function, select alphanum
    3. In Legend, enter Clothes.
    4. Select Enable column drill-down.



  7. To configure row display by countries then by cities, go to Rows and for:
    1. Legend, enter Country/City.
    2. For the first row: in Facet name, select sales_store_country; in Sort function, select alphanum
    3. For the second row: in Facet name, select sales_store_city; in Sort function, select alphanum
    4. For No. facet levels shown by default, enter 1to display by default the first facet level only (sales_store_country).



  8. To configure the sales quantity display, go to Aggregations:
    1. In Type, select COUNT
    2. In Expression, select sales_quantity
    3. In Max decimals, do not select anything. This field applies to float values (an empty value shows all available decimals).
    4. In Legend, enter Sales quantity



  9. Click Apply.

View Your Changes

  1. Go to the Mashup UI.
  2. Refresh the screen.

    In the Mashup UI, you can now see the Pivot Table widget on the search page.

    Pivot table showing clothes by country/city, with a collapsed view on the country facet level

  3. You can expand the view for a specific country, for example China, and see values for its cities (Beijing, Hong Kong, Shanghai).

    Note: You can also click any value of the pivot table to refine results on the whole page.