---
sourceDocument: オーストラリア API リファレンス
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/api-reference

 Release :

    - australia

ft:locale :

    - ja-JP

ft:publication_title :

    - オーストラリア API リファレンス

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# UI マクロ

# UI マクロ {#ariaid-title1}

* リリースバージョン: Australia
* 
* 更新日 2026年03月12日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：14分

UI マクロは、アドミニストレーターがユーザーインターフェイスに追加できる個別のスクリプト化されたコンポーネントです。  
通常、UI マクロは既存のフィールド タイプによって提供されない入力または情報を提供するコントロールです。デフォルトでは、以下のようなさまざまなユーザーインターフェイス要素の UI マクロが提供されます。

* すべてのフォーマッター
* サービスカタログカート
* フィールドの横にあるアクション アイコン
* フォームおよびリストのアクション アイコン
* コンテンツ管理システムのウィジェット
* オーケストレーションアクティビティデザイナー
{#c_UIMacros__ul_d4b_dwq_rv}

アドミニストレーターは、独自の UI マクロを作成して、カスタムコントロールまたはインターフェイスを提供できます。UI マクロを作成するには、[Jelly スクリプト](http://commons.apache.org/proper/commons-jelly/)の知識が必要です。例および提案されたアプローチについては、既存の UI マクロを確認してください。JavaScript テクノロジーを使用してカスタムインターフェイスをビルドする場合は、代替手段としてサービスポータルを検討してください。  
注:  
利用可能な UI マクロを表示するには、 すべてシステム UIUI マクロ.

## UI マクロの基本 {#ariaid-title2}

UI マクロを使用すると、使用可能なカタログ変数タイプを使用してビルドできないソリューションをビルドできます。

### アクセス可能な UI マクロ {#ui-macro-basics__section_z1m_kty_4zb}

UI マクロ \[ui_macros\] テーブルでは、いくつかの UI マクロを使用できます。これらの UI マクロの名前は `ui_` で始まり、UI ページで使用する標準フォームフィールドタイプのサブセットの動作をエミュレートします。たとえば、ui_date_time UI マクロは、UI ページの glide_date_time フィールドのように機能し、入力可能な入力フィールドに日時セレクターを提供できます。  
UI マクロは、\<g:\> Jelly タグを使用して UI ページに含めることができます。次の例には、UI マクロに 2 つのオプション属性を提供する ui_date_time UI マクロが含まれています。

    <g:ui_date_time name="due_date" value="2023-11-24 08:30:00" onchange="checkDateValue()" />

\<g:\> Jelly タグの属性値は、jvar プリフィックス付き変数として UI マクロに提供されます。UI マクロは、その XML で jvar プリフィックス付き変数を使用できます。{#ui-macro-basics__table_o5n_1nx_qzb__entry__2}

| 属性 | jvar プリフィックス付き変数 |
|-|-|
| name | jvar_name |
| value | jvar_value |
| onchange | jvar_onchange |
[表 : 1. jvar プリフィックス付き変数として使用される Jelly タグ属性]

{#ui-macro-basics__table_o5n_1nx_qzb}  
注:  
これらの UI マクロは、対応するフォームフィールドタイプのすべての機能をサポートすることは意図されていません。多くの場合、マクロは特定の ServiceNow アプリケーションユースケースのみを対象としています。

`ui_` プリフィックスが付いた UI マクロには、UI ページの \<g:\> Jelly タグで指定できる (または指定する必要がある) サポート対象属性を指定する説明が含まれています。利用可能な UI マクロを表示するには、 すべてシステム UIUI マクロ.
/

### カスタム UI マクロ {#ui-macro-basics__section_chz_xhx_qzb}

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 マクロの作成
:   移動先 すべてシステム UIUI マクロ をクリックし、\[ 新規\] を選択します。  
    マクロに「<kbd class="ph userinput">ui_example</kbd>」という名前を付け、次のスクリプトを \[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 ページでのマクロの使用
:   移動先 すべてシステム UIUI ページ をクリックし、\[ 新規\] を選択します。アドミンロールの選択を求められます。  
    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 ページに想定どおりに表示されない場合は、キャッシュをクリアすると解決することがあります。インスタンスのキャッシュをクリアするには、ブラウザで「<kbd class="ph userinput">&lt;server_url&gt;/cache.do</kbd>」と入力します。
**関連資料**   

* [UI ページ](https://servicenow-prod.fluidtopics.net/nPvU6Dlx~vXFaAPm7eEiBQ#r_UIPages "UI ページは、フォーム、ダイアログ、リスト、その他の UI コンポーネントの作成と表示に使用できます。")
* [Jelly のタグ](https://servicenow-prod.fluidtopics.net/q1uCncxG1~cGILzWcTn0sQ "Jelly を使用して XML を HTML に変換します。")
* [\<g:ui_form/\>](https://servicenow-prod.fluidtopics.net/g3GuiIQgR6GtI0x28b3BWw#r_GUIForm "このタグは、UI ページのフォームを定義します。")
* [\<g:ui_input_field /\>](https://servicenow-prod.fluidtopics.net/g3GuiIQgR6GtI0x28b3BWw#r_GUIInputField "このタグを使用することで、ユーザーが情報を入力できるページに入力フィールドを作成する UI マクロへの参照を追加できます。ui_input_field は、ラベル、名前、値、サイズを UI マクロに渡します。")
* [\<g:ui_checkbox/\>](https://servicenow-prod.fluidtopics.net/g3GuiIQgR6GtI0x28b3BWw#r_GUICheckbox "このタグを使用することで、ユーザーが編集可能なチェックマークをページに配置することができます。名前と値は UI マクロに渡されます。")

## UI マクロの呼び出し {#ariaid-title3}

アドミニストレーターは、ユーザーインターフェイスに関連付けられた特定のレコードタイプから UI マクロを呼び出すことができます。
{#r_CallingUIMacros__table_j2v_pzq_rv__entry__2}

| レコードタイプ | 例 |
|-|-|
| 辞書属性 | 参照フィールドのアイコンを表示します。 ref_contributions=ui_macro_name |
| UI ページ | UI ページに何かを表示します。 <g:macro_invoke macro="ui_macro_name" /> |
| UI マクロ | 別の UI マクロから UI マクロを呼び出します。 <?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> |
[表 : 2. レコードタイプ別の UI マクロの呼び出し]

{#r_CallingUIMacros__table_j2v_pzq_rv}

## UI マクロフォーム {#ariaid-title4}

各 UI マクロレコードは、Jelly コードで記述された名前と XML ドキュメントで構成されます。
{#r_UIMacroForm__table_sx5_bhr_rv__entry__2}

| フィールド | 説明 |
|-|-|
| 名前 | 一意でわかりやすいマクロの名前。 |
| アクティブ | チェックボックスをオンにすると、要素が定義されたとおりにレンダリングされます。コードを削除せずに要素を無効にするには、チェックボックスをオフにします。たとえば、email_reply マクロはデフォルトでは非アクティブです。 |
| 説明 | マクロとそれに渡されるパラメーターの目的を説明します。 |
| XML | マクロを定義する Jelly スクリプト。 |
[表 : 3. UI マクロフィールド]

{#r_UIMacroForm__table_sx5_bhr_rv}

## カスタム承認 UI マクロ {#ariaid-title5}

このセクションでは、カスタム承認 UI マクロの作成方法について説明します。
警告:  
ここに記載されているカスタマイズは、特定のインスタンスで使用するために開発されたものであり、Now Support ではサポートされていません。この方法は現状のまま提供され、実装の前に完全にテストする必要があります。このカスタマイズに関するすべての質問およびコメントは、コミュニティ[フォーラム](http://community.service-now.com/)に投稿してください。 スクリプト名：カスタム承認 UI マクロ

タイプ：UI マクロ

説明：実行計画の \[自分の承認\] ビューから詳細を取得するオプションがあります。これは、新しい UI マクロを作成することで実行できます。\[システム UI\] に移動して、\[UI マクロ\] をクリックします。まず、既存の `approval_summarizer_sc_task` の名前を `approval_summarizer_sc_task_old` などに変更して非アクティブ化します。次に、同じ名前 (`approval_summarizer_sc_task`) を使用して新しいものを作成します。名前は基本的に、マクロの実行内容と適用対象を示すものにする必要があります。ここでは、既存のものを置き換えるため、既存の名前を再利用することにしました。

この記事の下部にある XML スクリプトを、新しい 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>