---
sourceDocument: Australia IT Service Management
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/it-service-management

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia IT Service Management

ft:clusterId :

    - itsm

bundleId :

    - itsm

workflow :

    - Technology


---

# Create page scripts for Work scheduler

# Create page scripts for Work scheduler {#ariaid-title1}

Release version: Australia  
Updated March 12, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read  
Add custom page scripts for the Work scheduler so that you can update
the client state through events or update transform workItem object to
properties.

## Before you begin

Role required: workspace_admin or ui_builder_admin​

## About this task

Add the Handle card clicked and the Handle card action clicked page scripts to handle events that are generated when the
card and its actions are clicked.

Add the Transform workItem to cardProps page script to transform
the workItem object in the Work queue to properties for the
card components.  
Note:  
If you have [customized a Work scheduler card](https://servicenow-prod.fluidtopics.net/kPwMssUtRqHJuNDKNdZ2cg "Customize the Work Scheduler card components, such as adding an extra field, or changing the color or order of a field, to display them in the Work scheduler queue."), you can follow the steps below to add client scripts.

## Procedure

1. Select the Client Scripts icon (![Client scripts icon]()).
2. Create the Handle card clicked page script.  
   1. In the Page scripts section, click +Add.
   2. In the Script name field, enter Handle card clicked.
   3. In the Script Includes section, add the following script:

          /**
          * @param {params} params
          * @param {api} params.api
          * @param {any} params.event
          * @param {any} params.imports
          * @param {ApiHelpers} params.helpers
          */
          function handler({api, event, helpers, imports}) {
            const {workItem} = api.context.props;
            api.emit('CARD_CLICKED', {workItem});
          }

   {#work-sched-create-page-scripts__ol_xhs_skm_ltb}
3. Create the Handle card action clicked page script.  
   1. In the Page scripts section, click +Add.
   2. In the Script name field, enter Handle card action clicked.
   3. In the Script Includes section, add the following script:

          /**
          * @param {params} params
          * @param {api} params.api
          * @param {any} params.event
          * @param {any} params.imports
          * @param {ApiHelpers} params.helpers
          */
          function handler({api, event, helpers, imports}) {
            const {workItem} = api.context.props;
            const {action: actionItem} = event.payload;
            api.emit('CARD_ACTION_CLICKED', {workItem, actionItem});
          }

   {#work-sched-create-page-scripts__ol_lyn_1mm_ltb}
4. Create the Transform workItem to cardProps page script and attach the WorkSchedulerUIBCardUtils script include.  
   1. In the Page scripts section, click +Add.
   2. In the Script name field, enter Transform workItem to cardProp.
   3. In the script editor, add the following script:

          /**
          * @param {params} params
          * @param {api} params.api
          * @param {any} params.event
          * @param {any} params.imports
          * @param {ApiHelpers} params.helpers
          */
          async function handler({api, event, helpers, imports}) {
              const {workItem} = api.context.props;
              const {mappingFields, recordFields} = workItem;
              const cardUtils = imports['sn_wfo_work_sched.WorkSchedulerUIBCardUtils']();
              const fallbackValueLabel = await helpers.translate('<not defined>');
              const dropdownItems = workItem.tableMetadata.canDelete
                  ? [{id: 'delete', label: await helpers.translate('Delete')}]
                  : [];
              // Fields for getContent() and getAria()
              const contentFields = [{
                  name: 'assigned_to',
                  label: await helpers.translate('Assigned to')
              },
              {
                  name: 'assignment_group',
                  label: await helpers.translate('Assignment group')
              },
              {
                  name: 'start_date',
                  label: await helpers.translate('Start date')
              },
              {
                  name: 'end_date',
                  label: await helpers.translate('End date')
              }];
              // Create cardProps
              const cardProps = {};
              cardProps.tagline = {
                  label: workItem.recordFields._row_data.displayValue || null
              };
              cardProps.heading = {
                  label: mappingFields.description ? mappingFields.description.displayValue : fallbackValueLabel
              };
              cardProps.dropdowns = dropdownItems.length > 0
                  ? [{id: 'dropdown1', items: dropdownItems, icon: 'ellipsis-v-outline'}]
                  : [];
              cardProps.content = await cardUtils.getContent(helpers, contentFields, workItem, null, null, true);
              cardProps.aria = await cardUtils.getAria(helpers, contentFields, workItem, null, true);
              cardProps.assignedTo = mappingFields.assigned_to ? mappingFields.assigned_to.displayValue : null;
              api.setState('cardProps', cardProps);
          }

   To customize the display of the fields, refer to <https://developer.servicenow.com/dev.do#!/reference/next-experience/utah/now-components/now-label-value-stacked/overview>.
5. Click Save.  
   Here's a demo on how to create page scripts for Work scheduler.

## What to do next

[Define the workItem property in
the Work scheduler page configuration](https://servicenow-prod.fluidtopics.net/fLvHw9LrCYs3XH3vnESS2Q "Add the workItem property to the Work scheduler page configuration to receive the workItem object provided by the work queue.")
**Previous topic:** [Create a client state parameter for Work scheduler](https://servicenow-prod.fluidtopics.net/DOo62hF0bYs9sPI7CAm2DA "Add custom client state parameter values to add properties to the card components.")  
**Next topic:** [Define the workItem property in the Work scheduler page configuration](https://servicenow-prod.fluidtopics.net/fLvHw9LrCYs3XH3vnESS2Q "Add the workItem property to the Work scheduler page configuration to receive the workItem object provided by the work queue.")  
**Related topics**   

* [Define and bind client scripts to components](https://www.servicenow.com/docs/access?context=define-client-scripts&version=australia&pubname=australia-application-development&ft:locale=en-US)