Operations and actions in a table layout
Learn about the table layout operations and actions that you can configure to customize your layout. For example, you can enable row editing and configure keyboard actions to enable users to navigate and access items in a repeating grid.
The operations and actions for the table layout are available on the Operations and Actions tabs of the table Properties panel.
Row operations
Row editing
The row editing mode sets the default presentation and behavior configuration for a grid, determining how users view and edit properties.
For Inline and Master-detail row editing options, the default behaviors are available on the Actions tab. See Actions tab and the Actions tab for more information.Option | Description |
---|---|
None | Select this option if the row's data cannot be edited. You can allow the user to display the flow action's fields by selecting the Show details option on this tab, under Grid operations. |
Inline | Select to enable inline editing of the row's data. |
Inline edit mode | Available when you select Inline. Select an inline edit
mode:
|
Master-detail | Select to enable the user to edit the details of a master object. The user can navigate between master objects and make changes to details without leaving the page. For more information, see Configuring master-detail settings. |
Editable in modal | Editable in modal options are available when the Optimize code check box is selected on the General tab. |
Display of details | Select a way to display row details when a user clicks a row:
Click Open template to open the section used to render the layout. When the Optimize code option is selected on the General tab, the pyNextGenGridModalTemplate will open. By default, the templates are standard rules .pyGridModalTemplate, .pyGridRowDetails, and .pyGridDetails, respectively. To create custom templates, copy these rules into your Applies To class. Do not change the Purpose. |
Modal format | Available only when the Optimize code option is selected
on the General tab. Select a format for the modal dialog. The
default is Standard . To specify a custom format defined in the
skin, select Other . Press the Down Arrow in the field that displays
to select the format that you want to use. |
Detail flow action | Available when you select:
|
Display details read-only | Available when you select Master-detail as the
Row editing operation. Not available when
Editable in modal is selected together with the
Optimize code check box on the General
tab. Select to allow the user to view the flow action details in read-only mode, which prevents locking the work item ( Work- or Assign- item) when it opens. Do not select this option if the flow action contains an editable grid. The user will be unable to perform work in it. |
Display an expand/collapse icon per row | Available when you select:
Select to display an Expand/Collapse column at the far left of the grid at runtime. The column displays an icon in each row of the grid. The Expand/Collapse column is optional; users can click in the row to expand or collapse the pane, or you can insert a button, icon, or link anywhere in the row to enable expand and collapse. If you deleted the default Edit Item action from the Expand Pane edit mode, then select this column to use Expand Pane. |
Details location | Available when you select Master-detail as the
Row editing operation together with Expandable
rows to display details. Select Default, to display details after the grid, or select In place of a section to specify the section in which you want the details to appear. For example, assume you want the detail area to appear to the right of the grid instead of below it (default). Create a section (named gridResults ) containing a two-column layout. Embed the grid in the first column and an empty section in the second column. Specify the name of the empty section here. |
Grid operations
check box | Description |
---|---|
Allow column sorting (Additional settings on column) | Select to allow users to sort the rows on a column in the grid. This setting
applies to all columns. You can disable sorting for individual columns by clearing
the Enable sorting check box in a column's Cell
properties panel. Sorting is not available for columns containing
images, or controls such as buttons (but can include links). This setting overrides
the Sort type settings on Report
Definition form's Design tab. For instance, if
there are no settings that form, the Sorting selection here enables sorting on the
grid. A tool tip appears at runtime when the user hovers the mouse pointer over the column header. Clicking the header sorts the rows in the column. When sorted, an icon indicating an ascending or descending sort order appears to the right of the header label text. The user can alternate the sort order by clicking the header again. You can use the Skin rule to replace the default icons. Sorting is performed on all rows in the grid. If Paging is enabled and the user changes the sort order, the grid view returns to the first page. |
Allow filtering (Additional settings on column) | Select to allow users to show only those rows that match a column value
filter. This setting enables filtering for all columns that include a property. You
can set filter types or disable filtering for individual columns using the
Filtering options in the Column
properties panel. If a column can be filtered, a filter icon appears on the right side of the column's header cell. The user clicks the icon to display the filter pop-up menu. The user can select check box next to a property that is to be included in the filter or enter a text, or combine the two methods and click Apply. You can use the Skin rule to replace the default icons.The following rules apply to filtering:
If the filter does not produce results, a message appears. You can modify the message text in the section pyGridNoResultsMessage. |
Allow filtering on unexposed properties | Available when you select Allow filtering. Select to allow filtering on unexposed columns. |
Display selected filter values first | Available when you select Allow filtering. When
selected, the names of the columns selected for filtering are listed at the top of
the filter panel. This option is enabled by default when the Optimize code option is selected on the General tab although this check box will not appear. |
Allow row reordering | Select to allow users to move objects higher or lower on the display by dragging and dropping individual rows. Depending on the properties of the objects the rows represent, rows may be moved above or below other rows, or dropped into a row that can receive them to become child entries of that row. | Visual indicators give clues about the process: a line appears between two rows in the list if that is where the row you have started dragging will appear if you release it. A row that can receive the row you have selected as a child will change background color. If your mouse pointer is over an area where you cannot drop the row you have selected, an indicator will remind you that the area is not a valid target. If you attempt to drop the row there, the display will remain unchanged.
Allow column resizing | Select to allow users to adjust the width of columns on the display by dragging individual columns to the left or right. |
Categorize grid rows (Additional settings on column) | Avaliable when the source of the grid (specified on the
General tab) is a Report Definition
and the Row editing operation on the
Operations tab is None. Select if you want categorize grid rows based on columns within the grid. You can select the columns by which you want to categorize the grid, and specify sorting and ascending or descending order on the column properties panel of the column within the grid. |
Use custom category template | Available when you select the Categorize grid rows
check box. By default, the pzGridCategoryHeader template is
applied. Select this check box if you want to specify a custom category template in the field that displays. |
Show details | Select to allow the user to click a row and display its flow action details beneath the row in read-only mode. The user can expand multiple rows. Enter the flow action in the Flow action field. |
Allow refresh on update | When checked, the entire layout is refreshed each time data is updated or submitted. |
Select first row on initial load | Available when you select Master-detail as the
Row editing operation and select to display details in
Embedded elsewhere. Select this check box if you want the first row to display as selected when the grid initially loads. |
Enable displaying details on multiple rows | Available when you select Master-detail as the
Row editing operation and select to display details in
Expandable rows. Select to enable users to expand more than one row at a time. |
Expand all | Available when Show details is selected. Select to display details for all rows when the user opens the form. |
Advanced
Check box | Description |
---|---|
Run activity on row add | Select this check box to start an activity when a row is added to a
non-optimized table.
|
Run activity on row delete | Select this check box to start an activity when a row is deleted from a
non-optimized table.
|
Run activity before grid update | Select this check box to start an activity before the layout is updated.
|
Run activity after grid update | Select this check box to start an activity after the layout is updated.
|
Actions tab
About Grid Actions
Depending upon the row editing format you choose, you may see actions defined by default, on the Actions tab. These actions determine how users view and edit data in the grid.
If you select Master-detail as the Row editing option, the following actions are defined by default:
Row editing | Description | Default Actions |
---|---|---|
Modal dialog | The displayed data appears as in read-only mode. When the user clicks a row, the editable fields for the flow action appear in a modal window on top of the data display. When the modal window is dismissed, the edits are applied. |
|
Embedded elsewhere | The displayed data appears as in read-only mode. When the user clicks a row, editable fields for the flow action populate a detail area below the grid. When the user saves the edits or selects another row, the edits are applied. |
|
Expandable rows | The displayed data appears as in read-only mode. When the user clicks a row, the flow action's editable fields populate a detail area below the selected row. When the user saves the edits or selects another row, the edits are applied. |
|
The system uses existing grid actions to determine whether to set focus to new rows. When adding a new row, if focus is configured for the grid, then the system sets focus to the new row.
If you select Edit in modal as the Row editing option when the Optimize code check box is selected on the General tab, the following actions are defined by default:
Row editing | Description | Default Actions |
---|---|---|
Modal dialog | The displayed data appears as in read-only mode. When the user clicks a row, the editable fields for the flow action appear in a modal window on top of the data display. When the modal window is dismissed, the edits are applied. |
|
When configuring actions in a repeating grid, on the Actions tab, select actions from a List category.
You can configure sequential actions based on a single event for a repeating grid; for
example,
Click
to
Set Focus
and
Click
to
Edit Item
. The actions are acted upon in the order specified. You can set
multiple actions based on different events; for example,
Click
to
Set Focus
and
Double Click
to
Edit
Item
.
You can also configure Keyboard actions to enable users to navigate and access items in a repeating grid. For example, you can configure the Up and Down arrows to set focus to the previous and next rows in a grid, and the Enter key to open the selected item.
If you want to set focus from within a row in a repeating grid to an editable control outside of the grid, provide the full path to the property, beginning with the parent page, and represent it on the Pages & Classes tab of the layout containing the repeating grid.
UI Gallery
The UI Gallery landing page contains a working example of this element. To display the gallery, in Dev Studio, click
.Previous topic Optimizing table code Next topic Creating a table layout with code optimization