Header Widgets
Header widgets are prebuilt into the Canvas html header and can be displayed by setting up the correct actions on your header link.
Last updated
Header widgets are prebuilt into the Canvas html header and can be displayed by setting up the correct actions on your header link.
Last updated
Name | Element Name | Badge |
Notifications | widget_notifications | Yes |
Search | widget_search | No |
Shopping Cart | widget_shopping_cart | Yes |
Messages | widget_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 one of the widgets listed above that has the option of a badge. For example, if open the widget_messages element in the Bubble editor, we can see a 'var-unread messages count' element in the elements tree that has a Data source value of 4.
To make this number dynamically represent a number of things for the current user, we want to change the date source value to be a dynamic expression with a search that finds all the things that apply to this user and then get the count.
Element name: widget_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.
Element name: widget_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 Dummy.
Element name: widget_shopping_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 removeand Button CHECKOUT.
Element name: widget_messages Purpose: Display a list of unread messages for the user
