Common Table Actions Usage GuidelineBookmark this Guideline Printable Page


RCUI Document Version 5.3.1 for Oracle® Fusion Middleware 11g Release 1 Patch Set 1 (11.1.1.2.0)
Last Updated 04-Mar-2011

Tables are the principal method for displaying and interacting with data in FusionFX applications. This guideline provides detailed descriptions of common actions on table data, such as Create, Edit, and Delete.

Guideline Contents

Note: Images in this guideline are provided as a general reference, and may not be exact representations of FusionFX pages.

Related Guidelines

Guideline Section For Information About
Table Overview All Introduction to table design and interaction.
Table Information Design All Range of layout options, include grid lines and banding, row and column span, totals, and alignment of cell contents.
Table Elements All Range of possible controls and other components in each area of a table, such as menus, toolbars, rows, columns, and status bar.
Table Display Manipulation All Describes range of options for users to modify the display of a table, including sorting, filtering, resizing columns, and other configuration options.
Table Interaction Methods All Provides heuristics for use of different interaction methods within a table, such as use of select and act methods, editing within tables, functional icons, and drill-down.
PivotTable All Pivot Table shares much of the same design and behaviors as tables.
Graph All Tabular data display is a common alternative to graphical data display.

Related ADF Elements

Refer to the ADF Faces Rich Client demos page to find demos and tag documentation for the ADF elements related to this component:

ADF Element Notes
af:column Column in a table.
af:panelCollection Adds toolbars and status bar to a table.
af:table Displays tabular data. Scrollable.

General Principles Bookmark this Heading Return to Top

Purpose:

Common table actions consist of frequently used actions that modify data. For information on actions that affect table display, see the Table Display Manipulation guideline. For information on different table interaction methods, such as select and act, editing directly within tables, drill-down, and functional icons, see the Table Interaction Methods guideline.

Unless otherwise indicated in specific sections of this guideline, the following principles apply to all manipulation actions:

  • Common table actions are not provided as part of the ADF table component, and must instead be implemented by development teams.
  • If the number of available commands is limited, product teams may use a toolbar instead of a menu bar.
  • If an action has a recommended keyboard shortcut, the shortcut is listed in the related section of this guideline.
  • Some actions are selection-dependent. If a table does not support selection then the action can only be provided using a column of functional icons. For more information, see Functional Icons in an Action Column in the Table Interaction guideline.
  • Product teams should enable each action as needed. Each section in this guideline provides usage recommendations for that action.
  • On an empty table where no records are displayed, data-dependent actions (such as Delete) should be disabled until some data are available. Data-independent actions, such as Add Row or Create, may be enabled.

Notes:

For an introduction to tables, see the Table Overview guideline. For further details on the different aspects of table design and interaction, see the links in the Related Guidelines section above.

Product teams define the save model within which the actions described in this guideline are used (including flows, validation, etc.) This model is not covered by RCUI.

Duplicate Bookmark this Heading Return to Top

Purpose:

Duplicate combines copy and paste actions into one action to make a copy of an existing object, usually to create a new object like an existing one.

The duplicate action selected in a context menu

Duplicate Command in a Context Menu

Description:

  • The Duplicate action should be available as follows:
    • Menu: By selecting one or more rows and using the Duplicate command from an object-specific actions menu (see Object-Specific Actions Menu in the Table Elements guideline).
    • Context menu: By right-clicking a row header and selecting Duplicate.
    • Toolbar: By selecting one or more rows and clicking the iconic Duplicate button.
    • Functional icon: If selection is not supported, by clicking a Duplicate icon in a column of functional icons.
  • The Duplicate command makes a copy of the selected row or several contiguously-selected rows, and places the copy or copies below the selection.
  • The names of newly duplicated rows are distinguished from their originals by preceding the row name or identifier with "Copy of  ". If the user makes more than one copy of an object without renaming the duplicated version, the original name should be preceded by "Copy [n] of  ", where [n] is the number of copies.
  • If a column is sorted, the duplicated row is moved up or down to its correct position in the sort order once the page is saved. The table scrolls if necessary to keep the new row in view.
  • Column duplication is not supported.

Showing the iconic Duplicate button in the toolbar of a table, to duplicate a row.

