ブログ

  1. ホーム
  2. ブログ一覧
  3. ボタン＋モーダルで創る！ワークスペース独自の画面制御

ボタン＋モーダルで創る！ワークスペース独自の画面制御

技術

UI ビルダー モーダル Workspace Now Platform

社内業務に関するシステムを一元化して運用・管理できるクラウドサービス「ServiceNow」。
株式会社ＫＹＯＳＯでは、これまでの豊富な運用経験をもとに、ServiceNowの企画立案から運用・保守、内製化までトータルでサポートしています。

はじめに

ServiceNowのワークスペース開発で、ボタンをクリックしたときに独自の処理を走らせたいと思ったことはありませんか？
従来の感覚では「アクションバーの UI アクション」を思い浮かべる方が多いかもしれません。

レコード保存やサーバー連携といった標準的な処理はアクションバーで十分対応できます。
しかし、ワークスペース画面内の要素を動的にコントロールしたい、あるいはサーバー側の処理を柔軟に呼び出したい場合には、UI ビルダーとデータブローカーを組み合わせる方法も一つのやり方です。

本ブログでは、UI ビルダーでのボタン設置からフロント制御、データブローカーによるサーバー呼び出しまでの実装の流れを、Tipsとして紹介します。

前提条件：ServiceNowの環境

  • 作成　・・・　PDI
  • バージョン　・・・　Australia
  • 操作　・・・　System Administrator (admin)

今回取り上げる実装の概要

ユーザーが重要な処理を実行する際に、ひと呼吸置いて内容を確認できる仕組みを用意することで、誤操作の防止や作業品質の向上につながります。今回のユースケースでは、次のような流れで安全に完了処理を進められるようにします。

  • ボタンをクリックすると確認用のモーダルが開く
  • チェックリストを確認し完了処理を実行する

シンプルながら実務でよく求められるパターンで、ユーザー体験と運用の確実性を両立できる実装です。

実装は次の3ステップで進めます。

  1. UIビルダーでボタン、モーダル（コンポーネント）を配置する
  2. モーダルの開閉やチェック状態に応じたボタン制御を行う（フロント制御）
  3. データブローカーを使って、完了処理をサーバー側で実行する（バックエンド制御）

STEP1　UIビルダーでボタン、モーダル（コンポーネント）を配置する

今回のユースケースでは ServiceNow の標準レコードページ上に、処理実行用のボタンと確認用モーダルを配置する ところから始めます。
※本ブログではスターターエクスペリエンスで構築したワークスペースを使用しました。
　スターターエクスペリエンスは「Workspace とは？使えば分かる、その魅力！」の記事で紹介しています。

・ボタンの配置

ボタンをアクションバーの右側に追加します。
追加するには、［Action bar］を右クリックして［後に追加］をクリックします。

コンポーネントからボタンを選択します。
コンテンツ追加画面の検索窓に「ボタン」と入力すると見つけやすくなります。

ボタンが追加されたら、コンポーネントID、ラベル、ツールヒントラベル、余白を設定します。

このボタンをきっかけに処理を動かしていきます。

・モーダルの配置

モーダルを追加するには、［オーバレイ］配下の［モーダル］右横の［＋］をクリックします。

カスタムを選択すると、ヘッダーと本文がセットされたモーダルが追加されます。

ボタン追加時と同様にコンポーネントを配置して、確認用のモーダルを構成します。
今回のユースケースでは3つのコンポーネントを追加しました。
・見出し
・チェックリスト
・ボタン

次のSTEPでイベントアクションやデータブローカーを紐付けていきます。

STEP2　モーダルの開閉やチェック状態に応じたボタン制御を行う（フロント制御）

まず、［完了手続き］ボタンをクリックした際に確認用モーダルが開くように設定します。
続いて、モーダル内の［完了にする］ボタンは、チェックリストがすべて完了していない場合は押せないようにし、条件を満たしたときのみ有効化します。

・モーダルを開くアクションの設定

［完了手続き］ボタンのイベントタブを開きます。
［アイテムがクリックされました］の［ハンドラーを追加］をクリックします。
［モーダルダイアログを開くまたは閉じる］を選択し、 開閉するモーダルをドロップダウンリストから選択します。
［モーダルダイアログを開く］チェックボックスがオンの場合はモーダルが開くアクションになり、
オフの場合はモーダルを閉じるアクションになります。

