0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ServiceNow PDIの新しい管理画面の「あの」メッセージを再現したい - UI Builder Configure alerts to auto-dismiss

Posted at

発端 PDIの管理画面のUIが新しくなった

2025年9月上旬、ServiceNow DeveloperサイトのPDI管理画面が新しくなりました。
こんな感じ。

image.png

PDIをWake Upして、「Manage my instance」のボタンを押した画面です。

一定時間で消えるメッセージの謎に迫る

「Manage my instance」の画面、UI自体も新しいなと思ったんですが、諸々眺めてるとクリックしたときに出てくる上部の「右から左に進捗バーが動いて一定時間たつと消えるメッセージ」が気になりました。

こういうやつとか
image.png

こういうやつ
image.png

(メッセージ上にマウスオーバーするとカウントが止まります)

メッセージや注釈表示でこんなのできたっけなーと、
でもServiceNow公式のPDIの管理画面でできてるんだから実際のインスタンスでできないこともないだろう、
と思っていろいろ漁っていると、どうやらZurichリリースの内容でした。

UI Builder Configure alerts to auto-dismiss(アラートを自動消去するように設定する)

Zurichリリースノートの以下に該当箇所の記載がありました。
UI Builder Release Notes1
Configure alerts to auto-dismiss 2

リリースノート的にはChangeの欄に記載があるのでもしかしたら今までも似たようなことはできたのかもしれませんが、何かしら今回のことができるようになったんだろうという理解で進めます。(PDI管理画面に出てきたタイミングもあるし)

UI Builderに詳しかったり勘所のある方は上記のページを見れば「あ~こんな感じね。」となってすぐに再現できると思います。
私はあまり使ったことが無かったため備忘がてら手順を記載していきます。

設定パターン1 ボタンから自動消去アラート(メッセージ)を表示する。

Configure alerts to auto-dismiss2 のページの手順通りに設定する手順です。
基本はこのページ通りなので、詰まったポイントを記載します。

手順3.の「View experience settings」はExperienceのページのここにあります。めっちゃ探しました。
image.png

あとはページに記載の無かった箇所としては、「Show time label」の解説ですね。(右のinfoボタンをマウスオーバーしたら説明は出てくるので気づくかもですが)
image.png
(PDIの管理画面はチェック無しパターンなんだなぁと思いました)

docsの手順12.以降は以下のようにConfigureの項目を好きなように設定すればOKです。
image.png

設定&自動消去メッセージが反映できました!
(検証でサクっとやった&UI Builder初心者が故ボタンの配置などにはツッコまないでください)
image.png

設定パターン2 ページのロード時に自動消去アラート(メッセージ)を表示する。

docs、パターン1の設定ではボタンを押すと表示するように設定しましたが、PDIの管理画面のようにページを開いたタイミングでアラート(メッセージ)を表示させた方が、実務上一定時間とはいえ必ず見てほしいものとして受け取ってもらえるはずです。

こちらはUI Builderの設定でページ全体に対するイベントハンドラを設定していきます。

1)まずは対象のページのBodyを選択してください。
image.png
プレビューもBodyを選択している(右側のピンク枠)となっていることを確認しましょう。

2)そのまま右側の「Page configuration」の「Events」タブの「Add event mapping」をクリックします。
image.png

3)「Page Reday」を選択し、「Continue」をクリック。
image.png

4)「Add alert notifications」を選択し、「Continue」をクリック。
image.png

5)残りはパターン1と同じようにConfigureの項目を設定し、「Add」をクリック。
image.png

プレビューや実際のページに行って確認。できました!
image.png
ここだけGIF動画にしようと思ったんですが、画質が悪いのしか作れず断念。
この記事を見て気になった方は是非ご自身で設定試してみてください!動きます。
(むしろここまでの手順でダメだったら指摘してください何卒)

※1)の手順で選択する場所はBodyに限らず、各種コンポーネントのイベントハンドラでPage Readyを選択すればその場所がロードされた時にメッセージを表示できるはずです。ご自身の利用方法に合わせて設定してください。

まとめ・感想

たどり着いてからはわりと簡単に設定して「あの」メッセージの再現をすることができました。
ServiceNowさんのこういったDeveroperサイトやNowSupportのホームページなどから良いUIのインスピレーションを得れたりするのでこういった視点で既存の機能の気づきや新機能を発見できるのも面白いですね。
実用予定は今のところないのですが、何かの機会があれば提案しようと思います!
(あとこれを機にUI Builderがちょっとだけ詳しくなった気がする)

あとがき

ちなみに最初に調べるときUI Builderは普段なじみが無くて全然思いつかず、
PDI管理画面を何度かロードして、ブラウザの開発者ツールで検証して「--now-alert-progress-bar--」などを見つけてキーワード数珠つなぎでたどり着きました。めでたしめでたし。
image.png

  1. UI Builder Release Notes

  2. Configure alerts to auto-dismiss 2

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?