UI マクロ
UI マクロは、アドミニストレーターがユーザーインターフェイスに追加できる個別のスクリプト化されたコンポーネントです。
- すべてのフォーマッター
- サービスカタログカート
- フィールドの横にあるアクション アイコン
- フォームおよびリストのアクション アイコン
- コンテンツ管理システムのウィジェット
- オーケストレーションアクティビティデザイナー
アドミニストレーターは、独自の UI マクロを作成して、カスタムコントロールまたはインターフェイスを提供できます。UI マクロを作成するには、Jelly スクリプトの知識が必要です。例および提案されたアプローチについては、既存の UI マクロを確認してください。JavaScript テクノロジーを使用してカスタムインターフェイスをビルドする場合は、代替手段としてサービスポータルを検討してください。
UI マクロの基本
UI マクロを使用すると、使用可能なカタログ変数タイプを使用してビルドできないソリューションをビルドできます。
アクセス可能な UI マクロ
UI マクロ [ui_macros] テーブルでは、いくつかの UI マクロを使用できます。これらの UI マクロの名前は ui_ で始まり、UI ページで使用する標準フォームフィールドタイプのサブセットの動作をエミュレートします。たとえば、ui_date_time UI マクロは、UI ページの glide_date_time フィールドのように機能し、入力可能な入力フィールドに日時セレクターを提供できます。
<g:ui_date_time name="due_date" value="2023-11-24 08:30:00" onchange="checkDateValue()" />| 属性 | jvar プリフィックス付き変数 |
|---|---|
| name | jvar_name |
| value | jvar_value |
| onchange | jvar_onchange |
ui_ プリフィックスが付いた UI マクロには、UI ページの <g:> Jelly タグで指定できる (または指定する必要がある) サポート対象属性を指定する説明が含まれています。利用可能な UI マクロを表示するには、次に移動します: .
カスタム UI マクロ
ui_example UI マクロは、3 つの jvar プリフィックス付き変数 (jvar_name、jvar_test_attribute、jvar_laptop_type) を使用します。これらの変数は、UI ページの <g:> Jelly タグで、name、test_attribute、および laptop_type 属性として UI マクロに提供できます。
- ui_example UI マクロの作成
- 移動先 [ 新規] を選択します。マクロに「ui_example」という名前を付け、次のスクリプトを [XML] フィールドに追加します。
<?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> - UI ページでのマクロの使用
- 移動先 [ 新規] を選択します。アドミンロールの選択を求められます。UI ページに名前を付け、次のスクリプトを [HTML] フィールドに追加します。
<?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> - 出力の確認
- UI ページで、[試行] をクリックして結果を表示できます。
UI マクロの呼び出し
アドミニストレーターは、ユーザーインターフェイスに関連付けられた特定のレコードタイプから UI マクロを呼び出すことができます。
| レコードタイプ | 例 |
|---|---|
| 辞書属性 | 参照フィールドのアイコンを表示します。 |
| UI ページ | UI ページに何かを表示します。 |
| UI マクロ | 別の UI マクロから UI マクロを呼び出します。 |
UI マクロフォーム
各 UI マクロレコードは、Jelly コードで記述された名前と XML ドキュメントで構成されます。
| フィールド | 説明 |
|---|---|
| 名前 | 一意でわかりやすいマクロの名前。 |
| アクティブ | チェックボックスをオンにすると、要素が定義されたとおりにレンダリングされます。コードを削除せずに要素を無効にするには、チェックボックスをオフにします。たとえば、email_reply マクロはデフォルトでは非アクティブです。 |
| 説明 | マクロとそれに渡されるパラメーターの目的を説明します。 |
| XML | マクロを定義する Jelly スクリプト。 |
カスタム承認 UI マクロ
このセクションでは、カスタム承認 UI マクロの作成方法について説明します。
スクリプト名：カスタム承認 UI マクロ
タイプ：UI マクロ
説明：実行計画の [自分の承認] ビューから詳細を取得するオプションがあります。これは、新しい UI マクロを作成することで実行できます。[システム UI] に移動して、[UI マクロ] をクリックします。まず、既存の approval_summarizer_sc_task という名前を approval_summarizer_sc_task_old などに変更して、無効にする必要があります。次に、同じ名前 (approval_summarizer_sc_task) を使用して新しいマクロを作成する必要があります。名前は基本的に、マクロの実行内容と適用対象を示すものにする必要があります。ここでは、既存のものを置き換えるため、既存の名前を再利用することにしました。
次に、この記事の下部にある xml スクリプトを、新しい UI マクロの xml コードウィンドウにコピーする必要があります。これは、サービスカタログ実行計画内の承認タスクを介してアイテムを承認する際に、承認者に何らかの詳細を提供するのに最適な方法です。
従来の方法
これは、従来の方法で承認タスクを使用するときに [自分の承認] に表示されるビューです。
承認者が実際に何を承認しようとしているのか、あまり詳しく書かれていないことに注意してください。タスクの簡単な説明は確認できますが、アイテムの詳細はわかりません。
新しい方法
これは、OOB (Out-Of-Box：すぐに利用可能な) UI マクロの代わりに以下の xml スクリプトを使用した場合に表示されるビューです。
この方法を使用すると、要求の承認と同様に詳細を表示できます。注文したアイテムへのリンク、簡単な説明 (アイテムから変数を展開する機能を含む)、価格、数量、合計価格があります。これは、より詳細な情報を示すという点で、承認者の助けとなります。実際に承認しているものを確認できるようになりました。
スクリプト：
<?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>