Home Table Personalization Dialog

Updated: March 16, 2017
SAPUI5 Version 1.50

Table Personalization Dialog

sap.m.TablePersoDialog

Intro

The table personalization dialog allows you to display and modify table settings. It is a UI pattern that defines column order and visibility.

Usage

Use the table personalization dialog if:

  • You have small tables.
  • You have a manageable number of columns.

Do not use the table personalization dialog if:

  • You have large tables.
  • You have a lot of columns to manage.

For larger tables you can use the P13n dialog (sap.m.P13nDialog) instead.

Responsiveness

On a desktop and tablet, the control appears as a dialog window.

The table personalization dialog should always be displayed in full screen mode on a smartphone device.

Table personalization dialog - Smartphone - Size S
Table personalization dialog - Smartphone - Size S
Table personalization dialog - Tablet - Size M
Table personalization dialog - Tablet - Size M
Table personalization dialog - Desktop - Size L/XL
Table personalization dialog - Desktop - Size L/XL

Layout

Position on the Screen

The dialog always opens in a modal window in the center of the screen.

For smartphones, stretch the dialog to fill the entire screen. For tablet and desktop devices, keep the modal window.

Layout of the Dialog

The table personalization dialog comprises the following five areas:

(1) Header

(2) Toolbar

(3) Subtoolbar

(4) Column list

(5) Footer toolbar

Table personalization dialog – Overview
Table personalization dialog – Overview

Components

The table personalization dialog contains the following sections:

Header

The header displays the dialog title.

Table personalization dialog – Header
Table personalization dialog – Header

Toolbar

The toolbar displays the Move Column Up and Move Column Down buttons and the Search field.

Table personalization dialog – Toolbar
Table personalization dialog – Toolbar

Subtoolbar

The subtoolbar displays the All checkbox for selecting all columns, and an Undo Personalization button.

Table personalization dialog – Subtoolbar
Table personalization dialog – Subtoolbar

Column list

The column list displays the result list of columns. The user can use the search field in the toolbar to filter the selection.

Table personalization dialog – Column list
Table personalization dialog – Column list

Footer toolbar

The footer toolbar displays an OK and a Cancel button.

Table personalization dialog – Footer toolbar
Table personalization dialog – Footer toolbar

Behavior and Interaction

Open the Dialog

To open the table personalization dialog, the user must click on the Personalize button on the right-hand side of the table toolbar.

Table personalization dialog – Table
Table personalization dialog – Table
Table personalization dialog – Open dialog
Table personalization dialog – Open dialog

Show or Hide Columns

To show or hide columns, the user only needs to select or deselect the checkbox of a column (list item).

(1) Columns are visible in the table.

(2) Columns are hidden in the table.

Table personalization dialog – Show/Hide
Table personalization dialog – Show/Hide

The user can show or hide all columns with just one click. A checkbox on the left-hand side of the subtoolbar enables all list items to be selected or deselected.

(1) Columns are visible in the table.

(2) Columns are hidden in the table.

Table personalization dialog – Show all
Table personalization dialog – Show all
Table personalization dialog – Hide all
Table personalization dialog – Hide all

Move Columns

Two buttons in the toolbar on the left-hand side enable a selected column to be moved up or down.

Table personalization dialog – Move buttons
Table personalization dialog – Move buttons

Move Column Up

(1) Select a column (by clicking on the list item).

(2) Use the Move Column Up button to move the column to the left in the table.

  • If the first position has been reached, the Move Column Up button is disabled.
Table personalization dialog – Select
Table personalization dialog – Select
Table personalization dialog – Move Column Up
Table personalization dialog – Move Column Up

Move Column Down

(1) Select a column (by clicking on the list item).

(2) Use the Move Column Down button to move the column to the right in the table.

  • If the last position has been reached, the Move Column Down button is disabled.
Table personalization dialog – Select
Table personalization dialog – Select
Table personalization dialog – Move Column Down
Table personalization dialog – Move Column Down

Search/Filter Columns

A search field in the toolbar on the right-hand side enables columns to be searched/filtered.

Table personalization dialog – Search field
Table personalization dialog – Search field

The user can type any character into the search field to filter the columns to match the input.

Table personalization dialog – Search column
Table personalization dialog – Search column

To reset a search, the user must delete all the characters that have been entered, or simply presses the Cancel button in the search field.

All the columns are shown again in the list.

Table personalization dialog – Search reset
Table personalization dialog – Search reset

Undo Personalization

The Undo Personalization button in the subtoolbar on the right-hand side resets all settings to the initial state.

If the table personalization dialog is used together with variant management, the button resets the changes to the initial state of the selected variant.

Table personalization dialog – Undo
Table personalization dialog – Undo

Confirm/Cancel Changes

The changes are adopted when the user closes the dialog via the OK button.

The Cancel button closes the dialog without adopting the changes.

Table personalization dialog – OK/Cancel
Table personalization dialog – OK/Cancel

Guidelines

Search Behavior

The search is a live search (also known as “search-as-you-type”), which is triggered by each character the user enters or deletes. For more information, see search.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation