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 Configure 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. 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 menu, 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 will erase any Custom Forms upon saving.
  • Disabling Edit Forms will erase any Custom Forms upon saving.

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:

  • Metric columns cannot be included in Create Forms. Additionally, non-editable out-of-the-box attribute columns will not appear in the default Create Form.
  • Switching between Custom and Default Forms will erase Custom Forms upon saving.
  • Disabling Create Forms will erase 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 Attribute Columns

  1. Click on the Settings icon (gear) at the top right of the Table.
  2. Select Customize.
  3. Click on the + Add Column button on the top right of the section, choose the Attribute option.
  4. The Add Attributes dialog will open allowing you to choose from existing attributes defined in the template(s). The icons can be used to filter by category. You can also use the search bar to find an attribute.
  5. Select the checkbox of the attribute(s) you would like to add as a new column(s) and click Save at the bottom of the dialog. Note: the columns will be added in the same order they were selected.
  6. Save the section.

Add Calculated Columns

  1. Click on the Settings icon (gear) at the top right of the Table.
  2. Select Customize.
  3. Click on the + Add Column button on the top right of the section, choose the Calculation option.
  4. Configure two Values with the Attribute value type, these will be used to create the calculation for the column. For a Metric attribute, define the Data Set and Timeframe.
  5. For the third Value, select Operation as the Value Type. Choose the two previously configured Values, define the Operator (+, -, x, /) and the Result Type (Number, Percentage, Currency) for the Value.
  6. On the Display tab, define the Value to Display (Operation). Configure the Decimal Places, Header Label and Width for the Column.
  7. Select the Add button. Save the Table.

Note: Only Values with the Operation value type can be displayed in Calculated Columns, Calculated Columns can be edited to change their Values.

Add Metric Timeframe Columns

  1. Click on the Settings icon (gear) at the top of the Table.
  2. Select Customize.
  3. Click on the + Add Timeframe button at the top right of the section.
  4. The Add Timeframe Columns dialog will open allowing you to choose from existing Metrics defined in the template(s).
  5. With a Metric selected, select the Data Set to display. If there is a Data Set Page Filter configured then it can be selected.
  6. Define the Frequency for the Metric Timeframe Column. Note: The Frequency preset options will be equal to or greater than the selected Metric’s Period of Measure.
  7. Finally, define the Timeframe. You can choose from any configured Date Range Page Filters or the Custom option which allows you to individually define the Start and End Dates with static dates or injected expressions.
  8. Select the Add button and Save the section. See Configure Metric Timeframe Columns below for more information.

Note: When adding a Metric Timeframe Column, the new column will display as a normal column. However, once you exit Customize mode the timeframe column header will appear above all others, with sub-columns below representing the frequency and timeframe of the metric data displayed.

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 dropdown 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.
    • In the Format Type drop down, define how the Conditional Formatting will be displayed for the column. Choose one of the following options: Background, Text, Icon, Icon/Text.
    • Note: If Icon or Icon/Text is chosen, define the Icon Set that will be displayed within each cell.
  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.

Configure Metric Timeframe Columns

  1. In Customize mode, with a Metric Timeframe Column added to the table, click on the column menu icon on the that appears when hovering over the column.
  2. Select Configure to display the Edit Column dialog.
  3. Edit the Label and Sub-Column Width. The Width setting will be applied to the individual Sub-Columns.
  4. You can change the Timeframe by selecting the respective field. Choose between any configured Date Range Page Filters, available preset options, or define a Custom Timeframe.
    1. If Custom is selected for the Timeframe, the Start and End Dates for the timeframe must be defined.
    2. Define the Start/End Dates with a static date or by using the Shibumi Expression Language.
      • E.g., Entering addMonths(today(),-6) for the Start Date and today() for the End Date of the Metric Timeframe will display the metric values from 6 months ago to today.
  5. Define the number of decimal places to display via the drop-down menu.
  6. (Optional) Enable Conditional Formatting for the Metric Timeframe Column. This will apply the Success/Warning/Error enterprise colors to the row’s cells based on the value.
    • In the Format Type drop down, define how the Conditional Formatting will be displayed for the column. Choose one of the following options: Background, Text, Icon, Icon/Text.
    • Note: If Icon or Icon/Text is chosen, define the Icon Set that will be displayed within each cell.
  7. Click Update.
  8. Save the section.

Note: If you have configured a dynamic timeframe that will produce a varying number of metric columns, ensure the appropriate Width setting has been selected. Fixed width may be necessary to ensure visibility of all columns for longer timeframes, while Flex width may work better for you when there’s are fewer columns or a fixed timeframe.

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.

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.
  • Metric Timeframe Columns cannot be sorted while in Customize mode. Users can sort the sub-rows when interacting with the section.

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.

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.

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.
Updated on November 17, 2024
Tagged:

Related Articles