{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":7536,"path":"customer-service-management/work-sched-create-page-scripts-wfo-cs.md","title":"Create page scripts for Work scheduler","bundle":null,"doc_type":null,"release":"australia","body":"\n# Create page scripts for Work scheduler\n\nAdd custom page scripts for the Work scheduler so that you can update the client state through events or update transform workItem object to properties.\n\n## Before you begin\n\nRole required: admin, workspace\\_admin, or ui\\_builder\\_admin​\n\n## About this task\n\nAdd 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.\n\nAdd the **Transform workItem to cardProps** page script to transform the **workItem** object in the Work queue to properties for the card components.\n\n**Note:** If you have [customized a Work scheduler card](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/it-service-management/customize-workscheduler-card-wfo-itsm.md), you can follow the steps below to add client scripts.\n\n## Procedure\n\n1.  Select the Client Scripts icon \\(\\[Omitted image \"client-scripts-icon.png\"\\] Alt text: Client scripts icon\\).\n\n2.  Create the **Handle card clicked** page script.\n\n    1.  In the **Page scripts** section, click **+Add**.\n    2.  In the **Script name** field, enter **Handle card clicked**.\n    3.  In the **Script Includes** section, add the following script:\n\n        ```\n        /**\n        * @param {params} params\n        * @param {api} params.api\n        * @param {any} params.event\n        * @param {any} params.imports\n        * @param {ApiHelpers} params.helpers\n        */\n        function handler({api, event, helpers, imports}) {\n          const {workItem} = api.context.props;\n          api.emit('CARD_CLICKED', {workItem});\n        }\n        ```\n\n3.  Create the **Handle card action clicked** page script.\n\n    1.  In the **Page scripts** section, click **+Add**.\n    2.  In the **Script name** field, enter **Handle card action clicked**.\n    3.  In the **Script Includes** section, add the following script:\n\n        ```\n        /**\n        * @param {params} params\n        * @param {api} params.api\n        * @param {any} params.event\n        * @param {any} params.imports\n        * @param {ApiHelpers} params.helpers\n        */\n        function handler({api, event, helpers, imports}) {\n          const {workItem} = api.context.props;\n          const {action: actionItem} = event.payload;\n          api.emit('CARD_ACTION_CLICKED', {workItem, actionItem});\n        }\n        \n        ```\n\n4.  Create the **Transform workItem to cardProps** page script and attach the **WorkSchedulerUIBCardUtils** script include.\n\n    1.  In the **Page scripts** section, click **+Add**.\n    2.  In the **Script name** field, enter **Transform workItem to cardProp**.\n    3.  In the script editor, add the following script:\n\n        ```\n        /**\n        * @param {params} params\n        * @param {api} params.api\n        * @param {any} params.event\n        * @param {any} params.imports\n        * @param {ApiHelpers} params.helpers\n        */\n        async function handler({api, event, helpers, imports}) {\n            const {workItem} = api.context.props;\n            const {mappingFields, recordFields} = workItem;\n            const cardUtils = imports['sn_wfo_work_sched.WorkSchedulerUIBCardUtils']();\n            const fallbackValueLabel = await helpers.translate('<not defined>');\n            const dropdownItems = workItem.tableMetadata.canDelete\n                ? [{id: 'delete', label: await helpers.translate('Delete')}]\n                : [];\n            // Fields for getContent() and getAria()\n            const contentFields = [{\n                name: 'assigned_to',\n                label: await helpers.translate('Assigned to')\n            },\n            {\n                name: 'assignment_group',\n                label: await helpers.translate('Assignment group')\n            },\n            {\n                name: 'start_date',\n                label: await helpers.translate('Start date')\n            },\n            {\n                name: 'end_date',\n                label: await helpers.translate('End date')\n            }];\n            // Create cardProps\n            const cardProps = {};\n            cardProps.tagline = {\n                label: workItem.recordFields._row_data.displayValue || null\n            };\n            cardProps.heading = {\n                label: mappingFields.description ? mappingFields.description.displayValue : fallbackValueLabel\n            };\n            cardProps.dropdowns = dropdownItems.length > 0\n                ? [{id: 'dropdown1', items: dropdownItems, icon: 'ellipsis-v-outline'}]\n                : [];\n            cardProps.content = await cardUtils.getContent(helpers, contentFields, workItem, null, null, true);\n            cardProps.aria = await cardUtils.getAria(helpers, contentFields, workItem, null, true);\n            cardProps.assignedTo = mappingFields.assigned_to ? mappingFields.assigned_to.displayValue : null;\n            api.setState('cardProps', cardProps);\n        }\n        ```\n\n    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](https://developer.servicenow.com/dev.do#!/reference/next-experience/utah/now-components/now-label-value-stacked/overview).\n\n5.  Click **Save**.\n\n    Here's a demo on how to create page scripts for Work scheduler.\n\n\n## What to do next\n\n[Define the workItem property in the Work scheduler page configuration](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/it-service-management/work-sched-create-page-properties.md)\n\n**Parent Topic:**[Create a Work scheduler card using the Next Experience UI Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/customer-service-management/create-workscheduler-card-wfo-cs.md)\n\n**Related topics**  \n\n\n[Define and bind client scripts to components](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/application-development/define-client-scripts.md)\n\n"}}