1. Home
  2. Knowledge Base
  3. General Shibumi Knowledge
  4. Solution Design
  5. Template Layout & Data
  6. Table Sections
  7. Configuring Table Sections
Searching...

Configuring Table Sections

Contents

Overview

The Table section is an extremely performant display of work items (i.e., instances of a template) or associations. Tables can be configured to include editing of data or creation of new work items.

Tables will be paginated when they’re set to Fixed Height and will have virtual scrolling when they’re Fit to Window (default), more information on these settings can be found in the Height Settings article. Tables can also be configured to show a single line-height of data, or 2, 3, or 4 line-height for each row.

Adding a Table

  1. On a layout in Design mode, open the Add Section dialog.
  2. Select the Table option from the left panel.
  3. Click on the desired template or association to define the content to be displayed in the Table section. The Table will be added to the layout.

 

Configuring Table Settings

After successfully creating a new Table Section, follow the steps below to fully configure your new Table. These configuration options can be edited on an existing Table Section via the Settings dialog while in Configure mode on a Layout.

General Tab

  1. Click on the Settings icon (gear) at the top right of the Table.
  2. Select Settings.
  3. Click on the Row Types drop down menu to see all available templates for implementation. Select one or more templates or associations to define row type.
  4. Edit Form: This setting enables single-line editing via a Form dialog. Choose between the Default and Custom Form choices via the drop down, or Disable the Edit Form. Selecting Custom Form will enable the Edit Forms tab of this dialog, allowing you to customize a Form for editing.
  5. Create Form: (Optional) Enable Create from Table by selecting an option from the drop-down menu. This will display a plus button on the Table so users can add new work items. Choose between the Default and Custom Form choices. Selecting Custom Form will enable the Create Forms tab of this dialog, allowing you to customize a Form for editing.
  6. Row Height: Define the Row Height for the Work Items being displayed in the Table, choose from 1-4 Lines. This will apply to all rows in the Table consistently.
  7. Preview Pane: (Optional) Enable or disable the Preview Pane to allow users to preview work items in the Table.
  8. Bulk Edit: (Optional) Enable or disable Bulk Editing for the Table. Ideally, Bulk Editing should only be enabled on Tables that have been optimized for bulk edit. For example, Calculated and Attachment Attributes cannot be bulk edited making their inclusion in Bulk Edit-enabled Tables unnecessary. Additionally, Table columns that are grouped will become individual columns in the Bulk Edit Dialog which could impact the size of flexible-width columns. It is recommended to use fixed-width columns to ensure there’s enough space for editing the content.

Filters Tab

Locked filters can be set when configuring a Table. These filters will apply to all content in the Table and cannot be seen or edited by end users viewing the Table.

Ex: {!toFilter(today())}, {!toFilter(Program__t.Start_Date__c)}

Additionally, Page filters can be set using the injected expression syntax: {!toFilter(API_Name__f)}. Refer to the Page Filtering article for more details on configuration.

  1.  Navigate to the Filters tab in the Table settings dialog.
  2. Choose the attribute on which to filter from the drop-down menu.
  3. Enter a value into the Value field. Filtering syntax can be found here.
  4. Add another filter by clicking Add Filter.
  5. Remove a filter by clicking the trash icon next to the filter.

Edit Forms Tab

Table Sections support quick editing via the use of an Edit Form.

  1. To enable the Edit Forms tab, select Custom Form from the Edit Form dropdown on the General tab.
  2. Navigate to the Edit Forms tab to configure a custom edit form. Forms can be configured for each Row Type included in the Table. See Managing Forms for full configuration options. Once configured to your liking, click Save.
  3. With an Edit Form configured, you can now edit each Row Type via the edit icon in the far-left column of the Table Section.

Notes:

  • Switching between Custom and Default Forms can cause the erasure of any configured Custom Forms upon saving.
  • Disabling Edit Forms will erase any Custom Forms upon saving.
  • Metric columns will not be included in Default Forms because they cannot be added to Forms at this time.

Create Forms Tab

Tables support creation of new work items via Create Forms.

  1. To enable the Create Forms tab, select Custom Form in the Create Form dropdown on the General Tab.
  2. Navigate to the Create Forms tab to configure a custom edit form. Forms can be configured for each Row Type included in the Table. See Managing Forms for full configuration options. Once configured to your liking, click Save.
  3. With a Create Form configured, you can now create new work items via the plus button in the top-right of the Table Section.

When Create Forms are enabled on a Table, App Admins can utilize this feature to seed descendant content on the Template. However, when seeding content on a template, you cannot define values in association attributes.

Notes:

  • Any metric columns will not appear in the default Create Form as they cannot be added to Forms at this time. Additionally, non-editable out-of-the-box attribute columns will not appear in the default Create Form.
  • Switching between Custom and Default Forms can cause the erasure of any configured Custom Forms upon saving.
  • Disabling Create Forms will erase any Custom Forms upon saving.
  • A warning will appear when enabling Create Forms on Association Tables if the association is calculated.

For information on Creating from Tables on an instance, please visit our Utilizing Table Sections article.

Customizing Table Columns & Rows

Table Sections offer many configuration options based on their column and row structure; each option is described below.

Add Columns

  1. Click on the Settings icon (gear) at the top right of the Table.
  2. Select Customize.
  3. Click on the Add Columns option on the right side of the Table to open the Add Column panel.
  4. Columns are grouped by Attributes, Metrics, and Roles. Expand a group and click on a selection to add it to the Table.
  5. Save the section.

Delete Columns

Columns can be deleted in two ways:

  • Through the column menu:
    1. In Customize mode, click on the column menu icon that appears when hovering over the column.
    2. Select Delete Column.
    3. Save the section.
  • By dragging the column out of the table:
    1. In Customize mode, drag the desired column out of the Table.
    2. Save the section.

Configure Columns

  1. In Customize mode, click on the column menu icon that appears when hovering over the column.
  2. Select Configure to display the Edit Column dialog.
  3. In the Column Header Label field, enter text or use an injected expression with the {!Attribute_API_Name__c} syntax to dynamically define the column header.
  4. Column Width: New columns will be set to Flexible by default. See the Resize Columns section for more details.
  5. If the Column is a Picklist, then you can define the Display Format for the column: (Icon or Icon & Name).
  6. Click Update.
  7. Save the section.

Configure Picklist Columns

  1. In Customize mode, click on the column menu icon that appears when hovering over the column.
  2. Select Configure to display the Edit Column dialog.
  3. In the Column Header Label field, enter text or use an injected expression with the {!Attribute_API_Name__c} syntax to dynamically define the column header.
  4. Column Width: New columns will be set to Flexible by default. See the Resize Columns section for more details.
  5. Define the Display Format for the column: (Icon or Icon & Name).
  6. Click Update.
  7. Save the section.

Configure Metric Columns

  1. In Customize mode, click on the column menu icon that appears when hovering over the column.
  2. Select Configure to display the Edit Column dialog.
  3. Enter the timeframe to display using the Shibumi Expression Language.
    • E.g., Entering addMonths(today(),-6) for a monthly metric will display the metric value from 6 months ago.
    • Metric Columns can reference Date and Date Range page filters. This allows you to dynamically set the timeframes for metric columns to quickly switch between dates displayed as the table data will immediately update as filters are changed. The process for this is described below:
      1. On a template, add page filters.
      2. In a table section, add metric columns, and select Configure in the column header menu to open the Edit column dialog.
      3. In the timeframe date field, enter an expression referencing the date and/or date range page filter(s). Repeat for all metric columns. Save the section.
  4. Define the number of decimal places to display via the drop-down menu.
  5. Optionally, enable Conditional Metric Formatting for the column. This will apply the Success/Warning/Error branding colors to the row’s cells based on the value.
  6. Click Update.
  7. Save the section.

Configure Data-Set-Enabled Numeric Columns

  1. In Customize mode, with a data-set-enabled numeric column added to the table, click on the column menu icon that appears when hovering over the column.
  2. Select Configure to display the Edit Column dialog.
  3. To enable conditional formatting, select the checkbox at the bottom of the dialog. This will apply the Success/Warning/Error branding colors to the row’s cells based on the value.
  4. Click Update.
  5. Save the section.
    • Note: For conditional formatting to display in data-set-enabled numeric columns, you must Enable Formatting on the Number Attribute dialog itself.

