UI-Makros

  • Freigeben Version: Yokohama
  • Aktualisiert 30. Januar 2025
  • 6 Minuten Lesedauer

    • UI-Makros sind diskrete Skriptkomponenten, die Administratoren der Anwenderoberfläche hinzufügen können.

    UI-Makros sind normalerweise Steuerungen, die Eingaben oder Informationen bereitstellen, die nicht von vorhandenen Feldtypen bereitgestellt werden. Standardmäßig stellt das System UI-Makros für eine Vielzahl von Benutzeroberflächenelementen bereit, z. B.:
    • Alle Formatierer
    • Der Servicekatalog-Einkaufswagen
    • Die Aktionssymbole neben Feldern
    • Die Aktionssymbole in Formularen und Listen
    • Die Widgets eines Content-Management-Systems
    • Der Orchestration-Aktivitätsdesigner

    Administratoren können eigene UI-Makros erstellen, um benutzerdefinierte Steuerelemente oder Schnittstellen bereitzustellen. Das Erstellen von UI-Makros erfordert Kenntnisse über Jelly-Skripts. In den vorhandenen UI-Makros finden Sie Beispiele und Lösungsvorschläge. Um benutzerdefinierte Schnittstellen mit JavaScript-Technologien zu erstellen, kann alternativ das Service Portal verwendet werden.

    Hinweis:
    Um verfügbare UI-Makros anzuzeigen, navigieren Sie zu Alle > System-UI > UI-Makros.

    UI-Makro – Grundlagen

    Mit UI-Makros können Lösungen erstellt werden, die mit den verfügbaren Katalogvariablentypen nicht erstellt werden können.

    Zugängliche UI-Makros

    In der Tabelle „UI-Makros“ [ui_macros] sind mehrere UI-Makros verfügbar. Diese UI-Makros haben Namen, die mit ui_ beginnen, und emulieren das Verhalten einer Teilmenge von Standardformularfeldtypen zur Verwendung in UI-Seiten. Beispielsweise kann das UI-Makro ui_date_time wie ein glide_date_time-Feld auf einer UI-Seite wirken und ein typfähiges Eingabefeld mit einer Datums-/Uhrzeitauswahl bereitstellen.

    Ein UI-Makro kann mit in eine UI-Seite aufgenommen werden<g:> Jelly-Tag Das folgende Beispiel enthält das UI-Makro ui_date_time, das zwei optionale Attribute für das UI-Makro bereitstellt:
    <g:ui_date_time name="due_date" value="2023-11-24 08:30:00" onchange="checkDateValue()" />
    Die Attributwerte in<g:> Jelly-Tags werden dem UI-Makro als Variablen mit Jvar-Präfix bereitgestellt. Das UI-Makro kann die vorangestellten Variablen „jvar“ in seiner XML-Datei verwenden.
    Tabelle : 1. Jelly-Tag-Attribute, die als vorangestellte Jvar-Variablen verwendet werden
    Attribute Variablen mit Präfix jvar
    name jvar_name
    Wert jvar_value
    onchange jvar_onchange
    Hinweis:
    Diese UI-Makros sollen nicht alle Funktionen des entsprechenden Formularfeldtyps unterstützen. In vielen Fällen sind die Makros nur für bestimmte ServiceNow Anwendungsfälle vorgesehen.

    Die UI-Makros mit Präfix ui_enthalten Beschreibungen, die die unterstützten Attribute angeben, die auf den UI-Seiten angegeben werden können (oder müssen).<g:> Jelly-Tag Um verfügbare UI-Makros anzuzeigen, navigieren Sie zu Alle > System-UI > UI-Makros.

    /

    Anwenderdefinierte UI-Makros

    Das UI-Makro ui_example verwendet drei Variablen mit Jvar-Präfix: jvar_name, jvar_test_attribute und jvar_laptop_type. Diese Variablen können dem UI-Makro als Attribute „name“, „test_attribute“ und „laptop_type“ in einer bereitgestellt werden<g:> Jelly-Tag auf einer UI-Seite.

    Erstellen des UI-Makros ui_example
    Navigieren zu Alle > System-UI > UI-Makros und wählen Sie Neuaus.
    Benennen Sie das Makro ui_example, und fügen Sie dem XML- Feld das folgende Skript hinzu:
    <?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide">
    <div>name jvar: ${jvar_name}</div>
    <div>test_attribute jvar: ${jvar_test_attribute}</div>
    <div>laptop_type jvar: ${jvar_laptop_type}</div>
</j:jelly>
    Verwenden des Makros auf einer UI-Seite
    Navigieren zu Alle > System-UI > UI-Seiten und wählen Sie Neuaus. Sie werden aufgefordert, eine Administratorrolle auszuwählen.
    Benennen Sie die UI-Seite, und fügen Sie das folgende Skript zum HTML- Feld hinzu:
    <?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <div style="text-decoration:underline">Template include one:</div>
    <g:ui_example name="Fred Luddy" test_attribute="I am an attribute" laptop_type="ThinkPad" />
    <hr/>
    <div style="text-decoration:underline">Template include two:</div>
    <g:ui_example name="Pat Casey" test_attribute="I am a different attribute" laptop_type="Macbook Pro" />
