UI ビルダー ページとページのバリアントを管理

UI ビルダー のページについて説明します。列レイアウトやコンポーネントなどの UI ビルダー ページの構成ブロックを理解します。

UI ビルダー クイックスタート

UI ビルダー でページをワークスペースまたはカスタムポータルエクスペリエンスの一部として作成します。UI ビルダー の ページは、レイアウトとコンポーネントで構成されます。列レイアウトとコンポーネントを使用してページをビルドし、ユーザーにエクスペリエンスをガイドします。たとえば、従業員の出張要求を管理するページをビルドできます。ページには、送信および承認されたすべての出張要求のリストを含む列レイアウトとコンポーネントを含めることができます。ユーザーが出張要求を追加および送信できるようにするボタンを追加できます。ページはさまざまな方法でビルドできます。

注:

1 人の開発者が 一度に 1 つのバリアントで作業する必要があります。

UI ビルダーの列レイアウトとコンポーネント

列レイアウトとコンポーネントは UI ビルダー ページの構成要素です。列レイアウトとコンポーネントをページに追加して、ワークスペースまたはポータルエクスペリエンスをビルドまたはカスタマイズします。たとえば、列レイアウトを追加し、列内にユーザーが要求を送信できるボタンコンポーネントを配置します。

ステージまたはコンテンツツリーから、列レイアウト、列、およびコンポーネントを追加したり、それらの間を移動したりすることができます。

列レイアウトには、1 つ以上の列を含めることができます。列にはコンポーネントを含めることができます。列レイアウト、列、コンポーネントの表示スタイルを変更して、独自のエクスペリエンスを作成します。

表 : 1. ページレイアウト要素のタイプ

タイプ	説明
列レイアウト	1 ～ 6 列の柔軟性に優れたコンテナ。列レイアウトを追加して、ページの構造とフレームワークを提供します。
列	列にコンポーネントを入力します。
コンポーネント	ボタン、リスト、フォームなどのページの基本要素。
モーダル	モーダルを使用して、ページの上部にレンダリングされ、アクションを必要とする UI ビルダー のページタイプを作成します。
ポップオーバー	ポップオーバーは、イベントによってトリガーされたときに UI ビルダー ページの上に表示されるコンテナの一種です。ポップオーバーコンポーネントを使用して、ページに関連する追加情報またはアクションを表示します。

詳細については、「コンポーネントを使用した UI ビルダー ページのカスタマイズ」を参照してください。

UI ビルダーページの作成

UI ビルダー ページを作成して、ページエクスペリエンスを最初から、またはページテンプレートを使用してビルドします。一度に 1 つのページコンポーネントを構築します。事前定義されたページテンプレートのいずれかを使用する場合は、基本構造から開始し、ニーズに合わせてカスタマイズできます。

UI ビルダー ページに名前を付けます。パスを設定します (またはページ名に基づいて自動的に追加されるデフォルトのパスを維持します)。デフォルトのパスは、ページ名に基づいて追加されます。独自のパスを作成することもできますが、パスは一意である必要があります。[URL プレビュー] にはページのパスが表示されます。ページの URL タイプを設定します。URL タイプは、エクスペリエンスビューで重要なページを分類して見つけるのに役立ちます。

アプリケーションスコーピングは、アプリケーションファイルとデータへのアクセスを識別して制限することによってアプリケーションを保護します。アプリケーションスコープのデフォルトは、ユーザーが ServiceNow AI Platform® 内で現在存在しているスコープです。アプリケーションスコープの詳細については、「セキュリティとロールについて学習する」を参照してください。

UI ビルダー ページテンプレートを使用して、事前定義されたページテンプレートに基づいてページを作成し、そのページをニーズに合わせてカスタマイズします。ページテンプレートは参照またはコピーできます。詳細については、「テンプレートからのページの作成」を参照してください。

UI ビルダーページの作成：詳細設定

UI ビルダー ページに必須パラメーターを追加します。必須パラメーターは、sys_id、テーブル、クエリなどのページに必要なデータです。必須パラメーターは、必須パラメーターの値にバインドできるため、コンポーネントに役立ちます。たとえば、[URL] フィールドにテーブルパラメーターを追加し、そのテーブルにデータをバインドできます。テーブルが参照されると、テーブルデータがページ上のコンポーネントに公開されます。必須パラメーターは、ページに追加すると URL に表示されます。次の例では、table という必須パラメーターが追加されています。URL に追加されていることに注意してください。

UI ビルダー ページにオプションのパラメーターを追加します。オプションのパラメーターは、ページの URL に追加できるオプションのデータです。必須パラメーターとは異なり、オプションのパラメーターは常に名前と値のペアで、指定された順序に関係なく機能します。

UI ビルダー ページバリアントの対象者と条件を設定します。ページを作成すると、UI ビルダー によってページのバリアントもデフォルトで作成されます。ページバリアントとは、ユーザー基準を使用してさまざまな対象者のエクスペリエンスをターゲットにできる、同じパスのページのバリエーションのことです。たとえば、マネージャー用のページと、そのマネージャーの直属の部下用のページのバリアントなどです。バリアントの作成の詳細については、「ページバリアントの作成」を参照してください。

