コンポーネントを使用した UI ビルダー ページのカスタマイズ

UI ビルダー のコンポーネントについて説明します。また、UI Builder 内でコンポーネントがどのように機能するかを確認します。

コンポーネントは、UI ビルダー ページの基本要素です。コンポーネントは、ボタンやラベルなどのコア要素から、リストやフォームなどのより複雑なエクスペリエンスコンポーネントまで多岐にわたります。

これらのコンポーネントを UI ビルダー ページに追加して、ワークスペースまたはポータルエクスペリエンスを構築またはカスタマイズできます。たとえば、アクティビティストリームコンポーネントをページに追加して、ユーザーが出張要求アクティビティを表示できるようにします。

コンポーネントは以下の方法で UI ビルダー ページに追加できます。

表 : 1. コンポーネントをページに追加する方法

ロケーション	例
UI ビルダー の [コンポーネント] リストから	コンポーネントアイコンを選択し、コンポーネントをリストからステージにドラッグします。
UI ビルダー のページから直接 (オプション 1)	[コンテンツの追加] (プラスアイコン) を選択し、[コンポーネント] タブを選択して、 コンポーネント を選択します。
UI ビルダー のページから直接 (オプション 2)	列レイアウトまたはコンポーネントで、[前に追加] (プラス) または [後に追加] (プラス) アイコンを選択し、コンポーネントを選択します。
UI ビルダー のコンテンツツリーから	コンテンツツリーで、[+ コンポーネントの追加] を選択して、コンポーネントを選択します。
UI ビルダー のページの上にあるフローティングメニューから	列レイアウトまたはコンポーネントで、[メニュー] アイコンを選択し、[ 前に追加 ] または [ 後に追加] を選択して、コンポーネントを選択します。

列レイアウト

最初に UI ビルダー ページに列レイアウトを追加します。次に、列レイアウトの列にコンポーネントを追加して、ページを構築およびカスタマイズします。列レイアウトは、リストや見出しなどのコンポーネントを追加する画面の定義された部分と考えてください。UI ビルダー ページには、必要な数の列レイアウトを使用できます。任意の列レイアウトで最大 6 つの列を使用できます。1 つの列に複数のコンポーネントを追加できます。コンテンツツリーでページの構造を表示します。

コンポーネントの構成

構成パネルでコンポーネントを構成する方法は 3 とおりあります。

• コンポーネントのプロパティを構成します。
• CSS スタイルの上書きを追加します。
• コンポーネントのイベントハンドラーを設定します。

[設定] タブ

コンポーネントのプロパティは、各コンポーネントによって異なります。ボタン、見出し、ラベルなどのシンプルな要素の場合と同様に、コンポーネントの構成は簡単です。リストやフォームなどのコンポーネントには、多くの構成が必要です。アイコンおよび画像コンポーネントの場合は、さまざまなオプションから選択するか、カスタムアイコンまたは画像を使用します。UI ビルダー のローコード JSON エディターを使用して、コンポーネントのプロパティを変更できます。コンポーネントの構成の詳細については、以下を参照してください。 Next Experience コンポーネント.

コンポーネント構成タブの各プロパティについて、次のオプションから選択できます。

• 静的：リストのデータを使用するか、独自のデータを入力します。データは外部データソースに接続されません。
• 動的データバインディング：コンポーネントプロパティをデータリソース、ページプロパティ、またはクライアントステータスにバインドする方法です。
• スクリプト：プロパティ値を入力する JavaScript コードを入力します。

[スタイル] タブ

個々のコンポーネントのカスケードスタイルシート (CSS) スタイルを変更できます。色の境界線、フォントサイズなどを変更します。

[イベント] タブ

ページレベルおよびバリアントレベルのイベントマッピングを構成します。ディスパッチされたイベントと処理済みイベントもバリアントに追加します。より複雑なエクスペリエンスコンポーネントは、データリソースによって提供される動的データに大きく依存します。動的データからコンポーネントへのバインディングは重要な機能です。ページ上のテーブル、レコード、またはその他の要素からデータを動的に公開します。データを公開することで、コンポーネントの再利用が可能になります。また、構成フィールドをポイントすると、各フィールドのアイコンデータまたはスクリプトオプションが表示されます。

コンポーネントのプリセット

