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

  • 릴리스 버전: Xanadu
  • 업데이트 날짜 2024년 08월 01일
  • 읽기5분

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

    시작하기 전에

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

    이 태스크 정보

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

    Transform workItem to cardProps 페이지 스크립트를 추가하여 작업 큐의 workItem 개체를 카드 구성요소의 속성으로 변환합니다.

    주:
    작업 스케줄러 카드를 사용자 지정한 경우 아래 단계에 따라 클라이언트 스크립트를 추가할 수 있습니다.

    프로시저

    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});
}
    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});
}
    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 속성 정의