Duplicate Row in a Table
(With iconic Duplicate button in toolbar)

Usage:

  • Unless implemented as a functional icon, the Duplicate command is selection-dependent, so it requires the table to support row selection. See the Table Interaction guideline for information about both selection-based methods and functional icons.
  • The Duplicate command is recommended when users need to create new objects in a table, and those objects share common attributes. This greatly reduces the required amount of data entry.
  • Duplicate may be combined with any other common table action, such as Create.
  • Duplicate should be combined with Delete, so users can remove duplicated objects if necessary. Duplicate should also be combined with Edit, so users can modify objects after creating them.
  • The tooltip text for the Duplicate icon should be "Duplicate". Product teams may append the object type or additional context to explain the action, such as "Duplicate Order", if the table has heterogeneous objects or if it may be unclear to the user what is being duplicated.

Remove (from Table) Bookmark this Heading Return to Top

Purpose:

Remove allows users to take one or more selected objects (or references to objects) out of the table list and view the resulting table.

Note: The Remove action takes the selected objects (or references to objects) out of a table view. Once an object is removed it disappears from the table View but continues to exist outside the table and in the database.

Showing the Remove button in a table toolbar

Remove Button in a Toolbar

Description:

  • The Remove action should be available as follows:
    • Menu: By selecting one or more rows and using the Remove command from an object-specific actions menu (see Object-Specific Actions Menu in the Table Elements guideline).
    • Context menu: By right-clicking a row header or a read-only table cell, and selecting Remove.
    • Toolbar: By selecting one or more rows and clicking the iconic Remove button.
    • Keyboard: By selecting one or more rows and pressing the Delete key or the accelerator Ctrl+Del.
    • Functional Icon: If selection is not supported, by placing a Remove icon in each row for which the command is valid.
  • Product teams may also provide a message dialog (shown below) to warn the user that data is being removed.
  • When one or more rows are removed, subsequent rows move up to fill the space. If additional table records are available, they are displayed in rows at the bottom of the table.
  • Users can select rows contiguously and non-contiguously and remove them with a single action.
  • Columns can be hidden and shown but cannot be removed. See Hide/Show Columns in the Table Display Manipulation guideline for details.
Note: The Remove and Delete actions use the same iconic button, but with different tooltips. If it is necessary to combine these actions on the same page, see Combining Delete with Remove.

a Remove warning message dialog

Remove Warning Message

Usage:

  • Unless implemented as a functional icon, the Remove command is selection-dependent, so it requires the table to support row selection. See the Table Interaction guideline for information about both selection-based methods and functional icons.
  • Remove is recommended in tables with Add actions, so the user can remove objects that are not needed.
  • Remove may be combined with other common table actions, such as Add and Edit. In certain cases, it may be necessary to combine the Remove action with the Delete action—see Combining Delete with Remove for details.
  • If the table has a toolbar, it is recommended to include the Remove button on the toolbar, unless Remove is expected to be a low-frequency action.
  • The tooltip text for the Remove icon should be "Remove". Product teams may append the object type or additional context to explain the action, such as "Remove Item from Shopping Cart", if the table has heterogeneous objects or if it may be unclear to the user what is being removed from the table.
  • Message dialogs increase the number of steps required to perform an operation, so consider enabling the Remove warning message in only the following contexts:
    • The data would be time consuming to recreate.
    • When it may not be obvious that one or more objects will be removed, such as a selection across multiple record sets.

Delete (from Table and Database) Bookmark this Heading Return to Top

Note: The Delete action erases selected objects from the table view and from the database. Once an object has been deleted, it is no longer available in the table View, outside of the table, or in the database.

Purpose:

Delete allows users to permanently remove one or more selected objects from both the table and the database, and view the resulting table.

The Delete button in a table toolbar

Delete Button in a Toolbar

