--- sourceDocument: Yokohama Gestão de serviços de TI sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/it-service-management Release : - yokohama ft:locale : - pt-BR ft:publication_title : - Yokohama Gestão de serviços de TI ft:clusterId : - itsm bundleId : - itsm workflow : - Technology --- # Como criar scripts de página do Agendador de trabalhos # Como criar scripts de página do Agendador de trabalhos {#ariaid-title1} * Versão de lançamento: Yokohama * * Atualizado 30 de jan. de 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 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](https://servicenow-prod.fluidtopics.net/4_DRARMPFKsUs8r1iNnCDA "Personalize os componentes do cartão do Agendador de trabalhos, por exemplo, adicionar um campo extra ou alterar a cor ou a ordem de um campo, para exibi-los na fila 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}); } {#work-sched-create-page-scripts__ol_xhs_skm_ltb} 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}); } {#work-sched-create-page-scripts__ol_lyn_1mm_ltb} 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(''); 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 . 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](https://servicenow-prod.fluidtopics.net/F_dNpNSFcm4YEOC~7nZSZw "Adicione a propriedade workItem à configuração de páginas do Agendador de trabalhos para receber o objeto workItem fornecido pela fila de trabalho.") **Tópico anterior:** [Como criar um parâmetro de estado do cliente para o Agendador de trabalhos](https://servicenow-prod.fluidtopics.net/4bSZRFEs25CyxapRTxm3ZA "Inclua valores personalizados de parâmetro de estado do cliente para adicionar propriedades aos componentes do cartão.") **Próximo tópico:** [Como definir a propriedade workItem na configuração de páginas do Agendador de trabalhos](https://servicenow-prod.fluidtopics.net/F_dNpNSFcm4YEOC~7nZSZw "Adicione a propriedade workItem à configuração de páginas do Agendador de trabalhos para receber o objeto workItem fornecido pela fila de trabalho.") **Tópicos relacionados** * [Como definir e vincular client scripts aos componentes](https://www.servicenow.com/docs/access?context=define-client-scripts&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US)