【ServiceNow】フォーム画面にドットウォークフィールドを追加する方法

# 1. ドットウォークとは？
ServiceNowの面白い機能の一つとして、Dot-walking（ドットウォーク）があります。

リスト・フォーム・スクリプトなどで使用でき、関連するテーブルの情報を簡単に取得することができます。

Incident.Caller.Company
（Incidentという名前のフィールド→Callerという名前のフィールド→Companyというフィールド）
というように「.（ドット）」で連結して情報を参照することから、ドットウォークと呼ばれます。

ServiceNowを使いこなすには欠かせない機能なのですが、使用方法に若干クセがあります。

今回はフォーム画面を例に、ドットウォークフィールドを追加する方法を紹介します。

また、おまけでUI Policyでドットウォークフィールドを制御する方法も紹介します。

:::note info
Dot-walkingの公式Docは[こちら](https://docs.servicenow.com/en-US/bundle/tokyo-platform-user-interface/page/use/navigation/reference/dot-walking-examples.html)
:::

:::note info
使用するServiceNowのバージョンはTokyoです
:::




# 2. フォーム画面におけるドットウォークフィールドの追加方法

## 2-0. 結論
**Form Layout** から追加します。

以下に詳細な手順を記します。

## 2-1. 下準備

まず、テーブルのフィールドとしてリファレンスフィールドを用意しましょう。

![dev108799.service-now.com_now_nav_ui_classic_params_target_x_880928_my_cust_0_user_information.do%3Fsys_id%3D-1%26sys_is_list%3Dtrue%26sys_target%3Dx_880928_my_cust_0_user_information%26sysparm_checked_items%3D%26sysparm_fixed_query%3D% (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/248649bb-fe80-548f-b3f9-74b1d945a7c7.png)

リファレンスフィールドとは、他のテーブルとリンクしているタイプのフィールドです。

画像の例では、「User」というフィールドがユーザーテーブル（sys_user）へリンクしています。

虫眼鏡ボタンをクリックしてみましょう。

![スクリーンショット 2022-10-23 14.47.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/99e0d519-f41e-467a-c8a4-ef37567791e3.png)

するとポップアップウィンドウが出現し、ユーザーテーブルのレコードを参照できます。

選択したレコードの「Name」フィールドが、「User」フィールドの値として挿入されていますね。

ポップアップウィンドウの列を見ると、ユーザーテーブルのレコードは「Name」の他にも、「First Name」「Last Name」「Email」といった情報を持っていることが分かります。

今回は、このユーザーテーブルの「Email」の情報をドットウォークで取得するフィールドを作成してみましょう。

## 2-2. 実際の追加方法
フォーム画面左上の三本線マークをクリックして、コンテキストメニューを表示します。

![dev108799.service-now.com_now_nav_ui_classic_params_target_x_880928_my_cust_0_user_information.do%3Fsys_id%3D-1%26sys_is_list%3Dtrue%26sys_target%3Dx_880928_my_cust_0_user_information%26sysparm_checked_items%3D%26sysparm_fixed_query%3D%26sy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/c1957652-62a2-ce12-b5e3-3db714074d00.png)

Configure→Form Layoutと進み、クリックします。

![dev108799.service-now.com_now_nav_ui_classic_params_target_slushbucket.do%3Fsysparm_referring_url%3Dx_880928_my_cust_0_user_information.do%253Fsys_id%253D-1%254099%2540sys_is_list%253Dtrue%254099%2540sys_target%253Dx_880928_my_cust_0_user_i.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/101211c2-204f-badd-6adb-98865923a986.png)

Form Layoutは名前の通り、フォーム画面のレイアウトをカスタマイズする画面です。

フィールドの表示/非表示や、表示順をカスタマイズできます。

左側の「Available」が表示可能なフィールド、右側の「Selected」が実際に表示されるフィールドです。

現在は「Created」「Updated」などのフィールドは非表示となっており、「User」フィールドのみが表示される設定となっているわけですね。

フィールドを選択して、真ん中の「>」「<」ボタンをクリックすると左右のフィールドに移動させることができ、表示/非表示をカスタマイズできるという仕組みです。

ここで左側「Available」ペインのフィールド、「User」に注目してみましょう。

このフィールドのみ文字色が緑色で、「User」の文字列の右側に[+]というマークが表示されています。

「User」を選択してみましょう。

![dev108799.service-now.com_now_nav_ui_classic_params_target_slushbucket.do%3Fsysparm_referring_url%3Dx_880928_my_cust_0_user_information.do%253Fsys_id%253D-1%254099%2540sys_is_list%253Dtrue%254099%2540sys_target%253Dx_880928_my_cust_0_us (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/dc5183ab-7dfa-499f-74d4-06545695212d.png)

「>」「<」アイコンの上に、謎のボタンが出現しました。

謎のボタンを押下してみましょう。

![dev108799.service-now.com_now_nav_ui_classic_params_target_slushbucket.do%3Fsysparm_referring_url%3Dx_880928_my_cust_0_user_information.do%253Fsys_id%253D-1%254099%2540sys_is_list%253Dtrue%254099%2540sys_target%253Dx_880928_my_cust_0_us (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/dc190d36-eacf-6959-5e07-9cabef8cb341.png)

「Available」ペインの内容がガラッと変わりました！

何が起こったのでしょうか。

先程の謎のボタンは「展開」ボタンです。

先述の通り、「User」フィールドは他のテーブルとリンクしているリファレンスフィールドです。

「展開」ボタンをクリックすることで、リンクしている先の別のテーブルのフィールドが「Available」ペインに一覧表示されるようになったというわけです。

今回追加したいフィールドは「Email」なので、一覧画面の中から探してみましょう。

![dev108799.service-now.com_now_nav_ui_classic_params_target_slushbucket.do%3Fsysparm_referring_url%3Dx_880928_my_cust_0_user_information.do%253Fsys_id%253D-1%254099%2540sys_is_list%253Dtrue%254099%2540sys_target%253Dx_880928_my_cust_0_us (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/f25e5ad2-7984-cbad-e56b-83e45e9f191e.png)

ありました。

「Email」を選択した状態で、「>」ボタンをクリックします。

![dev108799.service-now.com_now_nav_ui_classic_params_target_slushbucket.do%3Fsysparm_referring_url%3Dx_880928_my_cust_0_user_information.do%253Fsys_id%253D-1%254099%2540sys_is_list%253Dtrue%254099%2540sys_target%253Dx_880928_my_cust_0_us (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/13dbf3a4-dc41-e98a-aafd-37481c1c9081.png)

「Selected」ペインに「User.Email」というフィールドが追加されました。

**これが、ドット連結された「ドットウォーク」フィールドです。**

右上の「Save」ボタンをクリックして、カスタマイズ内容を保存しましょう。

![dev108799.service-now.com_now_nav_ui_classic_params_target_x_880928_my_cust_0_user_information.do%3Fsys_id%3D-1%26sys_is_list%3Dtrue%26sys_target%3Dx_880928_my_cust_0_user_information%26sysparm_referring_url%3Dx_880928_my_cust_0_user_inform.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/8a950b3e-ce52-b09a-1368-f1866a2285e2.png)

フォーム画面に「Email」というフィールドが追加されていますね。

## 2-3. 挙動確認
では実際に、ドットウォークフィールドの挙動を確認してみましょう。

新規フォーム画面を開きます。

![dev108799.service-now.com_now_nav_ui_classic_params_target_x_880928_my_cust_0_user_information.do%3Fsys_id%3D-1%26sys_is_list%3Dtrue%26sys_target%3Dx_880928_my_cust_0_user_information%26sysparm_referring_url%3Dx_880928_my_cust_0_user_inform.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/0ea06fdb-2c3c-9e0d-76e0-b0aa5d9e0bd7.png)

「User」フィールドの虫眼鏡ボタンをクリックして、ポップアップウィンドウを表示します。

![スクリーンショット 2022-10-23 14.47.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/99e0d519-f41e-467a-c8a4-ef37567791e3.png)

一番上の、「Abel Tuter」さんをクリックして選択してみましょう。

![dev108799.service-now.com_now_nav_ui_classic_params_target_x_880928_my_cust_0_user_information.do%3Fsys_id%3D-1%26sys_is_list%3Dtrue%26sys_target%3Dx_880928_my_cust_0_user_information%26sysparm_referring_url%3Dx_880928_my_cust_0_user_in (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/a1cdebab-a909-b625-286c-712978c022a7.png)

無事、Abel TuterさんのEmailの値が「Email」フィールドに表示されました。


## 2-4. まとめ
以上が、フォーム画面にドットウォークフィールドを追加する方法です。

通常、新規にフィールドを追加する際はForm Designから行ったり、Studio上のTableから行ったりしますが、ドットウォークフィールドの場合は「Form Layout」から行うのがポイントです。

# 3. おまけ ～UI Policyを用いたドットウォークフィールドの制御〜
## 3-1. おまけの概要

ドットウォークフィールドは、他のテーブルを参照して取得した情報を取得するフィールドです。

上記の例ではユーザーテーブルを参照して、ユーザーに紐づくEmailの情報を取得しました。

ということは通常、フィールドのタイプは **参照のみ** で良いはずです。

編集できてしまうと、参照元のテーブルと参照先のテーブルの間で値の整合性が取れなくなってしまいますからね。

ところが、上記の手順でForm Layoutからドットウォークフィールドをフォーム画面に追加すると、 **編集可** のフィールドとなってしまいます。

これでは困りますね。

というわけで、以下にUI Policyを用いてドットウォークフィールドを参照のみに制御する方法を記します。

:::note info
UI Policyの公式Docは[こちら](https://docs.servicenow.com/en-US/bundle/tokyo-platform-administration/page/administer/form-administration/task/t_CreateAUIPolicy.html)
:::

## 3-2. UI Policyの設定方法
フォーム画面左上の三本線マークをクリックして、コンテキストメニューを表示します。

![dev108799.service-now.com_now_nav_ui_classic_params_target_x_880928_my_cust_0_user_information.do%3Fsys_id%3D-1%26sys_is_list%3Dtrue%26sys_target%3Dx_880928_my_cust_0_user_information%26sysparm_checked_items%3D%26sysparm_fixed_query%3D%26sy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/c1957652-62a2-ce12-b5e3-3db714074d00.png)

Configure→UI Policiesと進み、クリックします。

![dev108799.service-now.com_now_nav_ui_classic_params_target_sys_ui_policy_list.do%3Fsysparm_referring_url%3Dx_880928_my_cust_0_user_information.do%253Fsys_id%253D-1%254099%2540sys_is_list%253Dtrue%254099%2540sys_target%253Dx_880928_my_cust_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/43511bb7-7832-a46c-054a-aed2438f64dd.png)

UI Policiesテーブルが表示されるので、右上の「New」ボタンをクリックします。

![dev108799.service-now.com_now_nav_ui_classic_params_target_sys_ui_policy.do%3Fsys_id%3D-1%26sys_is_list%3Dtrue%26sys_target%3Dsys_ui_policy%26sysparm_checked_items%3D%26sysparm_fixed_query%3D%26sysparm_group_sort%3D%26sysparm_list_css%3D%26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/7884e1d6-25a0-b18b-59b4-1f4f6fe10783.png)

UI Policyの設定画面です。

Short descriptionに簡単な説明を記入し、一旦右上のSubmitボタンをクリックします。

![dev108799.service-now.com_now_nav_ui_classic_params_target_sys_ui_policy_list.do%3Fsysparm_domain_restore%3Dfalse%26sysparm_query%3Dtable%253Dx_880928_my_cust_0_user_information%255EORtableINx_880928_my_cust_0_user_information%26sysparm_que.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/22d81cb2-9528-76cb-0ef9-cfb96574f9b6.png)

新規のUI Policyが作成され、一覧画面に遷移しました。

作成したUI PolicyのShort description欄をクリックして、再び開きます。

![dev108799.service-now.com_now_nav_ui_classic_params_target_sys_ui_policy.do%3Fsys_id%3D860f785c1b3e111042196575624bcbdd%26sysparm_record_target%3Dsys_ui_policy%26sysparm_record_row%3D1%26sysparm_record_rows%3D1%26sysparm_record_list%3Dtable.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/86f1baa3-6b34-594f-4880-daee23dc2bf1.png)

画面の最下部に「UI Policy Actions」と「UI Policy Related List Actions」というタブが追加されているのが確認できます。

今回は「UI Policy Actions」の方を使用します。

「UI Policy Actions」タブ内右上の「New」ボタンをクリックします。

![dev108799.service-now.com_now_nav_ui_classic_params_target_sys_ui_policy_action.do%3Fsys_id%3D-1%26sys_is_list%3Dtrue%26sys_is_related_list%3Dtrue%26sys_target%3Dsys_ui_policy_action%26sysparm_checked_items%3D%26sysparm_collection%3Dsys_ui_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/eb70961a-a863-8f3f-d103-cc31460ea36e.png)

UI Policy Action設定画面が開きます。

「Field name」のプルダウンをクリックすると、ポップアップウィンドウが開きます。

![dev108799.service-now.com_now_nav_ui_classic_params_target_sys_ui_policy_action.do%3Fsys_id%3D-1%26sys_is_list%3Dtrue%26sys_is_related_list%3Dtrue%26sys_target%3Dsys_ui_policy_action%26sysparm_checked_items%3D%26sysparm_collection%3Dsys (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/eddc7b5a-fc76-0277-7f11-4ea20bd487d8.png)

「User」の左側の「+」をクリックして展開し、「Email」フィールドを探してクリックします。

![dev108799.service-now.com_now_nav_ui_classic_params_target_sys_ui_policy_action.do%3Fsys_id%3D-1%26sys_is_list%3Dtrue%26sys_is_related_list%3Dtrue%26sys_target%3Dsys_ui_policy_action%26sysparm_checked_items%3D%26sysparm_collection%3Dsys (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/9d01710e-8ffc-147e-abe6-eea876428499.png)

「User Email」が選択されました。（なぜここはドットウォーク表記ではないのでしょうか…）

次に、「Read only」のプルダウンをクリックし、「Leave alone」から「True」に変更します。

![dev108799.service-now.com_now_nav_ui_classic_params_target_sys_ui_policy_action.do%3Fsys_id%3D-1%26sys_is_list%3Dtrue%26sys_is_related_list%3Dtrue%26sys_target%3Dsys_ui_policy_action%26sysparm_checked_items%3D%26sysparm_collection%3Dsys (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/6cec898f-b423-9068-f9cc-0750eafdb5a1.png)

以上でUI Policy Actionの設定は完了です。右上の「Submit」ボタンをクリックします。

![dev108799.service-now.com_now_nav_ui_classic_params_target_sys_ui_policy.do%3Fsys_id%3D860f785c1b3e111042196575624bcbdd%26sysparm_record_list%3Dtable%253Dx_880928_my_cust_0_user_information%255EORtableINx_880928_my_cust_0_user_informati (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/4a4d9cf3-f9b6-e994-7276-32d0a4d43bf6.png)

UI Policyの設定画面に戻ってきました。

UI Policy Actionsのタブを見ると、user.emailがRead only「True」になっていることが確認できますね。

画面右上の「Update」ボタンをクリックします。

![dev108799.service-now.com_now_nav_ui_classic_params_target_sys_ui_policy_list.do%3Fsysparm_domain_restore%3Dfalse%26sysparm_query%3Dtable%253Dx_880928_my_cust_0_user_information%255EORtableINx_880928_my_cust_0_user_information%26sysparm (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/cb3254c3-d24b-0c67-484b-ba2b59065a6a.png)

以上でUI Policyの設定は完了です。

## 3-3. UI Policyの挙動確認
実際に挙動を確認してみましょう。

設定したテーブルの、新規フォーム画面を開きます。

![dev108799.service-now.com_now_nav_ui_classic_params_target_x_880928_my_cust_0_user_information.do%3Fsys_id%3D-1%26sys_is_list%3Dtrue%26sys_target%3Dx_880928_my_cust_0_user_information%26sysparm_checked_items%3D%26sysparm_fixed_query%3D% (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/59499327-a854-797e-d3e6-c3e9266d2bef.png)

「Email」フィールドがグレーアウトしていますね。フィールドにカーソルを合わせても入力できません。

試しにユーザーを選択してみましょう。

![dev108799.service-now.com_now_nav_ui_classic_params_target_x_880928_my_cust_0_user_information.do%3Fsys_id%3D-1%26sys_is_list%3Dtrue%26sys_target%3Dx_880928_my_cust_0_user_information%26sysparm_checked_items%3D%26sysparm_fixed_query%3D% (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604835/2f4fa525-a97c-5fde-879b-37f12ee53615.png)

やはり「Email」フィールドはグレーアウトしており、編集不可です。

## 3-4. おまけのまとめ
おまけの割に長くなってしまいましたが、以上がUI Policyを用いてドットウォークフィールドを参照のみに設定する方法です。

フィールドの活性/非活性や必須/入力可を、スクリプトを書かずにUIの操作のみで制御可能なのは、ノーコード/ローコードプラットフォームとしてのServiceNowの魅力の一つですね。