Description:

  • The Delete action should be available as follows:
    • Menu: By selecting one or more rows and using the Delete command from an object-specific actions menu (see Object-Specific Actions Menu in the Table Elements guideline).
    • Context menu: By right-clicking a row header or a read-only table cell, and selecting Delete.
    • Toolbar: By selecting one or more rows and clicking the iconic Delete button.
    • Keyboard: By selecting one or more rows and pressing the Delete key or the accelerator Ctrl+Del.
    • Functional Icon: If selection is not supported, by placing a Delete icon in each row for which the command is valid.
  • Product teams may provide a message dialog (shown below) to warn the user that data is about to be permanently deleted from the table view and from the database.
  • If a single row or group of rows are selected and deleted contiguously or incontiguously, then the row that preceded the deleted row(s) should become selected. All subsequent remaining rows should shift upward to fill the positions of the deleted row(s).
  • If the deletion also contains the top table row, then the subsequent row that replaces it should become selected. For example, if A, B, C, and D are sequential rows available in a given table, and A is the top table row:
    • If B and C are contiguously selected and deleted, then D will shift up, and A will become selected.
    • If A, B, and C are contiguously selected and deleted, then D will remain and become selected.
    • If A and C are incontiguously selected and deleted, then B and D will shift up to replace them, and B will become selected.
  • Users can select rows contiguously and non-contiguously and delete them with a single action.
  • Columns can be hidden and shown but cannot be deleted. See Hide/Show Columns in the Table Display Manipulation guideline for details.
Note: The Delete and Remove actions use the same iconic button, but with different tooltips. If it is necessary to combine these actions on the same page, see Combining Delete with Remove.

A Delete warning message dialog

Delete Warning Message

Usage:

  • Unless implemented as a functional icon, the Delete command is selection-dependent, so it requires the table to support row selection. See the Table Interaction guideline for information about both selection-based methods and functional icons.
  • Delete is recommended in tables with Duplicate or Create actions, so the user can delete objects created in error.
  • Delete may be combined with any other common table action, such as Clear Contents or Edit. In certain cases, it may be necessary to combine the Delete action with the Remove action—see Combining Delete with Remove below for details.
  • If the table has a toolbar, it is recommended to include the Delete button on the toolbar, unless Delete is expected to be a low-frequency action.
  • The tooltip text for the Delete icon should be "Delete". Product teams may append the object type or additional context to explain the action, such as "Delete Employee from Database", if the table has heterogeneous objects or if it may be unclear to the user what is being deleted from the table and database.
  • Message dialogs increase the number of steps required to perform an operation, so consider enabling the Delete warning message in only the following contexts:
    • The data would be time consuming to recreate.
    • When it may not be obvious that one or more objects will be deleted, such as a selection across multiple record sets.

Combining Delete with Remove Bookmark this Heading Return to Top

Purpose:

Provides users with the choice to remove one or more selected objects from the table list, or from both the table and the database.

Note: The Delete and Remove actions should be combined only when users have a clear need to perform both actions.

Example:

A user has permissions to create and delete objects. In addition, the user can add objects to lists that are used for specific purposes. While viewing a list, the user may want to remove an item from that list or delete the item from the database, so that it is removed from all lists at the same time.

Combined Delete and Remove buttons

Combined Delete and Remove Buttons

Description:

Delete and Remove actions should be combined as follows:

  • Menu/Context Menu: Provide a Remove menu item and a submenu with separate "Remove From Table" and "Delete from Database" commands.
  • Toolbar: Provide a single iconic Delete/Remove button with an inline selector to choose between "Remove From Table" and "Delete from Database" options. The tooltip text for the icon should be "Remove".
  • Keyboard: When the user presses the Delete key or the accelerator Ctrl+Del, default to the Remove action (the least destructive), or provide a dialog for users to choose between the actions.

Usage:

  • The Delete and Remove actions should be combined on the same page only when:
    • Users need to perform both actions.
    • Users are aware of the difference between the two actions, or the page clearly communicates the difference.
  • If users are likely to confuse the Delete and Remove actions, consider providing the actions separately on different pages. For example, Delete could be provided on a master object list page, whereas Remove would be provided on pages containing lists of added objects.
  • See Modifying Existing Content in the Language in UI guideline for a comparison of the two commands.

Clear Contents Bookmark this Heading Return to Top

Purpose:

Clear Contents resets all web widgets in the selected row or column to blank, or to the "no values selected" state.

Displaying the Clear Contents command in a context menu

Clear Contents Command in a Context Menu