</j:jelly>
    Ausgabe wird überprüft
    Auf der UI-Seite können Sie auf Testen klicken, um die Ergebnisse anzuzeigen.
    Hinweis:
    Wenn Sie ein Makro erstellen und es auf der UI-Seite nicht wie erwartet angezeigt wird, kann das Leeren des Cache helfen. Um den Cache Ihrer Instanz zu leeren, geben Sie in Ihrem Browser ein<server_url> /cache.do.

    UI-Makros aufrufen

    Administratoren können UI-Makros aus bestimmten Datensatztypen aufrufen, die der Benutzeroberfläche zugeordnet sind.

    Tabelle : 2. UI-Makros werden nach Datensatztyp aufgerufen
    Datensatztyp Beispiel
    Wörterbuchattribut

    Ein Symbol für ein Referenzfeld anzeigen:

    ref_contributions=ui_macro_name
    UI-Seite

    Etwas auf einer UI-Seite anzeigen:

    <g:macro_invoke macro="ui_macro_name" />
    UI-Makro

    Ein UI-Makro von einem anderen UI-Makro aus aufrufen:

    <?xml version= "1.0" encoding="utf-8"&nbsp;?>
<j:jelly trim= "false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
  <g:ui_macro_name />
  <g:ui_macro_name_2 />