・ボタンの有効化、無効化の制御

クライアントステータスパラメータを使って、［完了にする］ボタンの有効・無効を制御します。
具体的には、チェックリストのクリックイベントで現在のチェック状況をクライアントステータスパラメータに反映させます。
そしてそのクライアントステータスパラメータを、ボタンの無効化条件として参照します。

チェックリストのクリックイベントの設定

チェックリストのイベントタブを開きます。
［アイテムがクリックされました］の［ハンドラーを追加］をクリックします。
［クライアントステータスパラメータを設定］をクリックします。
［新しいクライアント状況パラメータを作成する］を選択します。
クライアントステータスパラメータの名前、タイプを入力します。

構成を［フォーム］から［スクリプト］に変更し、スクリプト編集エディターを表示します。
チェックリストのオン／オフに応じてクライアントステータスパラメータの値を変化させるスクリプトを記載します。

今回のスクリプトはあくまで分かりやすさを優先した簡易的な例です。
クライアントステータスパラメータを整数として扱い、
チェックリストのオン／オフに応じて値を加算することで状態を管理しています。
（例：1つ目＝100、2つ目＝10、3つ目＝1 → 全てオンで111）

［完了にする］ボタンの有効・無効の設定

クライアントステータスパラメータの値が「111」のときだけボタンが有効になるように設定します。
有効・無効の設定をするには、［完了にする］ボタンの構成タブを開きます。
［無効］のバインドアイコンをクリックし、バインドを編集する画面で式を入力します。

STEP3　データブローカーを使って、完了処理をサーバー側で実行する（バックエンド制御）

次に［完了にする］ボタンをクリックしたときの設定を行います。
サーバー側の処理を実行したい場合にはデータブローカーを使う方法があります。
例えば、データを更新、データを取得、サブフローを実行などです。
従来ではGlideAjaxを使ってスクリプトインクルードを呼び出していましたが、ワークスペースではこのデータブローカーがその役割を担います。

・データブローカーの呼び出し

UIビルダーのデータブローカーは引数（プロパティ）が変わると、システムがそれを検知して自動で実行してくれるという仕組みを持っています。
そのため、注意点としては初回の画面読み込み時に1回実行されてしまうという挙動があります。

そこで、実務で使える工夫として、データブローカーの引数に実行フラグを用意しておきます。
通常時は実行フラグをFalseにし、サーバー側で処理を終了させるようにします。
［完了にする］ボタンクリック時は実行フラグをtrueに書き換えます。
これにより、安全にサーバーサイドの処理を動かすことができるようになります。

引数のためのクライアントステータスパラメータの追加

クライアントステータスパラメータにデータブローカーの引数（プロパティ）となる、実行フラグと更新対象レコードのsys_idを追加します。

クライアントステータスパラメータを追加するには、［データおよびスクリプト］の［＋］から［クライアントステータス］を選択します。

名前・タイプ・初期値を設定します。初期値は固定値を直接入力することができます。
また、ページプロパティからバインドすることも可能です。
今回の例では、レコードの sys_idをページプロパティからバインドしています。

データブローカーの追加

データリソースにデータブローカーを追加するには、［データおよびスクリプト］の［＋］から［データリソース］を選択します。
データリソース選択画面から［作成］>［変換］を選択します。
※ ServiceNow公式ドキュメントでは、データブローカーは「データリソース」の一種（Transformタイプ）として分類されています。詳細は公式ドキュメントをご参照ください。

データブローカーサーバースクリプトの入力画面が、ブラウザの別タブで開きます。
名前・説明・プロパティ・スクリプトを設定していきます。
スクリプトは、サーバー側で実行されるため、GlideRecord を使ったレコード更新や、try-catch を使った例外処理など、通常のサーバースクリプトと同じように実装できます。

データブローカーを保存して UI ビルダーに戻ります。
すると、データリソースの選択肢の中に、作成したデータブローカーが追加されています。
作成したデータブローカーを選択して画面に追加します。

・引数と戻り値の設定

