| Table Row Edit (Dialog Box) | Version 2.0.0.0 |
||
|
|||
| Description | |
| Use the Table Row Edit (Dialog Box) pattern when a user needs to edit one or more objects at a time, and the information to be edited will fit in a dialog box. The user can see the base table or tree table while interacting with the dialog box. |
| Pattern Set Decision Table | |
Table Row Edit (Dialog Box) |
||||||
| Is the editable content limited to one to two attributes? | Yes |
No |
No |
No |
No |
No |
| Is the amount of editable content attributes suitable for a dialog box? | No |
Yes |
No |
No |
No |
No |
| Does the amount of editable content require a large amount of space or a complex component? | No |
No |
Yes |
Yes |
Yes |
Yes |
| Does the user need to see the object attributes being edited in the context of other objects? | Yes |
Yes |
No |
Yes |
No |
Yes |
| Do the editable attributes for groups of objects need to be set to the same value? | Yes |
Yes |
Yes |
No |
No |
No |
| Is the level of editing suitable for a self-service or novice user? | Yes |
Yes |
Yes for a |
No |
Yes |
No |
| Pattern Sample | |
| Single Selection |
The user selects a record (table or tree table row) and clicks the Edit icon button. |
![]() |
| Figure 1. Selecting a single record to edit |
| Users are presented with a dialog box where they can edit the record data. Clicking the Cancel button closes this dialog box and all changes. Clicking the Save button commits the changes and closes the dialog box. |
![]() |
| Figure 2. Editing and saving the selected record data in a dialog box |
| Required Screen Elements | ||
| Component Type | Required Components | Customizable or Extendable Components |
| Dialog Box Title | Use this format: Edit <Object Type>: <Object Name> For example: Edit Contact: Eric Note that if the object name itself is an editable attribute, the change will not be reflected in the dialog box titlel; it applies once the dialog box is saved. |
NA |
| Dialog Box Layout | This pattern provides a container to insert the desired form elements of the transaction. See the Information Entry Form Basic Form (Dialog Box) pattern. |
Form fields may be any standard Web widget (for example, text field, choice list, LOV, radio button, and so on). |
| Dialog Box Buttons | Include these dialog box buttons:
|
NA |
| Multiple Selection |
Users first select objects, such as rows in a table or tree table, then click the Edit icon button (or right-click and select Edit from the contextual menu) to launch a dialog box. In the dialog box, users can change all similar attributes to a single value for the selected items. When users click the Save button, all changes are applied to the table or tree table. |
![]() |
| Figure 3. Changing similar attributes to a single value for the selected items |
| Required Screen Elements | ||
| Component Type | Required Components | Customizable or Extendable Components |
| Table or Tree Table | A table or tree table is used to display the list of objects. | NA |
| Toolbar | Edit (icon button): Launches a modal dialog box to edit the selected objects. |
NA |
| Dialog Box Title | Use this format: Edit <Object Types> For example: Edit Objectives Note that specific object names are not listed in the dialog box title because there are multiple objects in this scenario. |
NA |
| Dialog Box Layout | This pattern provides a container to insert the desired form elements. See the Information Entry Form: Basic Form (Dialog Box) pattern. |
Form fields may be any standard Web widget (for example, text field, choice list, LOV, radio button, and so on). |
| Dialog Box Subheader Title | NA |
If selected items appear in the dialog box, they should appear in a region at the top. Use this format: Selected <Object Names> (for example, Selected Employees). |
| Dialog Box Table and Toolbar | NA | Selected objects from the base table can appear in a table. Object details may include the object name and the values that can be edited. If a table is added, you should also include a Remove button to enable the user to remove objects from the table. |
| Dialog Box Buttons | Include these dialog box buttons:
|
NA |
| Related Guidelines | |
| Buttons | Guidelines for buttons in toolbars |
| Form Layout | Guidelines for form layout |
| Page Actions | Usage information and design guidance for buttons at the page level and on dialog boxes |
| Tree Table | Guidelines for the Tree Table component |
| Tables | Guidelines for the table component |
| Toolbar | Guidelines for the toolbar component |
| Secondary Windows | Guidelines for secondary windows and dialog boxes |