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 anwenderdefinierte Steuerungen oder Schnittstellen bereitzustellen. Das Erstellen von UI-Makros erfordert Kenntnisse von Jelly-Skript . Überprüfen Sie die vorhandenen UI-Makros auf Beispiele und vorgeschlagene Ansätze. Diejenigen, die anwenderdefinierte Schnittstellen mit JavaScript-Technologien erstellen möchten, sollten das Serviceportal als Alternative betrachten.

    Hinweis:
    Navigieren Sie zu, um verfügbare UI-Makros anzuzeigen Alle > System-UI > UI-Makrosan.

    UI-Makro-Grundlagen

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

    Zugängliche UI-Makros

    Mehrere UI-Makros sind in der UI-Makros-Tabelle [ui_macros] verfügbar. Diese UI-Makros haben Namen, die mit beginnen ui_ Und emulieren Sie das Verhalten einer Teilmenge von Standardformularfeldtypen zur Verwendung auf UI-Seiten. Beispielsweise kann das UI_date_time-UI-Makro wie ein Glide_date_time-Feld auf einer UI-Seite fungieren und ein typfähiges Eingabefeld mit einer Datums-/Uhrzeitauswahl bereitstellen.

    Ein UI-Makro kann in eine UI-Seite mit dem <g:>-Jelly-Tag aufgenommen werden. Das folgende Beispiel enthält das ui_date_time-UI-Makro, das dem UI-Makro zwei optionale Attribute bereitstellt:
    <g:ui_date_time name="due_date" value="2023-11-24 08:30:00" onchange="checkDateValue()" />
    Die Attributwerte im <g:>-Jelly-Tag werden dem UI-Makro als jvar-Präfix-Variablen bereitgestellt. Das UI-Makro kann die jvar-Präfix-Variablen in seiner XML verwenden.
    Tabelle : 1. Jelly-Tag-Attribute, die als jvar-Präfix-Variablen verwendet werden
    Attribute Jvar-Präfix-Variablen
    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 bestimmt ServiceNowAnwendungsanwendungsfälle.

    Die ui_ -UI-Makros mit Präfix enthalten Beschreibungen, die unterstützte Attribute angeben, die im <g:>-Jelly-Tag der UI-Seite angegeben werden können (oder müssen). Navigieren Sie zu, um verfügbare UI-Makros anzuzeigen Alle > System-UI > UI-Makrosan.

    /

    Anwenderdefinierte UI-Makros

    Das UI-Makro „ui_example“ verwendet drei jvar-prefixed-Variablen: 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 einem <g:>-Jelly-Tag auf einer UI-Seite bereitgestellt werden.

    UI_example-UI-Makro wird erstellt
    Navigieren zu Alle > System-UI > UI-Makros Und wählen Sie aus Neu .
    Benennen Sie das Makro ui_example Und fügen Sie das folgende Skript zu hinzu XML Feld:
    <?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 aus Neu . Sie werden aufgefordert, eine Administratorrolle auszuwählen.
    Benennen Sie die UI-Seite, und fügen Sie das folgende Skript zu hinzu HTML Feld:
    <?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 klicken Versuchen Sie Es Zum Anzeigen der Ergebnisse.
    Hinweis:
    Wenn Sie ein Makro erstellen und es nicht wie erwartet auf der UI-Seite angezeigt wird, kann das Leeren des Cache hilfreich sein. Um den Cache Ihrer Instanz zu leeren, geben Sie in Ihrem Browser ein <server_url>/Cache.do .

    UI-Makros werden aufgerufen

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

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

    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

    Rufen Sie ein UI-Makro aus einem anderen UI-Makro auf:

    <?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>

    UI-Makroformular

    Jeder UI-Makrodatensatz besteht aus einem Namen und einem XML-Dokument, das in Jelly-Code geschrieben wurde.

    Tabelle : 3. UI-Makrofelder
    Feld Beschreibung
    Name Ein eindeutiger und beschreibender Name für dieses Makro.
    Aktiv Aktivieren Sie das Kontrollkästchen, um das Element wie definiert zu rendern. Deaktivieren Sie das Kontrollkästchen, um das Element zu deaktivieren, ohne den Code zu löschen. Beispiel: Email_reply Makro ist standardmäßig inaktiv.
    Beschreibung Beschreiben Sie den Zweck des Makros und die Parameter, die an das Makro übergeben wurden.
    XML Jelly-Skript, das das Makro definiert.

    Anwenderdefiniertes GenehmigungsUI-Makro

    In diesem Abschnitt wird beschrieben, wie ein anwenderdefiniertes Genehmigungs-UI-Makro erstellt wird.

    Warnung:
    Die hier beschriebene Anpassung wurde für die Verwendung in bestimmten Instanzen entwickelt und wird von nicht unterstützt Now Support. Diese Methode wird unverändert bereitgestellt und sollte vor der Implementierung gründlich getestet werden. Veröffentlichen Sie alle Fragen und Kommentare zu dieser Anpassung in unserer Community Forum .

    Skriptname : Anwenderdefiniertes Genehmigungs-UI-Makro

    Typ : UI-Makro

    Beschreibung : Hier ist eine Option zum Abrufen weiterer Details aus der Ansicht „meine Genehmigungen“ eines Ausführungsplans. Dies kann durch Erstellen eines neuen UI-Makros erfolgen. Navigieren Sie zu System-UI Und klicken Sie auf UI-Makros . Zuerst müssen Sie das vorhandene umbenennen approval_summarizer_sc_task Zu etwas wie approval_summarizer_sc_task_old Und deaktivieren Sie es. Dann müssen Sie einen neuen mit demselben Namen erstellen ( approval_summarizer_sc_task ). Der Name sollte im Grunde sagen, was das Makro tut und wofür es gilt. In diesem Fall ersetzen wir einen vorhandenen, daher haben wir uns entschieden, den vorhandenen Namen wiederzuverwenden.

    Abbildung : 1. Genehmigungsmakros

    Kopieren Sie dann das XML-Skript unten in diesem artikel in das XML-Codefenster im neuen UI-Makro. Dies ist eine großartige Möglichkeit, einem Genehmiger einige Details zu geben, wenn Sie Einzelposten-Genehmigungen über Genehmigungsaufgaben innerhalb der Servicekatalog-Ausführungspläne durchführen.

    Die alte Art

    Dies ist die Ansicht, die Sie in „meine Genehmigungen“ sehen, wenn Sie eine Genehmigungsaufgabe mit der alten Methode verwenden.

    Abbildung : 2. Meine Genehmigungen (alte Art)

    Beachten Sie, dass es nicht viele Details gibt, die dem Genehmiger mitteilen, was er tatsächlich genehmigt. Sie können die kurze Beschreibung der Aufgabe sehen, aber nicht viel darüber, was das Element ist.

    Die neue Art

    Dies ist die Ansicht, die angezeigt wird, wenn Sie das XML-Skript unten anstelle des OOB-UI-Makros (sofort einsatzbereit) verwenden.

    Abbildung : 3. Meine Genehmigungen

    Mit dieser Methode können Sie Details wie die Anforderungsgenehmigung anzeigen. Sie haben einen Link zum bestellten Artikel, eine Kurzbeschreibung (die die Möglichkeit enthält, die Variablen aus dem Artikel zu erweitern), Preis, Menge und Gesamtpreis. Dies hilft dem Genehmiger, mehr Details anzuzeigen. Sie können jetzt sehen, was sie tatsächlich 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>