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

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

ウィジェットの挿入

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

ウィジェットを追加およびネストするとき、各ページの対話型アウトラインを参照します。これは、ページのウィジェットの階層を表示し、ネストされたウィジェットを整理、選択、構成するのに役立ちます。 アウトライン内にあるウィジェットにポインターを合わせると、対応するウィジェットがキャンバス上でハイライト表示されます。 アウトラインで、ウィジェットをクリックして [その他] ボタンをクリックすると、名前の変更、複製、削除、位置とサイズのロック、ピン留め、配置、整列などのウィジェット操作のメニューが表示されます。 他のウィジェットが含まれているウィジェットの場合、[すべて展開] をクリックして下位の階層を表示したり、[すべて折りたたみ] をクリックして非表示にしたりします。

標準のコピーおよび貼り付けキーボード ショートカット (Windows では Ctrl + C キーおよび Ctrl + V キー、Mac では Cmd-C キーおよび Cmd-V キー) を使用して、ページ間でウィジェットをコピーします。 ウィジェットを複製またはコピーすると、ページとラベル上での位置以外のすべての設定が保持されます。 新しいウィジェット ラベルには、連番ルールが適用されます。 たとえば、画像 1 を複製すると画像 2 が生成されます。画像 2 がすでに存在する場合は画像 3 が生成されます。 ウィジェットをキャンバス上でドラッグして移動およびサイズ変更すると、スナップ ラインまたは距離値が表示されます。これらは、固定レイアウトでウィジェットを整列し、正確に配置する際に役立ちます。 スナップ ラインが表示されると、対応するウィジェットがすべての画面解像度でスナップします。

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

ウィジェットの接続

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

一部のウィジェットでは、ウィジェット間の通信を許可するアクションの追加をサポートしています。 1 つのウィジェットのアクションにより、別のウィジェットのアクションがトリガーされます。たとえば、マップ フィーチャをクリックして、フィーチャ情報ウィジェットに表示されるフィーチャを更新するなどです。 自動的な対話操作用のメッセージ アクションか、エンド ユーザーが実行時にアクセスするデータ アクションを、[アクション] メニューから追加できます。 ツールとウィジェットを組み合わせたり、追加の対話操作用に接続したりすることができます。 ページ、ウィンドウ、セクション ビューなどのその他のコンテンツにリンクを設定すると、ユーザーがアプリを参照するのに役立ちます。

リンクの設定

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

設定

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

  • [ページ] - アプリ内の別のページに誘導するリンク
  • [ビュー] - セクション ウィジェット内の特定のビューに誘導するリンク
  • [ウィンドウ] - アプリ内の特定のウィンドウを開くリンク
  • [URL]* - Web アドレスに誘導するリンク (https:// で始まる URL を入力します)。
  • 印刷プレビュー - 印刷プレビューに誘導するリンク。
  • [ブロック] - アプリ内の同じスクロール ページ上にある特定のブロックまでスクロールするリンク (テキスト ウィジェットでは利用できません)。
  • [ページの先頭] - ページの上部までスクロールするリンク (テキスト ウィジェットでは利用できません)。

*URL オプションを使用して、電子メール アドレスや電話番号などにリンクすることもできます (たとえば、「mailto:someone@example.com」と入力します)。 [リンクの設定] では現在、次の URI スキームがサポートされています。

スキーム目的使用上の注意形式
https

Web アドレス

https://xxx

https://www.esri.com

mailto

電子メール アドレス

ヘッダーはオプションですが、通常は subject= を含めます。 body= を使用してメッセージの本文を事前に入力します。

mailto:<アドレス>

mailto:<アドレス>[?<ヘッダー 1>=<値 1>[&<ヘッダー 2>=<値 2>]]

mailto:jsmith@example.com

mailto:jsmith@example.com?subject=A%20Test&body=My%20idea%20is%3A%20%0A

tel

電話番号

tel:<電話番号>

tel:+18883774575

sms

SMS テキスト メッセージ

sms スキームを Android デバイスで使用する場合と iOS デバイスで使用する場合では書式に若干の違いがあります。

Androidsms:<電話番号>[?アクション]

iOSsms://<電話番号>[&アクション]

sms:+11234567890?body=hello%20there

sms:+11234567890,+11234567891?body=hello%20there

sms://+11234567890&body=111222Hello%20There%20Hi!

FTP

FTP リソース

FTP リソースの一般的な構文を使用します。

ftp://xxx

ftp://user/example.com

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

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