ServiceNow UI ビルダー

皆さん、明けましておめでとうございます!

✨
ここ数か月間、私がどこにいたのか疑問に思っている人もいると思います。 Cloud Architect 試験に合格した後、私はみんなが話題にしていたこのピカピカの新しい Web インターフェイス、UI Builder!

に飛び込むことにしました。

UIビルダーとは何ですか?

UI Builder は、ワークスペースやポータルのカスタム ページを作成および構成するための Web インターフェイスです。これは Now Experience UI Framework の一部であり、次のことが可能になります。
•ページを作成します。
•レイアウトとコンポーネントをセットアップします。
•アクションのイベントハンドラーを定義します。
•データ バインディングを使用してデータを取得して表示します。
•コンポーネント内で使用するクライアント スクリプトとクライアント状態パラメータ (変数とも呼ばれます) を作成します。

これは本質的に、カスタム Web エクスペリエンスを作成するための ワンストップ ショップです。 UI Builder の重要な部分と開始方法を詳しく見てみましょう。

UIビルダーの仕組み

1. 体験とページ

エクスペリエンスは、ユーザーが作業を管理したり、情報を検索したり、ヘルプを得たりできるページのコレクションです。各ページは URL によって定義され、その URL に含まれるコンテンツが定義されます。これは、レイアウトとコンポーネント
という 2 つの重要な要素で構成されています。 2.レイアウト
レイアウトは、ページ上でのコンテンツの表示方法を整理します。ページ作成の最初のステップであり、以下を使用できます:
•基本的な列レイアウト: 最大 6 つの列を含む事前定義された構造。
•高度なレイアウト: フレックスボックスまたは CSS グリッドベースのデザインで、さらにカスタマイズできます。
レイアウトには、構成やスタイルを設定するための簡略化されたコンテンツ ツリーやパネルなどのツールも付属しています。
3.コンポーネント
コンポーネントは、フォーム、ボタン、データ リスト、グラフ、画像、メニューなど、ページの構成要素です。レイアウトを設定したら、ページにコンポーネントを追加できます。 構成パネルを使用して各コンポーネントをカスタマイズできます。これには以下が含まれます:
•[設定] タブ: 静的な値、データ バインディング、または JavaScript を使用してプロパティを編集します。
•スタイル タブ: カスタム CSS を追加します。
•イベント タブ: ユーザー インタラクションによってトリガーされるアクションを設定します。

最初にレイアウトを追加し、次にコンポーネントを追加することをお勧めします。

ページのバリエーションと条件

UI ビルダーのすべてのページはバリアントです。最初に作成するページは デフォルト バリアント です。フォーム ビューのようなバリアントを考えてください。同じレコードですが、コンテキストに基づいて異なる方法で表示されます。さまざまな対象者や条件に合わせて追加のバリアントを作成できます。
条件によって、ページ バリアントがいつ表示されるかが決まります。これらは次を使用して設定できます:
•条件ビルダーを使用してルールを設定します。
•エンコードされたクエリによる条件の指定。
条件が機能するためには、ページ パラメーターによって渡されるデータに依存します。これについては、次の記事で詳しく説明します。

次は何ですか?

UI ビルダーでシンプルなエクスペリエンスを作成しましょう!
レコード ページを表示できるエクスペリエンスを作成します。

1.はじめに。

。ServiceNow インスタンスにログインします。
.Now Experience Framework > に移動します。フィルター ナビゲーターの UI ビルダー をクリックして、UI ビルダー インターフェイスを開きます。

2.体験の創造

。右上隅にある 作成 ボタンをクリックします。

ドロップダウンから エクスペリエンス を選択します。モーダルウィンドウが表示されます。
。次の詳細を入力します:
•名前: 任意の名前。例「デフォルトのワークスペース」
•App Shell UI: ワークスペース App Shell
•着陸パス: デフォルトのままにしておきます - ホーム
•ロール: 現時点ではデフォルトのロールを削除します。

作成をクリックし、エクスペリエンスを開くを選択して続行します。

3.ページの作成

。新しいエクスペリエンスで、新しいページの作成 またはページとバリアントの横にある アイコンをクリックします。

テンプレートを使用します
標準レコード テンプレートを選択します

テンプレートのページ名を入力します。 URL パスは自動入力されます。

続行、
をクリックします。 レコード テンプレートには、事前に設定された必須 (テーブル & sys_id) パラメータとオプション (クエリ、extraParams ビュー、selectedTab) パラメータが付属しています。それを確認してから、Looks Good.

を選択します。

4.バリアントの作成

。ページ バリアントに名前を付けて、今のところ対象ユーザーと条件をスキップします。 続行をクリックします。
バリアント エディター:
についてよく理解してください。 •左側のパネル: レイアウトとコンポーネントを追加するためのコンテンツ ツリー。
•右パネル: コンポーネントをカスタマイズするためのタブのある構成パネル。
•左下: データ リソース、クライアント状態パラメーター、クライアント スクリプトなどの動的データ用のツール。

それでおしまい！

次の記事では、ページ バリアントにページ パラメーターを追加して、ページ内で使用するデータ値を渡すことができるようにすることで、エクスペリエンスを拡張します。

この概要では、レイアウトやコンポーネントからページやバリアントまで、UI ビルダーの基本を紹介しました。今後の記事では、次のことを検討することで、動的でインタラクティブなページの作成についてさらに深く掘り下げていきます。
•ページパラメータ。
•データリソース。
•クライアント状態パラメータ。
•クライアントスクリプト
•イベント。
このシリーズを終えるまでに、UI Builder とリソース豊富でユーザーフレンドリーなエクスペリエンスを作成する方法をしっかりと理解できるようになります!!

---

UI ビルダーについて詳しく見る
•UI ビルダーに関する無料の Now Learning コースを受講してください
https://nowlearning.servicenow.com/lxp/en/now-platform/ui-builder-fundamentals-washington?id=learning_course_prev&course_id=7ba080d447fdd65076e07884f16d435e

•UI ビルダーに関する ServiceNow ドキュメント
https://www.servicenow.com/docs/bundle/xanadu-application-development/page/administer/ui-builder/concept/ui-builder-overview.html

以上がServiceNow UI ビルダーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。