Como criar scripts de página do Agendador de trabalhos

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 2 min. de leitura

    • Adicione scripts de página personalizados ao Agendador de trabalhos para que você possa atualizar o estado do cliente por meio de eventos ou atualizar o objeto transform workItem para propriedades.

    Antes de Iniciar

    Função necessária: administrador, workspace_admin ou ui_builder_admin​

    Por Que e Quando Desempenhar Esta Tarefa

    Adicione os scripts de página Handle card clicked e Handle card action clicked para manipular os eventos que são gerados ao clicar no cartão e suas ações.

    Adicione o script de página Transform workItem to cardProps para transformar o objeto workItem da fila de trabalho em propriedades para os componentes do cartão.

    Nota:
    Se você personalizou um cartão do Agendador de trabalhos, siga as etapas abaixo para adicionar scripts de cliente.

    Procedimento

    1. Selecione o ícone Client scripts ( ícone Scripts de cliente).
    2. Crie o script de página Handle card clicked.
      1. Na seção Scripts de página, clique em +Adicionar.
      2. No campo Nome do script, insira Handle card clicked.
      3. Na seção Inclusões de script, adicione o seguinte 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. Crie o script de página Handle card action clicked.
      1. Na seção Scripts de página, clique em +Adicionar.
      2. No campo Nome do script, insira Handle card action clicked.
      3. Na seção Inclusões de script, adicione o seguinte 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. Crie o script de página Transform workItem to cardProps e anexe o script include WorkSchedulerUIBCardUtils.
      1. Na seção Scripts de página, clique em +Adicionar.
      2. No campo Nome do script, insira Transform workItem to cardProp.
      3. No editor de scripts, adicione o seguinte 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);
}
      Para personalizar a exibição dos campos, consulte https://developer.servicenow.com/dev.do#!/reference/next-experience/utah/now-components/now-label-value-stacked/overview.
    5. Clique em Salvar.

      Esta é uma demonstração de como criar scripts de página do Agendador de trabalhos.

    O que Fazer Depois

    Como definir a propriedade workItem na configuração de página do Agendador de trabalhos