Description:

  • The Clear Contents action should be available as follows:
    • Menu: By selecting one or more rows or columns and using the Clear Contents command from an object-specific actions menu (see Object-Specific Actions Menu in the Table Elements guideline).
    • Context menu: By right-clicking a row or column header and selecting Clear Contents.
    • Toolbar: By selecting one or more rows and clicking the iconic Clear Contents button.
    • Keyboard: By pressing the Delete key when one or more rows containing editable contents is selected.
  • The effect of the Clear Contents action depends on the type of component in the selected column or row:
    • Input/Output Text (text field, text area), Input File, and Checkbox: Widget becomes blank.
    • Select Choice list, List Box, Select Radio group, and Spinbox: Widget set to "no values selected" state.
  • The Clear Contents action appears disabled for rows or columns where every cell in the selection contains text, links, or icons. If a row or column contains a mix of text, links, or icons as well as web widgets, the Clear Contents action is enabled, but only affects the enabled web widgets.

Usage:

  • Clear Contents is selection-dependent, so it requires the table to support column or row selection.
  • Clear Contents is enabled only in tables with editable web widgets, so that the user can clear multiple widgets at the same time before entering or selecting new settings.
  • Clear Contents may be combined with any other common table action.
  • The tooltip text for the Clear Contents icon should be "Clear Contents".

Add Bookmark this Heading Return to Top

Purpose:

Add actions insert existing objects into a table:

  • Add One: Populates a blank row in an editable table using an LOV text field.
  • Select and Add: Opens the Select and Add dialog, allowing selection of any number of existing objects to populate rows in a read-only or editable table.

Usage:

Add actions should be combined with Remove or Delete, so users can remove created objects if necessary.

Add One Bookmark this Heading Return to Top

Purpose:

Add One allows users to populate a blank row with an existing object using an LOV text field.

Description:

  • The Add One action should be available only after users add a blank row using the Add Row command:
    • Menu: By using the Add Row command from an object-specific actions menu (see Object-Specific Actions Menu in the Table Elements guideline).
    • Toolbar: By clicking the iconic Add Row button.
    • Keyboard: By pressing the the accelerator Ctrl+Insert.
  • The new row contains an object selection widget (such as a Select Choice list, LOV choice list, or LOV text field) in the first cell. Users can enter an existing object name or navigate to a Search and Select dialog to select an object. See LOV Text Field in the LOV guideline for details.
  • When the user selects an object in the first cell, the row is populated with the object's details.
  • The new row should always be visible on screen; the table scrolls if necessary to show it. Focus goes on the first widget in the new row. The placement of the added row depends on whether a row is selected when the user adds a new row:
    • No Row Selected: The added row becomes the first row of the table.
    • See Row Insertion for details on placing blank rows before or after selected cells.
  • Users can add multiple blank rows and then populate them one at a time. Teams should code tables so that if the page is submitted with blank rows, those rows are removed the next time data is fetched from the server.
Two views of a table, one with a blank LOV text field in a row, and one in which the table row is now populated using the LOV Text Field

Table Row Populated with LOV Text Field

Usage:

  • Add One may be combined with any other common table action, except Create Inline.
  • Add One should be reserved for editable tables (click-to-edit or direct-edit). See Editing Within Tables in the Table Interaction Methods guideline for details.
  • Add One is recommended when users:
    • Perform extensive data entry in the table, and
    • Need to add one or more existing objects.
  • Depending on user permissions, product teams may allow users to edit existing objects and attributes once a row is populated.
  • Product teams may also provide additional columns with editable content to be defined by the user.
  • If users are permitted to create objects, product teams can implement a Create option in the Search and Select dialog. See LOVs and Create Option in the LOV guideline.
  • Tooltip text for the Add Row icon should be "Add Row".

Select and Add Bookmark this Heading Return to Top

Purpose:

Select and Add allows users to search for multiple objects and add each as a new row in a table.

Note: The Select and Add action uses a custom version of the Search and Select dialog, which must be developed by product teams

A table with a Select and Add button in the toolbar

Table with Select and Add Button in Toolbar

