Créer des scripts de page pour le Planificateur de travail

  • Rversion finale: Washingtondc
  • Mis à jour 3 août 2023
  • 2 minutes de lecture

    • Ajoutez des scripts de page personnalisés pour le Planificateur de travail afin de mettre à jour l'état du client via des événements ou de mettre à jour l'objet de transformation workItem en propriétés.

    Avant de commencer

    Rôle requis : admin, workspace_admin ou ui_builder_admin​

    Pourquoi et quand exécuter cette tâche

    Ajoutez les scripts de page Handle card clicked et Handle card action clicked pour gérer les événements générés lorsque vous cliquez sur la carte et ses actions.

    Ajoutez le script de page Transform workItem to cardProps pour transformer l'objet workItem dans la file d'attente de travail en propriétés pour les composants de carte.

    Remarque :
    Si vous avez personnalisé une carte de planificateur de travail, vous pouvez procéder comme suit pour ajouter des scripts clients.

    Procédure

    1. Sélectionnez l'icône Scripts clients ( icône Scripts clients).
    2. Créez le script de page Handle card clicked.
      1. Dans la section Scripts de page, cliquez sur +Ajouter.
      2. Dans le champ Nom du script, saisissez Handle card clicked.
      3. Dans la section Script Includes, ajoutez le script suivant :
        /**
* @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. Créez le script de page Handle card action clicked.
      1. Dans la section Scripts de page, cliquez sur +Ajouter.
      2. Dans le champ Nom du script, saisissez Handle card action clicked.
      3. Dans la section Script Includes, ajoutez le script suivant :
        /**
* @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. Créez le script de page Transform workItem to cardProps (Transformer l'élément de travail en cardProps) et joignez le script include WorkSchedulerUIBCardUtils.
      1. Dans la section Scripts de page, cliquez sur +Ajouter.
      2. Dans le champ Nom du script, saisissez Transform workItem to cardProp.
      3. Dans l'éditeur de script, ajoutez le script suivant :
        /**
* @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);
}
      Pour personnaliser l'affichage des champs, consultez la rubrique https://developer.servicenow.com/dev.do#!/reference/next-experience/utah/now-components/now-label-value-stacked/overview.
    5. Cliquez sur Enregistrer.

      Cette démonstration explique comment créer des scripts de page pour le Planificateur de travail.

    Que faire ensuite

    Définir la propriété workItem dans la configuration de page du planificateur de travail