Configure a Work scheduler card heading component

task australia Updated Sep 10, 2026 1 min read work-sched-card-based-header.md

Customize the Work scheduler heading component to display the title based on your needs.

Before you begin

Important: Starting with the Brazil release, Workforce Optimization for ITSM is being prepared for future deprecation. It will be hidden and no longer installed on new instances but will continue to be supported. For details, see the Deprecation Process [KB0867184] article in the Now Support Knowledge Base.

Role required: workspace_admin, or ui_builder_admin

Procedure

In the Content section, select +Add component.
In the Components pop-up screen select Card Base Header.

The selected container displays in the right pane.
Configure the header component.
1. In the Config tab, hover over the Dropdowns section and select the Dynamic data binding icon [Omitted image "dynamic-data-binding-icon.png"] Alt text: Dynamic data binding icon.
2. From the Dropdowns menu, select @state.cardProps.dropdowns.
3. Hover over the Heading section and select the Dynamic data binding icon [Omitted image "dynamic-data-binding-icon.png"] Alt text: Dynamic data binding icon.
4. From the Heading menu, select @state.cardProps.heading.
5. Hover over the Tagline section and select the Dynamic data binding icon [Omitted image "dynamic-data-binding-icon.png"] Alt text: Dynamic data binding icon.
Add Handle card action clicked to the Card header action clicked event.
1. Select the Events tab.
2. In the Card header action clicked section, select +Add a new event handler.
3. From the Tagline menu, select @state.cardProps.tagline.
4. In the Event handler preview pop up screen, from the Scripts section, select Handle card action clicked.
5. Click Add.
Click Save.

Here's a demo on how to configure a Work scheduler card heading.

What to do next

Configure a display type component for a Work scheduler card

Parent Topic:Create a Work scheduler card using the Next Experience UI Builder

Previous topic:Configure container components for Work scheduler

Next topic:Configure a display type component for a Work scheduler card

72 lines · 3.8 KB Wrap lines

---
title: Configure a Work scheduler card heading component
description: Customize the Work scheduler heading component to display the title based on your needs.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/australia/it-service-management/workforce-optimization-for-it-service-management/work-sched-card-based-header.html
release: australia
product: Workforce Optimization for IT Service Management
classification: workforce-optimization-for-it-service-management
topic_type: task
last_updated: "2026-09-10"
reading_time_minutes: 1
breadcrumb: [Create a Work scheduler card using the Next Experience UI Builder, Setting up, Work scheduler, Workforce Optimization for ITSM, IT Service Management]
---

# Configure a Work scheduler card heading component

Customize the Work scheduler heading component to display the title based on your needs.

## Before you begin

**Important:** Starting with the Brazil release, Workforce Optimization for ITSM is being prepared for future deprecation. It will be hidden and no longer installed on new instances but will continue to be supported. For details, see the [Deprecation Process \[KB0867184\]](https://support.servicenow.com/kb_view.do?sysparm_article=KB0867184) article in the Now Support Knowledge Base.

Role required: workspace\_admin, or ui\_builder\_admin

## Procedure

1. In the **Content** section, select **+Add component**.

2. In the **Components** pop-up screen select **Card Base Header**.

The selected container displays in the right pane.

3. Configure the header component.

1. In the **Config** tab, hover over the **Dropdowns** section and select the Dynamic data binding icon \[Omitted image "dynamic-data-binding-icon.png"\] Alt text: Dynamic data binding icon.

2. From the **Dropdowns** menu, select **@state.cardProps.dropdowns**.

3. Hover over the **Heading** section and select the Dynamic data binding icon \[Omitted image "dynamic-data-binding-icon.png"\] Alt text: Dynamic data binding icon.

4. From the **Heading** menu, select **@state.cardProps.heading**.

5. Hover over the **Tagline** section and select the Dynamic data binding icon \[Omitted image "dynamic-data-binding-icon.png"\] Alt text: Dynamic data binding icon.

4. Add **Handle card action clicked** to the **Card header action clicked** event.

1. Select the **Events** tab.

2. In the **Card header action clicked** section, select **+Add a new event handler**.

3. From the **Tagline** menu, select **@state.cardProps.tagline**.

4. In the **Event handler preview** pop up screen, from the **Scripts** section, select **Handle card action clicked**.

5. Click **Add**.

5. Click **Save**.

Here's a demo on how to configure a Work scheduler card heading.

## What to do next

[Configure a display type component for a Work scheduler card](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/it-service-management/workforce-optimization-for-it-service-management/work-sched-stacked-component.md)

**Parent Topic:**[Create a Work scheduler card using the Next Experience UI Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/it-service-management/workforce-optimization-for-it-service-management/create-workscheduler-card-wfo-itsm.md)

**Previous topic:**[Configure container components for Work scheduler](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/it-service-management/workforce-optimization-for-it-service-management/work-sched-card-based-container.md)

**Next topic:**[Configure a display type component for a Work scheduler card](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/it-service-management/workforce-optimization-for-it-service-management/work-sched-stacked-component.md)