--- sourceDocument: Gestion des services IT Xanadu sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/it-service-management Release : - xanadu ft:locale : - fr-FR ft:publication_title : - Gestion des services IT Xanadu ft:clusterId : - itsm bundleId : - itsm workflow : - Technology --- # Créer des scripts de page pour le Planificateur de travail # Créer des scripts de page pour le Planificateur de travail {#ariaid-title1} * Rversion finale: Xanadu * * Mis à jour 1 août 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 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](https://servicenow-prod.fluidtopics.net/Ksa5tgQjw_LjCePhXZZ7cg "Personnalisez les composants de carte Planificateur de travail, par exemple en ajoutant un champ supplémentaire ou en modifiant la couleur ou l'ordre d'un champ, afin de les afficher dans la file d'attente 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 Includes 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 */ 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. 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 Includes 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 */ 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. Créez le script de page Transform workItem to cardProps (Transformer l'élément de travail en cardProps) et joignez l'include de script 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(''); 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 . 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](https://servicenow-prod.fluidtopics.net/rNrQsuMFSBRZ_eCfoFNeqA "Ajoutez la propriété workItem à la configuration de page Planificateur de travail pour recevoir l'objet workItem fourni par la file d'attente de travail.") **Sujet précédent :** [Créer un paramètre d'état de client pour Planificateur de travail](https://servicenow-prod.fluidtopics.net/LpTLrn4oMuKQ~XGSy2lXRQ "Ajoutez des valeurs de paramètre d'état de client personnalisées pour ajouter des propriétés aux composants de la carte.") **Sujet suivant :** [Définir la propriété workItem dans la configuration de la configuration de page Planificateur de travail](https://servicenow-prod.fluidtopics.net/rNrQsuMFSBRZ_eCfoFNeqA "Ajoutez la propriété workItem à la configuration de page Planificateur de travail pour recevoir l'objet workItem fourni par la file d'attente de travail.") **Information associée** * [Définir des scripts clients et les lier aux composants](https://www.servicenow.com/docs/access?context=define-client-scripts&version=xanadu&pubname=xanadu-application-development&ft:locale=en-US)