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

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

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

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

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

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

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

UI ビルダーの列レイアウト

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

詳細については、「列レイアウト」を参照してください。

UI ビルダーのコンポーネントの構成

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

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

[設定] タブ

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

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

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

[スタイル] タブ

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

[イベント] タブ

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

ページにコンポーネントを追加して構成すると、ステージに作業内容が表示されます。変更を加えても更新がステージにロードされない場合は、[メニューを開く] アイコンを選択し、[開発者] > [ステージをリロード (Reload Stage)]を選択します。ステージをリロードすると変更内容が表示されますが、保存はされません。作業内容を保存するには、右上の [保存] を選択します。

UI ビルダーでのコンポーネントプリセット

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

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

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

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

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

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

コンポーネント ID

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

コンポーネント可視化

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

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

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

コンポーネントの複製

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

• プリセットを使用してコンポーネントを自動的に構成する
  コンポーネントプリセットを使用して、互換性のあるページでコンポーネントを自動的に構成します。
• コンポーネントのカスタムプリセットの作成
  プリセットを作成して時間を節約し、コンポーネント構成をさまざまなエクスペリエンスで再利用できるようにします。
• コンポーネントのデフォルトの外観を変更する
  コンポーネントとラッパーのスタイルを設定して、デフォルトの外観を変更します。
• フォーカス管理によるアクセシビリティの向上
  特定の要素に重点を置き、ユーザーがスクリーンリーダーを使用して効果的に操作できるようにします。
• コンポーネントの複製
  ページで再利用する構成済みコンポーネントを複製します。
• 条件付きレンダラーでコンテンツを動的に表示する
  条件付きレンダラーコンポーネントを使用して、指定された条件に基づいてコンテンツまたはコンポーネントを表示します。
• 例でコンポーネントについて学ぶ
  コンポーネントが UI ビルダー ページで必要な機能を作成する方法については、次の手順に従ってください。
• ページコレクション
  ページコレクションは、複数のエクスペリエンスで使用できるページのグループです。
• UI ビルダー でのデータ表示方法の変更
  ドロップダウンリストを使用してデータ表示方法をリアルタイムで変更し、エクスペリエンスでデータをプレビューします。
• UI ビルダーページにタブ付きコンテンツを追加
  タブコンポーネントを使用して、UI ビルダー のページにタブ付きコンテンツを追加します。
• コンテキストサイドバーを追加する
  UI ビルダー でページにコンテキストサイドバーを追加して、垂直タブ構造を使用して関連コンテンツを表示します。
• UI ビルダーページにフォームを追加する
  フォームコンポーネントを使用して、1 つ以上のフォームを UI ビルダー ページに追加します。
• UI ビルダー でのモーダルの作成
  UI ビルダー のモーダルをコンポーネントとともに使用して、ユーザーにアラートまたはアクションの呼び出しを提供します。UI ビルダー には時間と労力を節約するモーダルが付属しています。
• ビューポートコンポーネントによる UI エクスペリエンスの拡張
  ビューポートは、UI ビルダー の親ページを所有しなくてもエクスペリエンスを拡張できるようにする特殊なコンポーネントです。ビューポートは 3 とおりの方法で操作できます。ビューポートコンポーネントまたはビューポート対応タブをページに追加することも、ビューポートをコンテキストサイドバーコンポーネントに追加することもできます。
• UI ビルダー でのポップオーバーの作成
  UI ビルダーページでポップオーバーを使用して、コンテキスト情報または機能をオーバーレイして、ユーザーがタスクを完了できるようにします。
• UI ビルダー でのモードレスダイアログの作成
  UI ビルダーページでモードレスダイアログを使用して、ウィンドウコンテンツとその下のページコンテンツの両方を操作できるフローティングウィンドウを追加します。
• アラートを自動却下するように構成
  指定した時間が経過すると自動的にクリアされるようにアラートを設定します。