Header Widgets
Header widgets are prebuilt into the Canvas header and can be displayed by setting up the correct actions on your header link.
Header widgets are prebuilt into the Canvas header and can be displayed by setting up the correct actions on your header link.
Element name: widget_icon_actions
Name | Purpose | Badge |
Notifications | Shows a list of app notifications | Yes |
Search | Shows a global search input and dropdown | No |
Shopping Cart | Shows a list of items in shopping cart | Yes |
Messages | Shows a list of messages | Yes |
There are currently four header widgets for Search, Shopping Cart, Messages, and Notifications that can be used and customized. All of these widgets (except the search) have the ability to display a numeric badge as shown below
These widgets are already preconfigured in the Canvas header. You can set these up using an action when adding icons to any header. See how to do that here.
To set up the badge value, open the widget_icon_actions reusable element and find a group called var - item count/unread. Go to the conditional tab to see placeholder conditional statements.
For example, if you want to display the unread messages count for a user, you'd need to update the conditional statement for 'Open messages widget' to a dynamic value that represents a number of things for the current user.
Group name: Group Notifications Purpose: Display notifications to your users
This element contains a simple user interface for displaying unread messages or notifications. To use this UI, please replace all dummy data type with the data type you want to display (e.g., Messages or Notifications).
Add workflows to Button Mark as read, Group Select message, and Group view more.
Group name: Group Search Purpose: Provide a convenient location for your users to search and view results
This focus group reusable element contains a simple user interface for searching for things. To use this UI, please replace all dummy data type with the data type you want to display (e.g., Files or products).
Add workflows to Group Select item and update data source of RepeatingGroup text.
Group name: Group Cart Purpose: Display the items in the user's cart for easy review and checkout
This focus group reusable element contains a simple user interface for reviewing the items in your cart. To use this UI, please replace all dummy data type with the data type you want to display (e.g., Product or Cart items).
Add workflows to Button remove and Button Checkout.
Group name: Group Messages Purpose: Display a list of unread messages for the user
To use this UI, please replace all dummy data type with the data type you want to display (e.g., messages).
Add workflows to Group view more and Button Mark as read.
