Sort Builder

With the Sort Builder you can apply one or more sorting rules to the data within a component.

You can base the sorting rules on field values, which can be ascending or descending in order. Add a field to apply a sort. Sorts are applied in the order they are listed, with the top rule being applied first.

You can add the Sort Builder to Table, List, Deck, and Filter Set components.

Apply and remove sorts

Click on the Sort Builder in the header of the component.

image0

In the Sort Builder, add fields in order of the sorting sequence you want to apply.

The sort will be applied when the Save button is clicked.

Any fields tagged for removal from the sort sequence will be removed when the Save button is clicked.

Cancel clears out any unsaved changes to the sort sequence.

Properties

Sort properties

These properties determine the appearance and behavior of the Sort Builder.

  • Show sort builder: Check to display the Sort Builder in the component at runtime.
    • Button icon: The icon to display next to the label. Click the icon picker to select a different icon.
    • Button label: The label text that appears on the Sort Builder at runtime. Change the text to match what you want to say to your end users.
  • Sort client-side: Check to only sort on field values that are loaded into the page at the time the sort is applied. This means that the sort will be applied to data in the model, not to data still on the server.

Sort button and style variants

The style variant of the Table, List, Deck, or Filter Set component determines the appearance of the sort button.

image1

To change the appearance of the sort button, select or create a Button style variant.

In the Design System Studio, apply the Button style variant by navigating to Components > selecting Table, List, Deck, or Filter Set > Nested components > Sort (button) and selecting the style variant.

Sort Builder and style variants

The style variant of the Table, List, Deck, or Filter Set component determines the appearance of the Sort Builder.

image2

To change the style properties of the Sort Builder modal, create or customize a Sort Builder style variant.

In the Design System Studio, apply the Sort Builder style variant by navigating to Components > selecting Table, List, Deck, or Filter Set > Nested components > Sort Builder and selecting the style variant.