Seitenskripts für Arbeitsplaner erstellen

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 2 Minuten Lesedauer

    • Fügen Sie benutzerdefinierte 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 angepassthaben, können Sie die folgenden Schritte ausführen, um Client-Skripts 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});
}
    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});
}
    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 zum Anpassen der Anzeige der Felder 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

    Definieren Sie die workItem-Eigenschaft in der Arbeitsplaner-Seitenkonfiguration