---
sourceDocument: 호주 고객 서비스 관리
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/customer-service-management

 Release :

    - australia

ft:locale :

    - ko-KR

ft:publication_title :

    - 호주 고객 서비스 관리

ft:clusterId :

    - csm

bundleId :

    - csm

workflow :

    - Customer and Industry


---

# 작업 스케줄러에 대한 페이지 스크립트 생성

# 작업 스케줄러에 대한 페이지 스크립트 생성 {#ariaid-title1}

* 릴리스 버전: Australia
* 
* 업데이트 날짜 2026년 03월 12일
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 5분

이벤트를 통해 클라이언트 상태를 업데이트하거나 workItem 객체를 속성으로 변환할 수 있도록 사용자 작업 스케줄러 지정 페이지 스크립트를 추가합니다.

## 시작하기 전에

필요한 역할: admin, workspace_admin 또는 ui_builder_admin​

## 이 태스크 정보

카드 및 Handle card action clicked 해당 작업을 클릭할 때 생성되는 이벤트를 처리하기 위해 페이지 스크립트를 추가합니다Handle card clicked.

페이지 스크립트를 추가하여 Transform workItem to cardProps 작업 큐의 객체를 workItem 카드 구성요소의 속성으로 변환합니다.  
주:  
[작업 스케줄러 카드를 사용자 지정](https://www.servicenow.com/docs/access?context=customize-workscheduler-card-wfo-itsm&version=australia&pubname=australia-it-service-management&ft:locale=en-US)한 경우 아래 단계에 따라 클라이언트 스크립트를 추가할 수 있습니다.

## 프로시저

1. 클라이언트 스크립트 아이콘( ![클라이언트 스크립트 아이콘]())을 선택합니다.
2. 페이지 스크립트를 Handle card clicked 생성합니다.  
   1. 페이지 스크립트 섹션에서 +추가를 클릭합니다.
   2. 스크립트 이름 필드에 을 입력합니다Handle card clicked.
   3. 스크립트 포함 섹션에서 다음 스크립트를 추가합니다.

          /**
          * @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. 페이지 스크립트를 Handle card action clicked 생성합니다.  
   1. 페이지 스크립트 섹션에서 +추가를 클릭합니다.
   2. 스크립트 이름 필드에 을 입력합니다Handle card action clicked.
   3. 스크립트 포함 섹션에서 다음 스크립트를 추가합니다.

          /**
          * @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. workItem을 cardProps로 변환 페이지 스크립트를 생성하고 스크립트 포함을 첨부합니다WorkSchedulerUIBCardUtils.  
   1. 페이지 스크립트 섹션에서 +추가를 클릭합니다.
   2. 스크립트 이름 필드에 을 입력합니다Transform workItem to cardProp.
   3. 스크립트 편집기에서 다음 스크립트를 추가합니다.

          /**
          * @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);
          }

   필드의 표시를 사용자 지정하려면 다음 문서를 <https://developer.servicenow.com/dev.do#!/reference/next-experience/utah/now-components/now-label-value-stacked/overview>참조하십시오.
5. 저장을 클릭합니다.  
   에 대한 작업 스케줄러페이지 스크립트를 만드는 방법에 대한 데모는 다음과 같습니다.

## 다음에 수행할 작업

[작업 스케줄러 페이지 구성에서 workItem 속성 정의](https://www.servicenow.com/docs/access?context=work-sched-create-page-properties&version=australia&pubname=australia-it-service-management&ft:locale=en-US)
**관련 정보**   

* [구성요소에 클라이언트 스크립트 정의 및 바인딩](https://www.servicenow.com/docs/access?context=define-client-scripts&version=australia&pubname=australia-application-development&ft:locale=en-US)