Configuring Templates

Overview

Templates can be configured by App Admins by accessing Apps from the Navigation Sidebar and opening the template – or – you can select View Template from the Action Menu (upper right corner) on any instance of a template.

Add/edit/remove template tabs via the tab management dialog in the action menu.

Templates can be edited in 2 distinct modes:

  • Configure: This mode allows you to configure the sections, including adding columns, editing filters, defining section titles, etc.
  • Design: This mode allows you to design the layout. A format bar is displayed with options to select a layout and its spacing or add, duplicate, move, delete, or set height settings for sections.

The Data Panel is a window that can be toggled on and off in either Configure or Design modes. This panel allows you to manage the data on a template, including attributes, data sets, business rules, roles, and child types.

Configure Sections

While in configure mode, the section settings gear will provide access to customize the section, rename the section, and manage section settings.

Sections Overview

Sections are the building blocks in a template. They are the place where items can be created, viewed, and edited, and attributes can be defined.

  • View: view and edit existing child items, metrics, participants; view audit history
  • List: create and edit child items, metrics, attachments, dashboards, presentations
  • Table: a performant, paginated, read-only view of existing child items
  • Export / Import: download an Excel file of child items and upload the edited file to make updates
  • Create Form: creation of work items via a form
  • Edit Form: define and display text, numeric, percentage, date, pick list fields
  • Cardhigh level insight into data within your solution
  • Boarddrag-and-drop items across columns to visualize and manage your work
  • Alert: display dynamic alert content to convey important information
  • Rich Text: include a section with formatted text
  • Embed: point to a URL outside of Shibumi to be displayed in the section
  • Image: attach an image to be displayed in the section
  • Visualizations* (may have a different name): include custom sections added by an App Admin

Rename a Section

Lists, Views, Forms, Embedded sections, Tables, Boards and Export/Import sections can be renamed through the Rename Section dialog accessed by clicking on the settings gear in the upper right-hand corner of the section while in Configure mode.

When no section title is present, the section header will be collapsed, and section controls will appear outside of the section.

Enter text or an injected expression using the {!Attribute_API_Name__c} syntax to dynamically set the section title. Click Rename.

Design the Layout

Toggle into Design mode to view the Layout toolbar and modify the design of the Layout. Click on a section and drag to move it to a new location on the Layout. Click and drag the bottom left or right corner of a section to resize.

The Layout toolbar allows you to do the following:

  1. Select Standard layout
  2. Select Condensed layout
  3. Enable/Disable the Filter bar
  4. Add a section
  5. Set a section’s height setting (currently auto-height)
  6. Duplicate a section
  7. Move a section to a different layout on the template
  8. Delete a section

Managing Layouts

Each tab on a template can have one or more Layout associated to it. In Design mode, on the right side of the toolbar there is a dropdown menu with the title Editing Layout. This Edit Layout dropdown shows the Layout that is currently being displayed on the tab.

 

Each Layout on a tab is separate from one another, with each being dependent on a visibility expression set in the Configure Tab setting. Use the Editing Layout dropdown for seamless switching between multiple Layouts mapped to the tab, allowing for quick configuration of complex solutions. Please visit our Managing Tabs article for more information.

 

Note: If the Editing Layout dropdown is greyed out, then there is only one Layout defined for the current tab.

Standard Layout

The page is divided into a grid with padding around each section. Sections can be sized to any rectangular shape within the grid by using the sizing handles in the bottom left and bottom right corners of each section.

Condensed Layout

The page is divided into a grid with thin boundaries around each section. Section sizing behaves the same way as the Standard layout. This format gives you the ability to fit the most content onto a page.

Add a Section

Click the plus button to open the Add Section dialog. Select a section type from the options on the left and add the section.

Height Settings

Sections can remain Fixed height on a Layout, or they can grow to Fit to Content or Fit to Window. On the Layout toolbar, select the Height icon to the right of the Add Section button. The icon display and hover help will change based on the currently selected Height Setting.

Fixed Height

The Fixed Height Setting option forces a section to remain at is designated size. While in Design mode, you can set the height and width of a section by selecting a corner and dragging it to the preferred size. Selecting the Fixed height option ensures that the size of the section will not change. This option is available on all section types and acts at the default setting.

Fit to Window

The Fit to Window option allows a section to grow and shrink depending on the dimensions of the browser window. Selecting Fit to Window on a section will result in that section re-sizing itself in order to fill the remaining space of the window. By making the section expand to the remaining height of the window, it allows for greater UX control and optimization across browser/screen sizes. This option is available on Lists, Views, Forms and Rich Text sections. When a section is set to Fit to Window, the Fit to Window icon will be displayed at the bottom of the section when in Design mode:

Note:

  • To avoid extra scrolling behavior, do not put another section under one that’s Fit to Window. Additionally, don’t do this on presentation slides as it will have undesirable behavior when publishing.
  • The Fit to Window setting is best not used on a Tab with Discussions.

Fit to Content

The Fit to Content option allows a section to grow and shrink depending on content. The height of a section within a Layout will be the minimum height of the section. As content grows, the section grows. If content shrinks (or is filtered down, toggled to a different view, etc.), the section will shrink, but it will not get smaller than the minimum height defined on the Layout. This option is available on Lists, Views, Forms, and Rich Text sections.

When a section is set to Fit to Content, the Fit to Content icon will be displayed at the bottom of the section when in Design mode:

Manage Data

Toggle into Data Panel to access the template Data. Here you can add attributes, metrics and business rules, configure data sets, roles, and child types.

The Child Types tab allows you to configure a parent-child relationship between templates, which defines the solution hierarchy. Only templates defined as Child Types will appear as available Lists in the Add Section dialog in Design mode.

Learn more about template data management here:

Publish Template

Once you have completed your modifications, click on the Publish icon to make the modifications available to end users.

Upon successful publish, the Success alert will appear in the bottom right of the page.

Users currently on an instance of the published template will see an alert that the App has been modified and a refresh is required to continue working.

 

Updated on July 29, 2023

Related Articles