Header Widgets
Header widgets are prebuilt into the Canvas header and can be displayed by setting up the correct actions on your header link.
Overview
Element name: widget_icon_actions
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
Show widgets in the header
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.
Setting up the badge
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.
Specific element details
Notifications
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
.
Search
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
.
Shopping Cart
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
.
Messages
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
.