</j:jelly>

    Formular „UI-Makro“

    Jeder UI-Makrodatensatz besteht aus einem Namen und einem in Jelly-Code geschriebenen XML-Dokument.

    Tabelle : 3. UI-Makro – Felder
    Feld Beschreibung
    Name Ein eindeutiger und aussagekräftiger Name für dieses Makro.
    Aktiv Aktivieren Sie die Checkbox, um das Element wie definiert darzustellen. Deaktivieren Sie die Checkbox, um das Element zu deaktivieren, ohne den Code zu löschen. Das Makro email_reply ist beispielsweise standardmäßig inaktiv.
    Beschreibung Beschreiben Sie den Zweck des Makros und der übergebenen Parameter.
    XML Jelly-Skript, das das Makro definiert.

    Benutzerdefiniertes Genehmigungs-UI-Makro

    In diesem Abschnitt wird beschrieben, wie Sie ein benutzerdefiniertes Genehmigungs-UI-Makro erstellen.

    Warnung:
    Die hier beschriebene Anpassung wurde für die Verwendung in bestimmten Fällen entwickelt und wird von Now Support nicht unterstützt. Diese Methode wird wie sie ist zur Verfügung gestellt und sollte vor der Implementierung gründlich getestet werden. Veröffentlichen Sie alle Fragen und Kommentare zu dieser Anpassung in unserem Community-Forum.

    Skriptname: Benutzerdefiniertes Genehmigungs-UI-Makro

    Typ: UI-Makro

    Beschreibung: Hier ist eine Option, um mehr Details aus der Ansicht „Meine Genehmigungen“ eines Ausführungsplans zu erhalten. Dies kann durch Erstellen eines neuen UI-Makros erreicht werden. Navigieren Sie zu System-UI, und klicken Sie auf UI-Makros. Zuerst müssen Sie das vorhandene Makro approval_summarizer_sc_task umbenennen, z. B. in approval_summarizer_sc_task_old, und es deaktivieren. Dann müssen Sie ein neues Makro mit demselben Namen (approval_summarizer_sc_task) erstellen. Der Name sollte im Wesentlichen aussagen, welche Funktion das Makro hat und für was es gilt. In diesem Fall ersetzen wir ein vorhandenes Makro, daher haben wir uns dafür entschieden, den vorhandenen Namen wiederzuverwenden.

    Abbildung : 1. Genehmigungsmakros

    Dann sollten Sie das XML-Skript am Ende dieses Artikels in das XML-Codefenster im neuen UI-Makro kopieren. Dies ist eine großartige Möglichkeit, einem Genehmiger einige Details zu geben, wenn Sie Einzelpostengenehmigungen über Genehmigungsaufgaben in den Servicekatalog-Ausführungsplänen durchführen.

    Die alte Methode

    Dies ist die Ansicht, die Sie in „Meine Genehmigungen“ sehen, wenn Sie eine Genehmigungsaufgabe über die alte Methode verwenden.

    Abbildung : 2. Meine Genehmigungen (alte Methode)

    Beachten Sie, dass dem Genehmiger nur wenige Details darüber zur Verfügung stehen, was er eigentlich genehmigt. Sie können die Kurzbeschreibung der Aufgabe sehen, erhalten aber nicht viele Informationen zum Element.

    Die neue Methode

    Dies ist die Ansicht, die Sie sehen, wenn Sie das XML-Skript unten anstelle des vordefinierten UI-Makros verwenden.

    Abbildung : 3. Meine Genehmigungen

    Mit dieser Methode können Sie Details wie die Anforderungsgenehmigung sehen. Es stehen ein Link zum bestellten Artikel, eine Kurzbeschreibung (die die Möglichkeit enthält, die Variablen des Artikels zu erweitern), Preis, Menge und Gesamtpreis zur Verfügung. Dies hilft dem Genehmiger, da mehr Details angezeigt werden. Die Genehmiger können jetzt sehen, was sie eigentlich genehmigen.

    Skript:

    <?xml version="1.0" encoding="utf-8" ?>
    <j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <tr>
        <td class="label_left" width="100%">
            <label style="margin-left: 10px">
                ${gs.getMessage('Summary of Item being approved')}:
                <input style="visibility: hidden" NAME="make_spacing_ok"></input>
            </label>
        </td>
    </tr>
    <g:evaluate var="jvar_ni" expression="
        var sc_task = ${ref}.sysapproval;
        var sc_req_labels = new GlideRecord('sc_req_item');
        sc_req_labels.initialize();
        var sc_req_item = new GlideRecord('sc_req_item');
        sc_req_item.addQuery('request_item', sc_task.request_item.sys_id);
        sc_req_item.query();
    " />
    <tr>
        <td width="100%">
            <table width="100%">
                <tr>
                    <td class="label_left" width="150px">
                        <label style="margin-left: 10px">
                            ${sc_task.request_item.request.opened_by.sys_meta.label}:
                        </label>
                    </td>
                    <td>
                        ${sc_task.request_item.request.opened_by.getDisplayValue()}
                    </td>
                </tr>
                <tr> 
                    <td class="label_left" width="150px">
                        <label style="margin-left: 10px">
                            ${sc_task.request_item.request.requested_for.sys_meta.label}:
                        </label>
                    </td>
                    <td>
                        ${sc_task.request_item.request.requested_for.getDisplayValue()}
                    </td>
                </tr>
                <tr>
                    <td class="label_left" width="150px">
                        <label style="margin-left: 10px">${gs.getMessage('Total')}:</label>
                    </td>
                    <td>
                        <g:currency_format value="${sc_task.request_item.request.price}" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <j:set var="jvar_line_num" value="0" />
    <tr>
        <td width="100%">
            <table width="100%">
                <tr class="header">
                    <td colspan="2">
                        ${sc_req_labels.number.sys_meta.label}
                    </td>
                    <td>
                        ${sc_req_labels.description.sys_meta.label}
                    </td>
                    <td>
                        ${sc_req_labels.price.sys_meta.label}
                    </td>
                    <td>
                        ${sc_req_labels.quantity.sys_meta.label}
                    </td>
                    <td>
                        ${gs.getMessage('Total')}
                    </td>
                </tr>
                <j:set var="jvar_item_price" value="${sc_task.request_item.price * sc_task.request_item.quantity}"/>
                <j:set var="jvar_overall_total" value="${jvar_overall_total + jvar_item_price}"/>
                <j:set var="jvar_line_color" value="odd"/>
                <j:set var="jvar_line_num" value="${jvar_line_num + 1}"/>
                <j:if test="${jvar_line_num % 2 == 0}">
                    <j:set var="jvar_line_color" value="even"/>
                </j:if>
                <g:evaluate var="ni" expression="
                    var smart_description = sc_task.request_item.cat_item.short_description;
                    if (smart_description == null || smart_description == '' || smart_description == 'undefined')
                        smart_description = sc_task.request_item.cat_item.name;
                "/>
                <tr class="${jvar_line_color}">
                    <td valign="top">
                        <g2:evaluate var="jvar_pop_target" expression="$[ref].getRecordClassName()" />
                        <a class="linked" target="gsft_main"                             href="sc_req_item.do?sys_id=${sc_task.request_item.sys_id}"                             onmousemove="popListDiv(event, 'sc_req_item', '${sc_task.request_item.sys_id}','${sysparm_view}')"                             onmouseout="lockPopup(event)">
                            <img src="images/icons/hover_icon.gifx" class="clsshort"/>
                        </a>
                    </td>
                    <td valign="top">
                        <a class="linked" target="gsft_main"                             href="sc_req_item.do?sys_id=${sc_task.request_item.sys_id}">
                            ${sc_task.request_item.number}
                        </a>
                    </td>
                    <td valign="top" width="50%">
                        <g:call function="variable_summary_approval.xml" 
                            question_name="${sc_task.request_item.sys_id}"
                            question_help_tag="${smart_description}" 
                            sc_req_item="${sc_task.request_item.sys_id}"
                            help_class="${jvar_line_color}"/>
                    </td>
                    <td valign="top"> <g:currency_format value="${sc_task.request_item.price}"/> </td>
                    <td valign="top"> ${sc_task.request_item.quantity}</td>
                    <td valign="top"> <g:currency_format value="${jvar_item_price}"/></td>
                </tr>
            </table>
        </td>
    </tr>
</j:jelly>