Member Selector

Components / Member Selector

Intro

The member selector dialog is used to filter dimensions of a dataset in SAC.

https://www.figma.com/design/3pnSbYmau9yyEpKr63q5cb/DNA-Web-UI-Kit?node-id=14639-14324&t=SQmE6dOvM9cGLrP8-11

When to Use

do
false
  • Use in SAP Analytics Cloud only.
  • Use to filter dimensions (for example products, regions, or time periods) of a dataset, by selecting particular members. Possible use cases: exploring data, or selecting data for a specific story.
dont
false
  • Use it in other products.
  • Use when filtering the dataset is not required usually.
  • Enable to use the component for very large data sets because this might cause performance issues. Consider the use of pre-aggregated datasets only, or pre-defined filters.

Anatomy

  1. Toolbar: Contains a search field, drop down for presentation type, and button to access settings.
  2. Table: Displays available members in a structured list with checkboxes for selection.
  3. Side Panel: Shows selected items.

Annotated anatomy diagram of the Member Selector dialog. The dialog contains a search field with a magnifying glass icon and a "Presentation Type" dropdown in the toolbar, along with a "Settings" button. The left panel, labeled "Available Members," shows a hierarchical checklist tree with placeholder items. Two rows are checked (highlighted in blue) and display a hierarchy icon on the right edge, indicating child members exist. The right panel, labeled "Member Selections (< n >)," lists two selected items, each showing a list item name, a description, and an X button to remove the item. An OK and Cancel button appear at the bottom right. Three annotation markers (1, 2, 3) point to the search field, the presentation type dropdown, and the Member Selections panel header respectively.

Member Selector anatomy

Types

Flat Presentation

In the Flat Presentation, the member list is presented as a simple, linear listing of all available members. This format is ideal for straightforward selections where hierarchical relationships are not a concern.

Member Selector dialog showing the Flat presentation type. The "Available Members" panel displays a simple flat list with two columns: ID and Description. All rows show placeholder values (&lt;ID&gt; and &lt;Description&gt;). Two rows are checked and highlighted in blue. The "Member Selections (&lt;n&gt;)" panel on the right lists two selected items with labels and descriptions, each with an X remove button. A Settings button and a Presentation Type dropdown appear in the toolbar.

Member Selector when displaying members in a flat list

Hierarchical Presentation

The Hierarchical Presentation arranges the members into a tree-like structure, reflecting their hierarchical relationships. This mode is particularly useful when the organization of members follows a parent-child relationship, allowing users to easily understand the context and dependencies among members.

Member Selector dialog showing the Hierarchical presentation type. The "Available Members" panel displays a single Description column with a tree structure. The top-level item is "All Members." Subsequent rows are indented with right-arrow (collapsed) or down-arrow (expanded) icons to indicate hierarchy levels. Two rows at a deeper nesting level are checked and highlighted in blue; those rows also show a hierarchy/children icon on the right. The "Member Selections" panel on the right lists two selected items, each with a name, description, and X remove button. A Settings button and Presentation Type dropdown appear in the toolbar.

Member Selector when displaying members in a hierarchical tree

Advanced Presentation

The Advanced Hierarchical Presentation builds upon the basic hierarchy structure by incorporating additional features such as filtering, search, and conditional formatting.

Member Selector dialog showing the Advanced presentation type. The "Available Members" panel displays a hierarchical tree list showing only a Description column. Rows include collapsed (right-face chevron) and expanded (down-facing chevron) to indicate nesting. Two selected rows are checked and highlighted in blue; those rows display a small hierarchy icon on their right edge. The "Member Selections" panel on the right shows two selected items, each with a name and description but no additional description line compared to the flat type. A Settings button and Presentation Type dropdown appear in the toolbar.

Member Selector when displaying members in advanced presentation

Behavior and Interaction

Member Selection

