独自画面は3つのフィールドでできている（sys_ui_page）

2026年6月27日 00:12

ServiceNow を触っていると、標準のフォームやリストでは表現できない「独自の画面」が必要になる場面があります。ボタンを押すと出てくる確認ダイアログ、申請の入口になるランディングページ、ちょっとした集計を見せる自作画面。こうしたクラシック UI の独自画面の土台になっているのが UI Page、テーブル名で言うと sys_ui_page です。

この記事は、Business Rule や UI Action は見たことがある管理者・開発者を想定しています。「自分で1枚の画面を作るとき、それがどんなテーブルに、どんな形で保存されるのか」を確認したい人です。PDI（Zurich / OOTB）で sys_ui_page を実際に開きます。1行＝1画面で、html（Jelly＋HTML）・client_script・processing_script の3点が中身であることを確認します。あわせて、用途を分ける category、描画方式を切り替える direct、そして Service Portal の widget との違いも順に確認します。

この記事で分かること

UI Page は sys_ui_page の1行＝1画面で、html（Jelly＋HTML）・client_script・processing_script が中身であること
html フィールドの初期値が Jelly テンプレート（<j:jelly> 名前空間）になっていて、サーバ側で評価される前提であること
PDI 実機に617件の UI Page があり、約8割（493件）が general カテゴリであること
category（general / homepages / catalog / htmleditor / kb / cms）で用途が分かれること
direct が描画方式を決め、true（実機14件）だと Jelly 処理を通さず素の HTML を返すこと
Service Portal の widget（sp_widget）とは基盤・描画タイミングが違うこと

この記事の内容は ServiceNow の PDI（Personal Developer Instance）Zurich（ズーリッヒ）リリースの OOTB（初期設定）で確認した個人メモです。本番環境やカスタマイズ済み環境では、フィールド・選択肢・件数が異なる場合があります。

UI Page（sys_ui_page）とは

UI Page とは、HTML をベースにした独自画面を1件＝1レコードで保存したものです。下の実画面は、OOTB の assessment_take2（アンケート回答画面）という UI Page を1件フォームで開いたものです。

ポイントは、画面の中身がいくつかのフィールドに分かれて保存されていることです。見た目を作る HTML、ブラウザ側で動く Client script、サーバ側で動く Processing script。この3つで「どう見えて」「クライアントで何をして」「サーバで何をするか」が決まります。PDI（Zurich / OOTB）の sys_ui_page には、すでに617件の UI Page が入っていました。

UI Page の構成要素

sys_ui_page の固有フィールドは8つで、画面の中身を決めるのは次の図の要素です。

中心は html フィールドです。実機で新規 UI Page を作ると、html の初期値が次のような Jelly テンプレートになっていました。

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" ...>
</j:jelly>

j:（jelly:core）や g:（glide）という名前空間が最初から用意されています。つまり html は単なる静的 HTML ではなく、サーバ側で評価される Jelly テンプレートとして書く前提です。<g:evaluate> でサーバの値を取り出したり、${...} で変数を埋め込んだりできます。各フィールドの型と上限は次のとおりです。

html は最大65000文字と大きく、client_script・processing_script はそれぞれ8000文字です。フィールド一覧は次のURLで確認できます（先頭の <YourInstance> は自分のインスタンスに置き換えてください）。

https://<YourInstance>/sys_dictionary_list.do?sysparm_query=name=sys_ui_page^elementISNOTEMPTY

category で用途が分かれる

UI Page は category で用途ごとに分類されています。実機の category 選択肢は6種類で、件数には大きな偏りがありました。

617件中493件（約8割）が general でした。general は、ダイアログや汎用の独自画面に使われる「その他」的な分類です。次いで catalog（21件）、homepages（12件）、htmleditor（10件）と続き、cms は OOTB では0件でした。category は次のURLで一覧をグループ表示できます。

category 自体の選択肢（value と label の対応）は、sys_choice で確認できます。

direct：Jelly 処理を通すか、素の HTML か

UI Page には direct という真偽フィールドがあり、これが描画方式を決めます。

direct=false（既定）：html フィールドがサーバ側で Jelly テンプレートとして評価されてから返ります。<j:> <g:> タグや ${...} 式、processing_script が効きます。
direct=true：html を Jelly 処理せず、素の HTML としてそのまま返します。テンプレート処理を避けたい静的・特殊用途で使われます。

実機では direct=true はわずか14件で、false が474件、残りは未設定でした。つまり OOTB のほとんどの UI Page はJelly 処理を通す前提です。direct=true のページは次のURLで一覧できます。

なお、direct=true のときに内部でどこまで処理がスキップされるかの細部は、今回の検証範囲外です。ここでは件数と既定挙動のみを実測しています。

Service Portal の widget との違い

「独自画面を作る」仕組みには、もう1つ Service Portal の widget（sp_widget） があります。両者は世代と実行基盤が違います。

ざっくり言うと、UI Page はクラシック UI（Jelly・サーバ側レンダリング） の独自画面で、ダイアログやホームページのコンテンツに使います。一方 widget は Service Portal（AngularJS・クライアント側レンダリング） の部品です。同じ「自作画面」でも、UI Page は古くからある基盤、widget は新しいポータル向けという住み分けになっています。Service Portal そのものの構造は Service Portal の構造（sp_portal → sp_page → widget）で確認できます。

実機で確認するときに見るべきURL

最後に、今回見た画面を自分のインスタンスで開くためのURLをまとめます（<YourInstance> は置き換えてください）。

# UI Page の一覧（名前順）
https://<YourInstance>/sys_ui_page_list.do?sysparm_query=ORDERBYname

# category でグループ化
https://<YourInstance>/sys_ui_page_list.do?sysparm_query=GROUPBYcategory

# sys_ui_page のフィールド定義
https://<YourInstance>/sys_dictionary_list.do?sysparm_query=name=sys_ui_page^elementISNOTEMPTY

まとめ

UI Page は sys_ui_page の1行＝1画面です。中身は html（Jelly＋HTML）・client_script・processing_script の3点です。
html は Jelly テンプレートが初期値で、サーバ側で評価される前提です。固有フィールドは8つです。
PDI 実機には617件あり、約8割（493件）が general カテゴリです。用途は category で分かれます。
direct が描画方式を決めます。true（実機14件）は Jelly 処理を通さず素 HTML、false は Jelly 処理を通します（内部実装の細部は検証範囲外）。
同じ自作画面でも Service Portal の widget（sp_widget）はクライアント側レンダリングで、基盤が異なります。

UI Page の位置づけが分かると、UI Action（ボタン）・フォーム構成（sys_ui_form）・Service Portal の構造という ServiceNow の「画面まわり」が、クラシック UI とポータルの両方からつながって見えてきます。

ServiceNow 画面・フォーム完全ガイド：どこを直せば見た目が変わるのか — UI Pageは自作画面そのものを作る仕組みです。画面まわり全体をどこから直せるかは、こちらの完全ガイドで整理しています。