対象者の詳細については、「対象者について学習する」を参照してください。

UI ビルダーのテスト値

テスト目的でテストデータを UI ビルダー ページに取り込む方法として、ページにテスト値を追加します。たとえば、必須パラメーターとしてテーブルを追加する場合は、インシデントのテスト値を追加し、それにデータリソースをバインドして、そのテーブルのインシデントに関するテストデータを取り込むことができます。

テスト値を取得してデータを表示するには、データリソースを追加してから、レコードを URL のテスト値にバインドするようにデータリソースを構成します。たとえば、incident をテスト値として追加できます。次に、Look up a single record という名前のデータリソースを追加します。[テーブル] フィールドで、次の画像に示すように、インシデントテスト値を context.props.table テーブルに動的にバインドします。

既存の UI ビルダーページの表示

ロール設定に基づいて、エクスペリエンスの任意の UI ビルダー ページで作業できます。エクスペリエンスのエクスペリエンスビューで、作業するページの名前をクリックします。

ページエディターで、ヘッダーのドロップダウンを選択して、異なるページバリアント を開きます。

UI ビルダーページバリアントの作成

バリアントでは、ユーザー基準を使用して、さまざまな対象者をさまざまなコンテンツのターゲットにすることができます。たとえば、エージェント用のホームページと、同じ URL パスに存在するマネージャー向けのページのバリアントを作成できます。

UI ビルダー ページバリアントごとに対象者を設定します。ページバリアントを使用するユーザーは、対象者で決まります。たとえば、出張要求ページを作成する場合は、マネージャーが従業員の出張要求を管理できる、ページのバリアントを作成します。マネージャーロールを持つすべてのユーザーのために、マネージャーページの対象者を設定します。従業員はそのバリアントを表示できません。対象者の詳細については、「対象者について学習する」を参照してください。

詳細については、「ページバリアントの作成」を参照してください。

UI ビルダーのページ設定を編集

[その他のアクション] アイコン、UI ビルダーエクスペリエンスビューの [設定の表示] を選択して、UI ビルダーページの設定をいつでも変更できます。ページを作成した後で、ページの名前、パス、およびパラメーターを変更できます。

詳細については、「ページの編集」を参照してください。

UI ビルダーコンテンツツリー

ページ管理パネルのコンテンツツリーは重要です。これは、UI ビルダー ページ上のすべての列レイアウト、列、コンポーネントを表示するだけでなく、コンポーネントを簡単に見つけて操作できるようになります。コンテンツツリーは、ページ上に複数のコンポーネントがある場合に特に重要です。コンテンツツリーでコンポーネントを選択してページ上のコンポーネントをハイライト表示すると、ページを簡単にビルドできます。

図 : 1. コンポーネントがあるコンテンツツリー

コンテンツツリーでコンポーネントをクリックすると、ステージ上のコンポーネントがハイライト表示され、スタイリング、イベント、データなどを追加できます。 コンテンツツリーにアイテムをドラッグして、ページを再編成できます。

コンポーネントをページに追加するときは、コンポーネントラベルを追加することが重要です。コンポーネントラベルは、コンテンツツリー内の各コンポーネントにラベルと ID を適用するために使用されます。適切にラベルを付けると、コンテンツツリーのコンポーネントの識別がはるかに簡単になります。

UI ビルダーツールボックス

UI ビルダー ツールボックスを使用して、レイアウトとコンポーネントをページに追加します。UI ビルダー ツールボックスにアクセスするには、[+ コンテンツを追加] またはステージの [+] アイコンを選択します。

ツールボックスを検索して、UI ビルダー ページに追加するレイアウトとコンポーネントを見つけます。

情報アイコンを選択してツールヒントを表示し、レイアウトまたはコンポーネントの簡単な説明を表示します。コンポーネントがプリセットを使用できる場合、または複数のコンポーネントにバンドルされている場合は、[コンポーネント] タブに異なる色が表示されます。

UI ビルダー ステージ

ステージは、UI ビルダー エディターの最大の領域であり、ページのビルドに使用されます。列レイアウトとコンポーネントをここに追加するには、[+] ボタンをクリックするか、[コンポーネント] ペインからページにドラッグします。

ステージでは、本文、列レイアウト、および列の輪郭がマゼンタで表示されます。コンポーネントは青色で囲まれています。

ツリーアイテムアイコンを使用して、コンテンツの別のレイヤーに移動します。たとえば、列が選択されている場合は、親の列レイアウトまたは列内のコンポーネントに簡単に移動できます。

列レイアウトまたはコンポーネントの複製、削除などのオプションのメニューアイコンを選択します。

ステージで行われた変更は、右側の [スタイル] パネルに反映されます。[スタイル] パネルで変更を加えると、ステージ上の要素がすぐに更新されます。

UI ビルダーのステージのサイズを変更する

UI ビルダー エディターで [幅] ドロップダウンを選択して、ステージのサイズを調整します。

UI ビルダー で元に戻してやり直す