Description:

  • The Select and Add action should be available as follows:
    • Menu: By using the Select and Add command from an object-specific actions menu (see Object-Specific Actions Menu in the Table Elements guideline).
    • Toolbar: By clicking the iconic Select and Add button.
    • Keyboard: By pressing the the accelerator Ctrl+Insert.
  • New rows should be visible on screen; the table scrolls if necessary to show the topmost new row. Focus moves to the first widget of the topmost new row. The placement of the added row depends on whether a row is selected when launching the Select and Add action:
    • If no row is selected: The new row becomes the first row of the table.
    • See Row Insertion for details on placing blank rows before or after selected cells.
  • If users want to run multiple searches they can select rows in the Select and Add dialog and click the Apply button to update the base table without dismissing the dialog.
  • If a column is sorted, the new row is moved up or down to its correct position in the sort order once the page is saved. The table scrolls if necessary to keep the new row in view. If the user adds multiple rows to the table, the first of the new rows remains in view.
  • Depending on user permissions, product teams may allow users to edit existing objects and attributes once a row is populated.

The Select and Add dialog in a table.

Select and Add Dialog

Usage:

  • The Select and Add action may be combined with any other common table action.
  • The Select and Add action is recommended when:
    • Users need to add multiple existing objects to an editable table.
    • Users need to add one or more existing objects to a read-only table.
  • The Select and Add dialog may show more attributes than the table on the originating page.
  • If users are permitted to create objects, product teams can implement a Create option in the Select and Add dialog. See LOVs and Create Option in the LOV guideline for details.
  • If the table has a toolbar, it is recommended to include the Select and Add button on the toolbar. Do not place the Select and Add iconic button in an Actions column, because an icon in an Actions column is used for actions related to the current row, whereas the Select and Add command adds another row to the table.
  • The tooltip text for the Select and Add icon should be "Select and Add".
    • Product teams may append the object type or additional context to explain the action, such as "Select and Add Employee", if the table has heterogeneous objects or if it may be unclear to the user what is being selected and added.

Create Bookmark this Heading Return to Top

Purpose:

Create actions allow a user to create new objects to populate a table:

  • Create Inline: After adding a blank table row, the user enters data directly into the row. The object is created when the user saves the changes.
  • Create in Form: Displays a form for users to fill out in a Create dialog or on a Create page. On submission, a new row is inserted in the table.

The menu commands and toolbar buttons used depend on the specific action. See the following subsections for details.

Usage:

  • Create actions should be combined with the following actions:
    • Delete, so users can remove created objects if necessary.
    • Duplicate, so users can create a new object based on an existing object.
    • Edit, so users can modify objects after creating them.
  • If a new row contains columns that have required fields, the columns should be placed in view if possible, so that the user can find them without scrolling the table horizontally. See Required Field Indicator in the Table Elements guideline for details.
  • Tooltip text for the Create icon should be "Add Row".
Note: LOV choice lists in editable cells may also include a Create option that can be used to populate that cell. See Custom Actions in the LOV guideline for details.

Create Inline Bookmark this Heading Return to Top

Purpose:

Create Inline allows a user to specify the details of a new object by entering data directly into a blank table row.

Description:

  • The Create Inline action should be available only after users add a blank row using the Add Row command:
    • Menu: By using the Add Row command from an object-specific actions menu (see Object-Specific Actions Menu in the Table Elements guideline).
    • Toolbar: By clicking the iconic Add Row button.
    • Keyboard: By pressing the accelerator Ctrl+Enter, if focus is in the last row of the table.
  • The new row contains editable Web widgets, which allow users to enter data to populate the new row.
  • The new row should be visible on screen; the table scrolls if necessary to show it. Focus goes on the first widget in the new row. The placement of the added row depends on whether a row is selected when the user adds a new row.
    • If no row is selected: The new row becomes the first row of the table.
    • See Row Insertion for details on placing blank rows before or after selected cells.
  • Users can add multiple blank rows and then populate them one at a time. If the page is submitted with blank rows, teams should code tables to remove the rows the next time data is fetched from the server.
  • The new object is created when the user submits the changes.

A table showing the first row ready for user input, with the Add Row button highlighted on the toolbar.

Table Showing First Row Ready for User Input

