UI-Makros
UI-Makros sind diskrete Skriptkomponenten, die Administratoren der Anwenderoberfläche hinzufügen können.
- 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.
UI-Makrogrundlagen
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
In der Tabelle „UI-Makros“ [ui_macros] sind mehrere UI-Makros 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.
<g:ui_date_time name="due_date" value="2023-11-24 08:30:00" onchange="checkDateValue()" />| Attribute | Jvar-Präfix-Variablen |
|---|---|
| name | Jvar_Name |
| Wert | Jvar_value |
| onchange | Jvar_onchange |
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). Um verfügbare UI-Makros anzuzeigen, navigieren Sie zu an.
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.
- Erstellen des UI-Makros UI_example
- Navigieren zu Und wählen Sie aus Neu .Benennen Sie das Makro ui_example Und fügen Sie dem das folgende Skript 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 Und wählen Sie aus Neu . Sie werden aufgefordert, eine Administratorrolle auszuwählen.Benennen Sie die UI-Seite, und fügen Sie dem das folgende Skript 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.
UI-Makros aufrufen
Administratoren können UI-Makros aus bestimmten Datensatztypen aufrufen, die der Benutzeroberfläche zugeordnet sind.
| Datensatztyp | Beispiel |
|---|---|
| Wörterbuchattribut | Ein Symbol für ein Referenzfeld anzeigen: |
| UI-Seite | Etwas auf einer UI-Seite anzeigen: |
| UI-Makro | Ein UI-Makro von einem anderen UI-Makro aus aufrufen: |
Formular „UI-Makro“
Jeder UI-Makrodatensatz besteht aus einem Namen und einem in Jelly-Code geschriebenen XML-Dokument.
| 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.
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.
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.
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.
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>