Experience Builder を使用して作成したアプリに機能ウィジェットとレイアウト ウィジェットを追加します。 デフォルトのスタイルを適用できます。または表示設定をカスタマイズして、特別な Web エクスペリエンスのためのデータ、リンク、および他のウィジェットにウィジェットを接続することができます。
ウィジェットの挿入
ウィジェットはアプリの構成要素です。 ページ、ウィンドウ、スクリーン グループ、およびブロックで使用できるさまざまテンプレートでウィジェットを使用しない場合、ドラッグアンドドロップによる配置を使用して、[ウィジェットの挿入] パネルからウィジェットを追加できます。 ウィジェット コントローラー、プレースホルダー ウィジェット、およびスクリーン グループのスクロール パネルにも [ウィジェットの追加] ボタンがあります。 ウィジェットはアプリ ツールとして、またはページを整理するためのコンテナーとして機能し、6 つのカテゴリに分けられます。
- マップ中心ウィジェットは、マップ ウィジェットに接続するアプリ ツールです。
- データ中心ウィジェットは、データ ソースと対話するアプリ ツールです。
- ページ エレメント ウィジェットは、画像、テキスト、その他のメディアを追加します。
- メニュー ウィジェットとツールバー ウィジェットは、ユーザーがアプリを使用し、共有する際に役立つオプションを提供します。
- レイアウト ウィジェットは、ページ上のウィジェットの整理に役立つコンテナーです。
- セクション ウィジェットは、複数のビューに動的コンテンツを表示し、ビューの切り替えを可能にします。
ウィジェットを追加およびネストするとき、各ページの対話型アウトラインを参照します。これは、ページのウィジェットの階層を表示し、ネストされたウィジェットを整理、選択、構成するのに役立ちます。 アウトライン内にあるウィジェットにポインターを合わせると、対応するウィジェットがキャンバス上でハイライト表示されます。 アウトラインで、ウィジェットをクリックして [その他] ボタンをクリックすると、名前の変更、複製、削除、位置とサイズのロック、ピン留め、配置、整列などのウィジェット操作のメニューが表示されます。 他のウィジェットが含まれているウィジェットの場合、[すべて展開] をクリックして下位の階層を表示したり、[すべて折りたたみ] をクリックして非表示にしたりします。
標準のコピーおよび貼り付けキーボード ショートカット (Windows では Ctrl + C キーおよび Ctrl + V キー、Mac では Cmd + C キーおよび Cmd + V キー) を使用して、ページ間でウィジェットをコピーします。 ウィジェットを複製またはコピーすると、ページとラベル上での位置以外のすべての設定が保持されます。 新しいウィジェット ラベルには、連番ルールが適用されます。 たとえば、画像 1 を複製すると画像 2 が生成されます。画像 2 がすでに存在する場合は画像 3 が生成されます。 ウィジェットをキャンバス上でドラッグして移動およびサイズ変更すると、スナップ ラインまたは距離値が表示されます。これらは、固定レイアウトでウィジェットを整列し、正確に配置する際に役立ちます。 スナップ ラインが表示されると、対応するウィジェットがすべての画面解像度でスナップします。
[ウィジェットの挿入] パネルの [保留中] タブは、複数の画面サイズのアプリをデザインする必要がある場合に役立ちます。 たとえば、マップ ウィジェットを大および中サイズの画面に実装するが、小サイズの画面には実装しないというデザイン要件があるとします。 この場合、小サイズの画面デザインからマップ ウィジェットを削除して、保留中リストに追加することができます。
ウィジェットの接続
ウィジェットの構成パネルには、[コンテンツ]、[スタイル]、および [アクション] の設定が含まれます。 コンテンツは、ウィジェットの動作、データ接続、および他の設定を定義します。 ウィジェットは、サイズ、位置、アニメーション、背景、枠線、およびボックスの影などの設定がある [スタイル] タブで配置されスタイル設定されます。 ウィジェット パネルの位置は、ライブ アプリに記憶されます。また、ウィジェット ツールバーを使用して、ウィジェットを配置、削除、または複製することもできます。
一部のウィジェットでは、ウィジェット間の通信を許可するアクションの追加をサポートしています。 1 つのウィジェットのアクションにより、別のウィジェットのアクションがトリガーされます。たとえば、マップ フィーチャをクリックして、フィーチャ情報ウィジェットに表示されるフィーチャを更新するなどです。 自動的な対話操作用のメッセージ アクションか、エンド ユーザーが実行時にアクセスするデータ アクションを、[アクション] メニューから追加できます。 ツールとウィジェットを組み合わせたり、追加の対話操作用に接続したりすることができます。 ページ、ウィンドウ、セクション ビューなどのその他のコンテンツにリンクを設定すると、ユーザーがアプリを参照するのに役立ちます。
リンクの設定
ユーザーをアプリ内の別のページ、ウィンドウ、セクション ビュー、印刷プレビュー、または別の Web アドレスに導くことができる [リンクの設定] オプションを使用して、コンテンツにハイパーリンクを追加できます。 スクロール ページで、ウィジェットにリンクを設定して、ページ上の特定のブロックにまでスクロールするか、ページの最上部に戻ることができます。 次のウィジェットがリンクの設定をサポートしています。
設定
リンクを設定するとき、以下のオプションを選択できます。
- [ページ] - アプリ内の別のページに誘導するリンク
- [ビュー] - セクション ウィジェット内の特定のビューに誘導するリンク
- [ウィンドウ] - アプリ内の特定のウィンドウを開くリンク
- [URL]* - Web アドレスに誘導するリンク (https:// で始まる URL を入力します)。
- [ブロック] - アプリ内の同じスクロール ページ上にある特定のブロックまでスクロールするリンク (テキスト ウィジェットでは利用できません)。
- [ページの先頭] - ページの上部までスクロールするリンク (テキスト ウィジェットでは利用できません)。
- [印刷プレビュー] - 印刷プレビューに誘導するリンク。
- Cookie バナー - Cookie バナーに誘導するリンク。
*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 デバイスで使用する場合では書式に若干の違いがあります。 | Android— sms:<電話番号>[?アクション] iOS— sms://<電話番号>[&アクション] | 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 |
リンクされたコンテンツを開く場所も指定できます。
- [アプリ ウィンドウ] - リンクされたコンテンツは、アプリが使用している現在のブラウザー ウィンドウに開きます。
- [トップ ウィンドウ] - リンクされたコンテンツは、ネストされているフレームの外部に分割され、他の開かれているウィンドウの上部に開かれます。
- [新しいウィンドウ] - リンクされたコンテンツは、新しいブラウザー ウィンドウに開かれ、アプリは別のウィンドウに開かれたままになります。