Usage:

  • Create Inline may be combined with any other common table action, except Add One.
  • Create Inline is reserved for editable tables (click-to-edit or direct-edit). See Editing Within Tables in the Table Interaction Methods guideline for details.
  • Create Inline is recommended when:
    • All primary objects in the table are of the same type, such as employees or orders.
    • The number of columns is relatively small.
    • All object attributes can be entered directly in the table.
  • The Add Row command must be available in tables which support the Create Inline action.
  • The tooltip text for the Add Row icon should be "Add Row".
Note: If product teams want to provide tables with empty rows like those in a spreadsheet, they may pre-populate their data sources to do so.

Create in Form Bookmark this Heading Return to Top

Purpose:

Create in Form creates a new object using data entered in a form in a dialog window or on a separate page.

The Create Item button in a table toolbar

Create Button in Toolbar

Description:

  • The Create in Form action should be available as follows:
    • Menu: By using the Create command from an object-specific actions menu (see Object-Specific Actions Menu in the Table Elements guideline).
    • Toolbar: By clicking the iconic Create button.
  • The new row should always be visible on the screen; the table scrolls if necessary to show it. Focus goes on the first widget in the new row. The placement of the new row depends on whether a row is selected when launching the Create action:
    • No Row Selected: The new row becomes the first row of the table.
    • Single Row Selected: The new row is placed directly above the selected row.
    • Multiple Rows Selected: The new row is placed directly above the topmost selected row.
  • If a column is sorted, the new row is moved up or down to its correct position in the sort order once the page is saved. The table scrolls if necessary to keep the new row in view.

Usage:

  • Create in Form may be implemented in a dialog box or a page. For recommendations on when to use a dialog, see Dialogs in the Secondary Windows guideline.
  • The Create menu option should include the name of the object being created, such as "Create Invoice".
  • Create in Form is recommended when:
    • The object type has too many attributes to display in the table without horizontal scrolling, and it is necessary for the user to see all attributes before continuing. This may be because some of those additional attributes should be populated with data.
    • Creating a new object is time-consuming, especially in wide tables with many columns.
    • The table contains a mix of primary object types (common in Tree Tables).
  • If the table has a toolbar, it is recommended to include the Create button on the toolbar, unless Create is expected to be a low-frequency action.
  • The tooltip text for the iconic Create button should be "Create". Product teams may append the object type or additional context to explain the action, such as "Create Line Item", if the table has heterogeneous objects or if it may be unclear to the user what is being created.

Row InsertionBookmark this Heading Return to Top

Rows are typically inserted above the selected row in spreadsheet applications. For HTML editing applications where the table is used more for layout purposes, it can be useful to insert a row either above or below the selected row.

  • Row insertions should be dependent on row selection.
  • Users can add either a single row or multiple blank rows.
  • In the case of an ordered list, where users need to specify placement of the added row, the Add Row Before and Add Row After can be separate actions available in the same table.
  • Product teams should code tables to remove inserted blank rows from the table once the page is submitted.

Insert Rows Before Bookmark this Heading Return to Top

Usage:

  • In typical cases, when an object list does not assume an order or logical grouping, then a row should be inserted above the current selection.
  • When a row is inserted above the selection, its position depends on whether a single row or multiple rows are currently selected:
    • Single Row Selected: the new row is placed directly above the selected row.
    • Multiple Rows Selected: the new row is placed directly above the topmost selected row.
  • Tooltip text for the Add Row icon should be "Add Row".
  • When the "Add Row" action is shown as a menu item:
    • The label should read "Add Row".

Insert Rows After Bookmark this Heading Return to Top

  • In certain cases rows may be inserted after the current selection, when:
    • The object list needs to assume a certain order. In such cases, the rows are not expected to be auto-sorted, but ordered manually by the user; an example of this is a checklist that contains a list of steps.
    • The object list contains hierarchies and logical groupings, such as a tree table. A user may want to insert an object within a selected group parent. For instance:
      • A tree table could contain a multi-year budget list, with each year as a parent row, and line items as child rows. To create a new line item, the user first selects a row representing the desired year and selects Add Line Item. The new entry will then be created within (instead of outside) the Year group.
  • When a row is inserted below the selected row, its position depends on whether a single row or multiple rows are currently selected:
    • Single Row Selected: the new row is placed directly below the selected row.
    • Multiple Rows Selected: the new row is placed directly below the bottommost selected row.
  • Tooltip text for the Add Row icon should be "Add Row".
    • Dropdown menu options should be "Add Row Before", "Add Row After".
  • When the "Add Row" action is shown as a menu item:
    • The label should read "Add Row".
    • Submenu options should read "Add Row Before", "Add Row After".