次に、データブローカーに渡す引数と、戻り値に応じた処理を UI ビルダーで設定します。

データブローカーへ値を渡すための設定

引数（プロパティ）に対してクライアントステータスパラメータを紐づけします。
（例：sys_id をプロパティとして渡し、データブローカー側で利用できるようにします）

データブローカーからの戻り値の活用

データブローカー実行後に行いたい処理を追加します。
今回は、実行フラグをFalseに戻すアクション、SUCCESS のときにメッセージを表示するアクションを追加します。
STEP2のアクション追加時と同様にイベントへのアクションを追加していきます。

設定内容は以下のとおりです。

これで、モーダルの［完了にする］ボタンからデータブローカーを呼び出し、
サーバー側の更新処理が完了したタイミングで UI を適切に制御できるようになります。

・ACLで実行を許可する

データブローカーを実行するにあたり、1つ注意点があります。
実行するためには、対象データブローカーに対して実行（execute）できる ACL が必要です。
タイプ：ux_data_broker、操作：execute、名前：データブローカーのsys_idを設定します。

・ボタンクリック時のアクション

最後に、［完了にする］ボタンのクリックイベントに対して、
実行フラグとなるクライアントステータスパラメータをオンにする処理を追加します。
このフラグがオンになることで、先ほど設定したデータブローカーが実行されます。

さらに、モーダルダイアログを閉じるアクションも追加します。

いずれも UI ビルダー標準のアクションで構成できます。

  • クライアントステータスパラメータを設定アクション
  • モーダルダイアログを開くまたは閉じる

動作確認　ワークスペースで実際の動きを見てみよう！

それでは、設定した 内容が正しく動作するか、実際のワークスペース画面で確認してみます。
まず、ワークスペースで画面右上に配置した ［完了手続き］ボタン をクリックします。

表示されたモーダルでチェック内容を確認し、各項目にチェックを入れていきます。

すべての項目が オン になると、［完了にする］ボタンが有効化されます。
［完了にする］ボタンをクリックします。

データブローカーが実行され、対象レコードの 状況が「完了してクローズ」 に更新されます。

さいごに

今回はワークスペース独自のカスタマイズ例として、ボタン、クライアントスクリプト、データブローカーを組み合わせた実装パターンをご紹介しました。

ワークスペースの開発は、従来の UI16 とは考え方が異なる部分も多く、最初は戸惑うことがあるかもしれません。
しかし、今回の例のように、
　画面側の制御 → イベント／アクション（スクリプト）
　サーバー側とのデータ連携 → データブローカー
という役割分担を意識して組み立てていくと、柔軟なカスタマイズができるようになります。

また、UI ビルダーには標準で便利なアクションが多数用意されており、 「モーダルを開閉するだけ」「クライアントステータスパラメータに値をセットするだけ」 といった処理であれば、スクリプトを書かずにノーコードで実現できます。
まずはノーコードで試してみて、実務ならではの一工夫が必要になったタイミングでスクリプトを組み合わせるのがおすすめです。
UI アクションだけでは要件を満たせない場面での選択肢のひとつとして、 ぜひ UI ビルダーでの実装も活用してみてください。

最後まで閲覧いただき、ありがとうございました。
あなたにとって有益な情報を提供できたのであれば、大変嬉しく思います。

参考

投稿者プロフィール

S H
S H
主にシステム開発の仕事に携わってきました。
[HTML/CSS/JavaScript/C#/VB.NET など]
2023年より開発業務と並行してServiceNowの学習を始めました。
CIS資格取得にも取り組んでおり、さまざまなServiceNowの研修を通して知識やスキルを磨いています。

保有資格
- ServiceNow Certified System Administrator
- ServiceNow Certified Application Developer
- ServiceNow Certified Implementation Specialist - Customer Service
Management
- ServiceNow Certified Implementation Specialist - IT Service Management
- ServiceNow Certified Implementation Specialist - Discovery
- ServiceNow Certified Implementation Specialist - Data Foundations

カテゴリー

タグ一覧

目次

カテゴリー

タグ一覧

※ServiceNow®は、米国および/またはその他の国における ServiceNow, Inc.の商標または登録商標です

TOP