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. Press the ‘w’ key to enter Configure mode.
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. Press the ‘e’ key to enter Design mode.
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. Press the ‘d’ key to toggle the Data Panel.
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.
- Table: a performant, paginated, read-only view of existing child items
- View: view and edit existing child items, metrics, participants; view audit history
- List: create and edit child items, metrics, attachments, dashboards, presentations
- 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
- Card: high level insight into data within your solution
- Board: drag-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 length and width at the same time, or click and drag the sides of the section to resize length and width individually.
The Layout toolbar allows you to do the following:
- Select Standard layout
- Select Condensed layout
- Enable/Disable the Filter bar
- Add a section
- Set a section’s height setting (currently auto-height)
- Duplicate a section
- Move a section to a different layout on the template
- 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 or sides 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.
