---
sourceDocument: Xanadu IT Service Management
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/xanadu/it-service-management

 Release :

    - xanadu

ft:locale :

    - de-DE

ft:publication_title :

    - Xanadu IT Service Management

ft:clusterId :

    - itsm

bundleId :

    - itsm

workflow :

    - Technology


---

# Seitenskripts für Arbeitsplaner erstellen

# Seitenskripts für Arbeitsplaner erstellen {#ariaid-title1}

* Freigeben Version: Xanadu
* 
* Aktualisiert 1. August 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 Minuten Lesedauer

Fügen Sie anwenderdefinierte Seitenskripts für Arbeitsplaner hinzu, damit Sie den Client-Status über Events aktualisieren oder das workItem-Objekt in Eigenschaften umwandeln können.

## Vorbereitungen

Erforderliche Rolle: admin, workspace_admin oder ui_builder_admin

## Warum und wann dieser Vorgang ausgeführt wird

Fügen Sie die Seitenskripts Handle card clicked und Handle card action clicked hinzu, um Events zu verarbeiten, die beim Klicken auf die Karte und ihre Aktionen generiert werden.

Fügen Sie das Seitenskript Transform workItem to cardProps hinzu, um das Objekt workItem in der Arbeitswarteschlange in Eigenschaften für die Kartenkomponenten umzuwandeln.  
Hinweis:  
Wenn Sie [eine Arbeitsplanerkarte angepasst](https://servicenow-prod.fluidtopics.net/3wvDjjwHJvMeDpm~0e5rWQ "Passen Sie die Komponenten der Arbeitsplanerkarte an, indem Sie z. B. ein zusätzliches Feld hinzufügen oder die Farbe eines Felds oder die Reihenfolge der Felder ändern und entsprechend in der Warteschlange für den Arbeitsplaner anzeigen.") haben, können Sie wie folgt vorgehen, um Clientskripts hinzuzufügen.

## Prozedur

1. Wählen Sie das Clientskripts-Symbol ( ![Clientskripts-Symbol]()) aus.
2. Erstellen Sie das Seitenskript Handle card clicked.  
   1. Klicken Sie im Abschnitt Seitenskripts auf +Hinzufügen.
   2. Geben Sie im Feld Skriptname Handle card clicked ein.
   3. Fügen Sie im Abschnitt Skripteinbindungen das folgende Skript hinzu:

          /**
          * @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. Erstellen Sie das Seitenskript Handle card action clicked.  
   1. Klicken Sie im Abschnitt Seitenskripts auf +Hinzufügen.
   2. Geben Sie im Feld Skriptname Handle card action clicked ein.
   3. Fügen Sie im Abschnitt Skripteinbindungen das folgende Skript hinzu:

          /**
          * @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. Erstellen Sie das Seitenskript Transform workItem to cardProps, und hängen Sie die Skripteinbindung WorkSchedulerUIBCardUtils an.  
   1. Klicken Sie im Abschnitt Seitenskripts auf +Hinzufügen.
   2. Geben Sie im Feld Skriptname Transform workItem to cardProp ein.
   3. Fügen Sie im Skript-Editor folgendes Skript hinzu:

          /**
          * @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);
          }

   Informationen, wie Sie die Anzeige der Felder anpassen, finden Sie unter <https://developer.servicenow.com/dev.do#!/reference/next-experience/utah/now-components/now-label-value-stacked/overview>.
5. Klicken Sie auf Speichern.  
   Nachstehend ein Demovideo zum Erstellen von Seitenskripts für Arbeitsplaner.

## Nächste Maßnahme

[Eigenschaft workItem in der Arbeitsplaner-Seitenkonfiguration definieren](https://servicenow-prod.fluidtopics.net/9U5YiC0spE6ZGhMjzdZaPA "Fügen Sie der Arbeitsplaner-Seitenkonfiguration die Eigenschaft workItem hinzu, um das von der Arbeitswarteschlange bereitgestellte Objekt workItem zu erhalten.")
**Vorheriges Thema:** [Client-Statusparameter für Arbeitsplaner erstellen](https://servicenow-prod.fluidtopics.net/1Y~4ryTyjcFX4shoG1xwZg "Fügen Sie anwenderdefinierte Client-Statusparameterwerte hinzu, um den Kartenkomponenten Eigenschaften hinzuzufügen.")  
**Nächstes Thema:** [workItem-Eigenschaft in der Arbeitsplaner-Seitenkonfiguration definieren](https://servicenow-prod.fluidtopics.net/9U5YiC0spE6ZGhMjzdZaPA "Fügen Sie der Arbeitsplaner-Seitenkonfiguration die Eigenschaft workItem hinzu, um das von der Arbeitswarteschlange bereitgestellte Objekt workItem zu erhalten.")  
**Zugehörige Informationen**   

* [Clientskripts definieren und an Komponenten binden](https://www.servicenow.com/docs/access?context=define-client-scripts&version=xanadu&pubname=xanadu-application-development&ft:locale=en-US)