プリセットを使用して、互換性のあるページでコンポーネントを自動的に構成します。UI ビルダー ページテンプレートには、プリセットがコンポーネント構成値を定義する際に使用するコントローラーが含まれています。詳細については、「プリセットを使用してコンポーネントを自動的に構成する」を参照してください。

コンポーネントプロパティのセクション

コンポーネントプロパティは、類似したプロパティのセクションにグループ化されています。セクションを開閉するには、プロパティの見出しの右側にある矢印を選択します。UI Builder 管理者は、UI ポリシーに基づいて表示または非表示にするコンポーネント構成プロパティを選択できます。

コンポーネント式エディター

構成パネルの UI ビルダー コンポーネント式エディターを使用して、式をバインドまたは変更します。テキスト、データバインディング、または式を入力できます。式は、3 つの入力タイプの任意の組み合わせで構成できます。コンポーネント式エディターは、論理、算術、比較、否定、および関数型の変換タイプをサポートしています。

コンポーネント式エディターに追加される各関数はオートコンプリートされます。コンポーネント式エディターには、関数の各入力にラベルが表示されるため、各関数に必要なパラメーターがわかります。コンポーネント式エディターでサポートされている関数の詳細については、「UI ビルダー コンポーネント式エディターでサポートされている関数」を参照してください。

コンポーネント ID

スクリプトを追加するか、コンポーネントを参照する方法としてコンポーネントにデータをバインドする場合は、コンポーネント ID を使用します。コンポーネントをページに追加すると、コンポーネントラベルに基づいたコンポーネント ID が自動的に作成されます。コンポーネント ID は、一意である限り、任意のものに変更できます。構成パネルでコンポーネントの名前を選択すると、コンポーネント ID が表示されます。

コンポーネント可視性

構成パネルで目のアイコンを選択して、コンポーネントの表示を設定します。コンポーネントの可視性は、コンポーネントを表示しているユーザーではなく、コンポーネント自体のプロパティに基づきます。条件に基づいてコンポーネントを表示または非表示にすることができます。たとえば、壊れたリンクがある場合にその画像を非表示にします。

動的なデータバインディングに基づいて、またはスクリプト化されたプロパティ値を編集して、可視性を設定できます。

[テスト値] を設定して、可視性が true、false、または none に設定されるとどうなるかをテストします。

コンポーネントの複製

名前と ID を除いて、UI ビルダー ページに構成されたコンポーネントの正確なコピーを作成します。複製されたコンポーネントは、すべてのプロパティ、バインディング、およびイベントをコピーします。詳細については、「コンポーネントの複製」を参照してください。

• プリセットを使用してコンポーネントを自動的に構成する
  コンポーネントプリセットを使用して、互換性のあるページでコンポーネントを自動的に構成します。
• コンポーネントのデフォルトの外観を変更する
  コンポーネントとラッパーのスタイルを設定して、デフォルトの外観を変更します。
• コンポーネントの複製
  ページで再利用する構成済みコンポーネントを複製します。
• UI ビルダー でのデータ表示方法の変更
  ドロップダウンリストを使用してデータ表示方法をリアルタイムで変更し、エクスペリエンスでデータをプレビューします。
• UI Builder ページにタブ付きコンテンツを追加
  タブコンポーネントを使用して、UI ビルダー のページにタブ付きコンテンツを追加します。
• UI ビルダー でのモーダルの作成
  UI ビルダー のモーダルをコンポーネントとともに使用して、ユーザーにアラートまたはアクションの呼び出しを提供します。UI ビルダー には時間と労力を節約するモーダルが付属しています。
• ビューポートコンポーネントによる UI エクスペリエンスの拡張
  ビューポートは、UI ビルダー の親ページを所有しなくてもエクスペリエンスを拡張できるようにする特殊なコンポーネントです。ビューポートは 3 とおりの方法で操作できます。ビューポートコンポーネントまたはビューポート対応タブをページに追加することも、ビューポートをコンテキストサイドバーコンポーネントに追加することもできます。
• UI ビルダー でのポップオーバーの作成
  UI Builder ページでポップオーバーを使用して、コンテキスト情報または機能をオーバーレイして、ユーザーがタスクを完了できるようにします。
• でのモードレスダイアログの作成 UI ビルダー
  UI Builder ページでモードレスダイアログを使用して、ウィンドウコンテンツと以下のページコンテンツの両方を操作できるフローティングウィンドウを追加します。