UI ビルダー ページに加えた変更を元に戻し、やり直します。ページレイアウト、コンポーネント、スタイル、またはレイアウトに対して行ったアクションを元に戻します。

元に戻す機能とやり直し機能は、ヘッダーツールバーにあります。[元に戻す] () または [やり直し] () ボタンを選択して、アクションを元に戻すことができます。[元に戻す] ドロップダウンをクリックして、複数のステップを戻ることもできます。データシェルフで行われた変更を元に戻したり、やり直したりすることはできません。

[元に戻す] ドロップダウンを選択すると、前の 20 のアクションを元に戻すことができます。

UI ビルダー構成パネル

構成パネルを使用して、配置、スタイリング、イベントハンドラーの設定などの、コンポーネントの操作を行います。

• [構成] タブを選択してコンポーネントを構成します。各コンポーネントには、コンポーネントの必要な部分を制御できるさまざまな構成オプションがあります。たとえば、ボタンコンポーネントはシンプルで、外観、ラベル、および一部のプロパティのみを構成できます。リストコンポーネントはより複雑で、多数の編集可能なリストパラメーターが含まれています。

  

• 構成パネルの [スタイル] タブを選択して、コンポーネントにスタイリングを追加します。標準ベースのカスケードスタイルシート (CSS) を使用して、コンポーネントの表示スタイルを変更できます。たとえば、背景色、境界線、またはその他の CSS スタイルを追加または変更します。

  

  詳細については、「コンポーネントのデフォルトの外観を変更する」を参照してください。
• [イベント] タブを選択して、イベントを構成し、コンポーネント、ページ、データリソース、および宣言アクションにアクションを追加します。コンポーネントを UI ビルダー ページに追加したときには、アクションを実行するようには構成されません。たとえば、ボタンコンポーネントは静的であり、レコードの削除など、イベントアクションをバインドするまでは何も実行されません。

  

  詳細については、「「Manage actions in UI Builder pages (UI ビルダーページでのアクションの管理)」」を参照してください。
• 列レイアウトは、コンポーネントがページ上でどのように配置されるかを制御します。列レイアウトを UI ビルダー ページに追加すると、レイアウトデザインを構成できます。レイアウトの列にコンポーネントを追加すると、より高度な方法で要素を構成できます。たとえば、コンテンツの両端揃え、アイテムの配置、さらに列レイアウト、列、およびコンポーネントの高さ、幅、マージン、背景、境界線、およびパディングの設定を行うことができます。CSS グリッドは最も強力なレイアウトシステムです。CSS グリッドは 2 次元グリッド上にビルドされているので、ページの作成方法を自由に選択できます。

  

  詳細については、「UI ビルダーページでコンポーネントを整理する」を参照してください。

UI ビルダー ページを開いてプレビューする

UI ビルダー ページをプレビューして、ページが Web ページとしてどのように表示されるかを確認します。

ボタンを選択し、モーダル、ビューポート、コンポーネント、データリソース、動的データなどの現在作業しているバリアントをテストします。ページバリアントをプレビューすると、エクスペリエンスのビルド中にその外観と機能を確認するのに役立ちます。

ページをプレビューするもう 1 つの方法は、サーバーから URL パスを要求することです。ユーザーがページを開いたときにバリアントが表示される場合は、この方法を使用してテストします。[プレビュー] の横にあるドロップダウン矢印を選択し、[URL パスを開く] を選択します。または [プレビュー] > [URL パスを開く] を選択します。

詳細については、「UI ビルダー エクスペリエンスを表示およびテストする方法を学ぶ」を参照してください。

UI ビルダーの開発者による編集

メニューから、プラットフォームの開発者として UI ビルダー ページを編集します。このオプションを使用すると、ページのプラットフォームレベルの詳細を変更し、UI ビルダー から出ることができます。開発者としての適切なロールが必要です。

• UI ビルダー でのページの作成
  ポータル、ワークスペース、またはカスタムアプリケーションのページを UI ビルダー で作成して、ユーザーの Web エクスペリエンスをビルドします。
• ページの編集
  ページを編集して、ページ名、パス、およびパラメーターを変更します。
• UI ビルダー ページの対象者を追加
  ページまたはページバリアントに 1 つ以上の対象者を追加します。
• ページ内の値をテスト
  テストデータをページに取り込む方法として、テスト値を URL に追加します。
• ページバリアントの作成
  UI ビルダー のページバリアントとは、ユーザー基準を使用してさまざまな対象者をターゲットにできる、同じパスにあるページのバリエーションのことです。
• レスポンシブオーサリング
  レスポンシブオーサリングを使用して、デスクトップ、タブレット、モバイルなどのさまざまなフォームファクター (サイズ) に合わせてスムーズに調整される UI ビルダー ページを作成します。
• UI ビルダー エクスペリエンスを表示およびテストする方法を学ぶ
  UI ビルダー でエクスペリエンスをプレビューし、エクスペリエンスのビルド時にどのように表示されるか、どのように機能するかを確認します。プレビューは、エクスペリエンスが期待どおりに機能すること、データリソースが利用可能なこと、レイアウトが正しく設定されていることを確認するのに役立ちます。