Create page scripts for Work scheduler

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.

시작하기 전에

Role required: workspace_admin or ui_builder_admin​

이 태스크 정보

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.

주:

If you have customized a Work scheduler card, you can follow the steps below to add client scripts.

프로시저

1. Select the 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});
      }

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});
      }
      

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.

다음에 수행할 작업

Define the workItem property in the Work scheduler page configuration

이전 주제: Create a client state parameter for Work scheduler

다음 주제: Define the workItem property in the Work scheduler page configuration

관련 정보

• Define and bind client scripts to components