Anatomy
- Heading: Identifies the set of tiles
- Category: Provides access to all templates or the user's templates only
- Search field: Locates templates by titles in a specific list of a highlighted tab
- Contextual side panel icon: Shows the templates feature is available
- Create template: Initiates a flow to create a new template
- Tile list: Shows tiles in alphabetical order by template title (and refreshes with updates)
- Tile: Includes title, subtext, and action menu
Usage
Learn about the form templates component and find out how to use it in your design. The iconic button opens a form in a child tab allowing the user to create a new template. All new templates created are automatically assigned to the user.
When the user selects a template tile, all applicable fields are applied to the current form. Felds that aren't present on the current record will trigger a warning message telling the user that the field values haven't been applied. The user can close the message at any time.
Types
The form templates component appears in full size only and displays within the contextual side panel.
Configurations
Learn how to customize form templates by configuring the available properties.
Presets and controllers
This component contains a preset configuration that automatically configures properties and event handlers for a component, making the component ready to work when you add it to a page. A preset is designed to suit a specific use case. However, you can override preset property values with a custom configuration if you find it necessary for your design. Preset values that you override aren’t upgraded when updates are available. If you don’t want to use the preset values provided, select the option to configure the component manually. You can apply one preset to a single instance of a component on a page. For more information, see Presets.
A preset is always associated with a controller, which acts as a data resource for the component. Controllers provide the configuration data and event bindings the component needs to function in your experience. By selecting a preset, the required controller is added to the page. By adding a controller to the page, any new applicable components will have that controller's preset. For more information about how controllers work, see Controllers. For instructions on using the data inspector to view the default presets for a component, see View properties and events in the Controller API.
Actions
You can configure certain actions to show in the tile action menu based on the end-user's permissions.
Design recommendations
Learn how to apply the form templates component in your design.
Put the component into a container large enough for much of the content to be seen without having to scroll (for example, the contextual side panel).
Avoid putting the component into a small container because much of the content will be cut off and multiple scroll bars will be required to navigate the component.
UI text guidelines
These are some recommendations for using text within the form templates component.
- Use sentence case for all titles, labels, and column headers
- Keep all text labels short and informative to increase readability and scanning
- Keep content concise and purposeful to provide value to the user
- Capitalize only the first letter and any proper nouns in a string of text
- Ensure content is contextual and specific to offer guidance and support to the user
Behavior
Learn how the form templates component behaves when the display changes or a user interacts with the component.
States
The form templates component has 4 states: tile empty, tile hover, tile selected, and tile action menu.
In this example, the templates component tile is in an empty state.
In this example, the templates component tile is in a hover state.
In this example, the templates component tile is in a selected state.
In this example, the templates component tile is in an action menu state.
Responsive behaviors
Tiles resize horizontally only, and a scroll bar appears when the vertical space is filled. The height of the tiles doesn't change. As the width of the container increases, the width of the tiles also increases (up to maximum size), and the tiles transition from a single-column view to a multi-column view.
In this example, tiles are in a single column view at maximum width.
In this example, tiles are in a 3-column view at maximum width.
Interactions
Learn how the form templates component responds when a user interacts with it.
Tile
Each tile includes a short title, description, and action menu. Selecting a tile applies the template to the current record. When the user applies a template, all field values set in the template replace the existing field values in the record.
In this example, the action menu opens with editing options.
You can determine an end-user's access to action menu options. If a user has not been granted edit or delete actions, that option will not appear in the menu. Users not granted either of the menu options will not have the action menu present in the template tile. Templates appear in alphabetical order.
In this example, the function for editing an existing template is in an open child tab.
Iconic button
Users can create new templates by selecting the iconic button. This opens a form in a child tab for the user to complete. Once the new template has been saved, it will appear within the "My Templates" and "All" categories in the contextual side panel.
Search
The user can search for templates by titles and short descriptions to apply to the current record.
Truncation
When text in the template tile exceeds its maximum width, the text truncates with an ellipsis and a tooltip shows the full content on hover.
Usability
The form templates component complies with all internationalization and accessibility requirements.
Internationalization
When the display translates to a right-to-left (RTL) language, the component content flows from right to left, maintaining the hierarchy.
Accessibility
Learn how to access the actionable elements of the form templates component through keyboard interactions and screen readers.
Keyboard interactions
You can access the actionable elements of the form templates component with these keyboard keys:
- Tab: Shift focus to template tiles and tile menus, starting at the top and moving down the list of tiles in alphabetical order. The focus will move from the template tile then to the tile menu. Content of the tile does not shift when in focus (for example, truncated text does not expand when the tile is in focus).
- Shift+Tab: Moves focus in the opposite direction of the tabbing focus (for example, focus moves from a template tile menu to the associated tile then to the template tile menu from the tile above it).
- Enter/Space: Applies the template currently in focus on the template tile and can open the template tile menu and execute the actions in that menu.
- Up and Down arrows: When focus is inside the template tile menu, the up and down arrow keys are used to move between the tile menu options.
Screen readers
When you apply ARIA labels to a component, the screen readers announce the controls and content of the form templates component in the prescribed tab order.
- Search bar: "search field"
- Plus button: "create new template"
- Template tiles: "template tile"
- Tile menu: "template tile menu"