ワークスケジューラー のページスクリプトを作成する

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間：6分

    • ワークスケジューラー のカスタムページスクリプトを追加して、イベントを介してクライアントステータスを更新したり、作業アイテム変換オブジェクトを更新したりできるようにします。

    始める前に

    必要なロール：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. [スクリプトインクルード (Script Includes)] セクションで、次のスクリプトを追加します。
        /**
* @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. [スクリプトインクルード (Script Includes)] セクションで、次のスクリプトを追加します。
        /**
* @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. [作業アイテムを cardProps に変換 (Transform workItem to 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. [保存] をクリックします。

      以下は、ワークスケジューラーのページスクリプトの作成方法のデモです。

    次のタスク

    ワークスケジューラーのページ構成で作業アイテムプロパティを定義する