Pin Columns

  1. In Customize mode, click on the column menu icon that appears when hovering over the column.
  2. Select Pin Column and choose whether to Pin Left or Pin Right.
  3. Save the section.

Note: If there are multiple pinned columns, they can be reordered by dragging the columns.

Aggregate Columns

When columns are aggregated, a Total row appears at the bottom of the Table section. If columns are grouped, subtotals will be displayed in Group rows.

To aggregate columns:

  1. In Customize mode, click on the column menu icon that appears when hovering over the column.
  2. Scroll to the Value Aggregation option. Aggregation methods for the column’s data type will be available. All available choices are as follows: clear (default), avg, first, last, max, min, sum.
  3. Select an aggregation option.
  4. Save the section.

Sort Columns

  1. In Customize mode, click on a column header (do not click on the column menu icon that appears on hover). The sort icon will appear defaulting the column to sort in ascending order.
  2. Click the header again to toggle the sort order to descending.
  3. Clicking the header again will remove the sort option.
  4. To define multiple column sorting, hold down the Shift key on your keyboard and select additional columns by which to sort.  A number will appear next to each sort selection to distinguish the order in which the columns will be sorted.
  5. Save the section.

Note:

  • Column sorting defined in Customize mode will be the default sorting order end users will see upon loading the page. However, end users can change the sorting order/what is sorted freely. Upon page refresh the default sorting order will be restored.
  • For multiple column sorting, the order of column selection determines the sorting priority. You must define ascending or descending sort order before clicking on the next column to include in the sort logic.

Resize Columns

Columns can be resized in two ways:

  • Through the Edit Column dialog:
    1. In Customize mode, click on the column menu icon that appears when hovering over the column
    2. Select Configure to display the Edit Column dialog.
    3. Edit the Column Width. Click the icon in the field to toggle between exact and flexible widths:
      • Exact Width: Set a specific pixel value for the column.
      •  Flexible Width: Set the total shares of available space the column should have among other flexible columns. (Note: flexible width does not apply to pinned columns.) E.g.,:
        • In a Table with 5 columns, set all columns to flexible with the value of 1 so all columns are equal widths.
        • In a Table with 5 columns, where 3 are exact widths, set one flexible column to 1 and one flexible column to 2 for the second column to take up twice as much space as the first (2/3rds of the space not taken up by the three exact width columns).
    2. Click Update.
    3. Save the section.
  • By manually dragging the column border:
    1. In Customize mode, hover over the edge of a column to see the resizing cursor.
    2. Drag the column to its desired width.
    3. Save the section.

Reorder Columns

  1. In Customize mode, drag the column to the desired location.
  2. Save the section.

Group Rows

Table sections can be grouped by any column, with multiple groups nesting in a single column.

Rows can be grouped by columns in the Table in two ways:

  • Selecting the option from the column menu:
    1. In Customize mode, hover over the column that you will group by and click on the column menu icon.
    2. Select on the Group by (Column Name) option. The column name will appear in the grouping toolbar.

  • Dragging columns into the grouping toolbar:
    1. Click and drag a column into the grouping toolbar.

When grouping by multiple columns, you can rearrange the order by dragging the columns horizontally within the grouping toolbar.

The Group column will be named Group by default. This can be renamed to reflect groupings through the column Configure dialog, accessible through the column header menu.

By default, the work item Name will appear within the Group column. This can be disabled by opening the column Configure dialog and deselecting the Show Name setting, if you choose to not display Name in the Table or prefer to display it in its own column.

The Expand/Collapse Groups checkbox defines whether all rows will be expanded or collapsed upon loading the Table Section. By default, the rows will be set to Expand.

Sort the Group column by clicking on the column header. Sort multiple levels of groups by clicking each column name in the grouping toolbar and holding the shift button on your keyboard.

Notes:

  • Grouped columns can be removed by selecting the ‘X’ to the right of the column name within the grouping toolbar.
  • Set the Table’s Height Setting to Fit to Window to avoid a paginated Table. This will ensure all content is visible in a single display and items within a group are not separated across multiple pages.
  • On the instance, dashboard, or presentation slide, grouped Tables can be expanded or collapsed by end users.
Updated on April 26, 2024
Tagged: