# Header Widgets

## Overview

**Element name:** widget\_icon\_actions

<table data-header-hidden><thead><tr><th>Name</th><th width="368.3333333333333">Element Name</th><th>Badge</th></tr></thead><tbody><tr><td>Name</td><td>Purpose</td><td>Badge</td></tr><tr><td>Notifications</td><td>Shows a list of app notifications</td><td>Yes</td></tr><tr><td>Search</td><td>Shows a global search input and dropdown</td><td>No</td></tr><tr><td>Shopping Cart</td><td>Shows a list of items in shopping cart</td><td>Yes</td></tr><tr><td>Messages</td><td>Shows a list of messages</td><td>Yes</td></tr></tbody></table>

![](/files/-MlMGrqoeFkn4-4aoT3f)

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.](/canvas/6.0/canvas-functionality/reference/reusable-elements/header.md#icons)

### 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.

<figure><img src="/files/0rrYMPUWXawnWSqAQNcZ" alt="" width="333"><figcaption></figcaption></figure>

## Specific element details

### Notifications&#x20;

**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&#x20;

**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&#x20;

**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`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airdev.co/canvas/6.0/canvas-functionality/reference/reusable-elements/widgets/ui-widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.