Add Row Before and Add Row After menu options in a table

Add Row Before and Add Row After Menu Options

Edit Bookmark this Heading Return to Top

Purpose:

Edit modifies an existing object by changing its details.

The Edit button in a table toolbar.

The Edit button in a table toolbar

Description:

  • Different types of table have different models for editing data:
    • Read-Only Tables: Users select a row and then use an Edit command (described below) to launch a dialog or edit page.
    • Click-To-Edit Tables: Users can double-click a row or select a row and press F2 to make the row editable, or they use an Edit command in the same way as read-only tables to modify additional attributes.
    • Direct-Edit Tables: Table cells are directly editable, so there is no need for a specific Edit command.
    • See the Table Interaction Methods guideline for information about selection-based methods, click-to-edit, and direct-edit tables.
  • If a read-only table supports row selection, the Edit command should be available as follows:
    • Menu: By selecting a row and using the Edit command from an object-specific actions menu (see Object-Specific Actions Menu in the Table Elements guideline).
    • Context menu: By right-clicking a row header and selecting Edit.
    • Toolbar: By selecting a row and clicking the iconic Edit button.
  • If a read-only table does not support row selection, product teams can provide an Edit icon in a column of functional icons instead. This option is not applicable for click-to-edit tables, which always support row selection. For more details on use of functional icons, see Functional Icons in an Action Column in the Table Interaction guideline.

Usage:

  • Edit is recommended in tables with Duplicate or Create actions, so that the user can modify objects after creating them.
  • Edit may be combined with any other common table action.
  • If a read-only or click-to-edit table has a toolbar, it is recommended to include the Edit button on the toolbar, unless Edit is expected to be a low-frequency action.
  • It is recommended to implement Edit using a dialog box containing fields for editable object attributes.
  • The tooltip text for the iconic Edit button should be "Edit". Product teams may append the object type or additional context to explain the action, such as "Edit Line Item," if the table has heterogeneous objects or if it may be unclear to the user what is being edited.

Export Bookmark this Heading Return to Top

Purpose:

Export allows the user to extract selected or all records from a table and places them into an editable Microsoft® Excel® file. Teams provide an icon for the Export button.

Export button in a table toolbar (for multi-select tables)

Export Button in Table Toolbar (for Multi-Select Tables)

Description:

  • The Export action should be available as follows:
    • Menu: By using the Export command from an object-specific actions menu (see Object-Specific Actions Menu in the Table Elements guideline).
    • Context menu: By right-clicking a row header and selecting "Export".
    • Toolbar: By clicking the iconic Export button.
  • Export can also be presented as two options: "Export Selected" and "Export All".
    • In the menu and context menu, the two options are presented in a submenu.
    • In the toolbar, the two options are presented in a list panel.
  • The Export options can either extract all data or a subset of data from the table, depending on whether and how rows are selected:
    • If the user selects some records, and then selects "Export Selected", the table will export only those records that are selected.
    • If the user selects all records, and then selects "Export Selected" or "Export All", the table will export all records.
    • If the user selects some or even no records at all, and then selects "Export All", the table will export all records as well.
    • If the table selection is disabled, clicking the "Export" button will not provide a dropdown list showing the Export All and Export Selected options; in that case, clicking the "Export" button will simply perform an Export All action.

The Export menu  option (for Multi-Select Tables)

Export Menu Option (for Multi-Select Tables)

Usage:

  • Export is recommended in tables where data must be shared with other external systems.
  • Export should be implemented when users need to:
    • Review a list of data offline. For example, a sales representative may want to export and print a weekly report of open sales opportunities.
    • Import the data elsewhere. For example, a shipping dock manager may wish to export a list of all goods packaged on a single day and send that information to an external inventory restocking program.
  • The tooltip text for the iconic Export button should be "Export".
  • If the table has a toolbar, it is recommended to include the Export button on the toolbar, unless Export is expected to be a low-frequency action.