A: The Member Selector allows for multiple members to be selected concurrently by continuous clicking on the members or the check box. This enables users to construct more complex filters across several members.
B: By clicking on the previously selected member again or its check box, users can deselect it, removing it from the active filter criteria.

Two-step interaction diagram illustrating how a member is selected in the Member Selector. The "Available Members" panel shows a hierarchical list. Step A (left annotation): a cursor with a "click" label points to a checked checkbox on an expanded parent row (highlighted in blue), demonstrating that clicking a parent selects it. Step B (right annotation): a cursor with a "click" label points to an unchecked checkbox on a sibling row at the same indent level, showing that individual child members can also be independently selected.

Member Selector when selecting a member

Member Deselection

A: Users can deselect members by clicking the button next to the selected members.
B: The "Deselect All" button in the list header allows users to quickly clear all selected members.

Annotated diagram of the Member Selections panel showing how selected items are removed. The panel header reads "Item Selections" with a deselect all icon. Two list items are displayed, each showing a placeholder item name, a description, a plus (+) icon on the left, and an X button on the right. Annotation A (pink callout line) points to the X button on the second row, indicating it is the control used to deselect/remove that item. Annotation B (pink callout line) points to the deselect all button in the list header, used to allow users to quickly clear all selected members.

Member Selector when deselecting a member

Member Exclusion

In the Hierarchical Presentation and Advanced Presentation, Member Exclusion allows users to focus only on relevant data by filtering out not relevant entries from current selection, such as particular products, regions, or time periods.

A: Excluded members are displayed with a striped background.

Interaction diagram illustrating the member exclusion behavior in the "Available Members" panel. The list shows a hierarchical tree with multiple collapsed and expanded rows. One row (a sub-item) is checked and highlighted in blue. Directly below it, another row is rendered with a diagonal hatch/strikethrough pattern and shows a cursor with a "click" label, indicating it is currently excluded or unavailable for selection. Annotation A (pink callout line) points to the excluded/hatched row, highlighting the visual treatment applied to members that cannot be selected due to exclusion rules.

Member Selector when a member is excluded from selection

Hierarchical Member Navigation

A1, A2: Users can interact with the hierarchy by expanding or collapsing rows to view or hide specific levels of detail, making navigation through complex datasets more manageable.
B: Depending on the configuration, selecting a parent member might automatically select its child members, or offer users the choice to select specific levels within the hierarchy.

Interaction diagram demonstrating how hierarchical navigation and selection work together in the "Available Members" panel. The tree list shows "All Members" at the top, followed by indented rows with collapsed (right-facing chevron) and expanded (bottom-facing chevron). Annotation A1 (pink callout line) points to a checked checkbox on a collapsed parent row (highlighted in blue), showing a selected-but-collapsed parent. Annotation A2 (pink callout line) points to a checked checkbox on an expanded parent row immediately below it (also highlighted in blue), showing that expanding a selected parent reveals its checked children. Annotation B (blue callout line) points to a hierarchy/subtree icon on the right edge of the expanded row, indicating the control that reveals nested child members.

Member Selector when navigating through hierarchical members

Responsiveness

A1, A2: The table and the side panel automatically adjust to the dialog size proportionally.
B: The splitter allows users to manually adjust the space allocation.
C: The resize handle allows users to change the dialog size by drag and drop.

Annotated anatomy diagram of the Member Selector dialog in its responsive layout, showing how the component resizes. The dialog has a search bar, a "Presentation Type" dropdown, and a "Settings" button in the header. The "Available Members" panel on the left lists rows with an ID column and a Description column; two rows are checked and highlighted in blue. The "Member Selections" panel on the right shows two selected items with X remove buttons. A vertical drag handle (labeled B) sits between the two panels. Annotation markers A1 and A2 point to the left and right panel edges respectively, indicating they are resizable. Marker C points to the bottom-right corner resize handle. A cursor icon with the label "drag" appears near the drag handle and the bottom-right corner.

Member Selector responsive behaviour