---
sourceDocument: Xanadu Customer Service Management
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/xanadu/customer-service-management

 Release :

    - xanadu

ft:locale :

    - en-US

ft:publication_title :

    - Xanadu Customer Service Management

ft:clusterId :

    - csm

bundleId :

    - csm

workflow :

    - Customer and Industry


---

# Create page scripts for Work scheduler

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

* Release version: Xanadu
* 
* Updated August 1, 2024
* 
* ![](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: admin, 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://www.servicenow.com/docs/access?context=customize-workscheduler-card-wfo-itsm&version=xanadu&pubname=xanadu-it-service-management&ft:locale=en-US), 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-wfo-cs__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-wfo-cs__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://www.servicenow.com/docs/access?context=work-sched-create-page-properties&version=xanadu&pubname=xanadu-it-service-management&ft:locale=en-US)
**Related topics**   

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