ウィジェットの追加と接続

Experience Builder を使用して作成したアプリに機能ウィジェットとレイアウト ウィジェットを追加します。 デフォルトのスタイルを適用できます。または表示設定をカスタマイズして、特別な Web エクスペリエンスのためのデータ、リンク、および他のウィジェットにウィジェットを接続することができます。

ウィジェットの挿入

ウィジェットはアプリの構成要素です。 ページウィンドウスクリーン グループ、およびブロックで使用できるさまざまテンプレートでウィジェットを使用しない場合、ドラッグアンドドロップによる配置を使用して、[ウィジェットの挿入] パネルからウィジェットを追加できます。 ウィジェット コントローラー、プレースホルダー ウィジェット、およびスクリーン グループのスクロール パネルにも [ウィジェットの追加] ボタンがあります。 ウィジェットは、基本カテゴリとレイアウト カテゴリに分類されています。 基本ウィジェットはアプリ ツールとして実行する機能ウィジェットで、レイアウト ウィジェットはページ上でウィジェットを整理するためのコンテナーです。

ウィジェットを追加およびネストするとき、各ページの対話型アウトライン ビューを利用します。これは、ページのウィジェットの階層を表示し、ネストされたウィジェットを整理、選択、構成するのに役立ちます。 アウトラインで、ウィジェットをクリックして [その他] ボタンをクリックすると、名前の変更、複製、削除、位置とサイズのロック、ピン留め、配置、整列などのウィジェット操作のメニューが表示されます。 標準のコピーおよび貼り付けキーボード ショートカット (Windows では Ctrl + C キーおよび Ctrl + V キー、Mac では Cmd-C キーおよび Cmd-V キー) を使用して、ページ間でウィジェットをコピーします。 ウィジェットを複製またはコピーすると、ページ上での位置以外のすべての設定が保持されます。

[ウィジェットの挿入] パネルの [保留中] タブは、複数の画面サイズのアプリをデザインする必要がある場合に役立ちます。 たとえば、マップ ウィジェットを大および中サイズの画面に実装するが、小サイズの画面には実装しないというデザイン要件があるとします。 この場合、小サイズの画面デザインからマップ ウィジェットを削除して、保留中リストに追加することができます。

ウィジェットの接続

ウィジェットの構成パネルには、[コンテンツ][スタイル]、および [アクション] の設定が含まれます。 [コンテンツ] は、ウィジェットの動作、データ接続、および他の設定を定義します。 ウィジェットは、サイズ、位置、アニメーション、背景、枠線、およびボックスの影などの設定がある [スタイル] タブで配置されスタイル設定されます。 ウィジェット パネルの位置は、ライブ アプリに記憶されます。また、ウィジェット ツールバーを使用して、ウィジェットを配置、削除、または複製することもできます。

一部のウィジェットでは、ウィジェット間の通信を許可するアクション トリガー (あるウィジェットでのアクションにより、別のウィジェットでのアクションを始動する) の追加をサポートしています。 たとえば、マップ フィーチャをクリックして、フィーチャ情報ウィジェットに表示されるフィーチャを更新します。 ツールとウィジェットを組み合わせたり、追加の対話操作用に接続したりすることができます。 ページ、ウィンドウ、およびセクション ビューにリンクを設定すると、エンド ユーザーがアプリを移動するのに役立ちます。

リンクの設定

エンド ユーザーをアプリ内の別のページウィンドウセクション ビュー、または別の Web アドレスに導くことができる [リンクの設定] オプションを使用して、コンテンツにハイパーリンクを追加できます。 次のウィジェットがリンクの設定をサポートしています。

設定

リンクを設定するとき、以下のオプションを選択できます。

  • [ページ] - アプリ内の別のページに誘導するリンク
  • [ビュー] - セクション ウィジェット内の特定のビューに誘導するリンク
  • [ウィンドウ] - アプリ内の特定のウィンドウを開くリンク
  • [Web アドレス] - Web アドレスに誘導するリンク (URL を指定)

リンクされたコンテンツを開く場所も指定できます。

  • [アプリ ウィンドウ] - リンクされたコンテンツは、アプリが使用している現在のブラウザー ウィンドウに開きます。
  • [トップ ウィンドウ] - リンクされたコンテンツは、ネストされているフレームの外部に分割され、他の開かれているウィンドウの上部に開かれます。
  • [新しいウィンドウ] - リンクされたコンテンツは、新しいブラウザー ウィンドウに開かれ、アプリは別のウィンドウに開かれたままになります。