スクリーン グループ(Screen groups)

出典:ArcGIS Experience Builder - Guide - Screen groups

スクリーン グループとは

ArcGIS Experience Builder のスクリーン グループは、複数のスクリーンを含むことができるレイアウト コンテナーです。スクロール ページのコンテンツやウィジェットを整理するために使用されます。スクリーン グループ内の各スクリーンにはメイン ステージがあり、スクリーン グループによってはスクロール パネルもあります。

ユーザーがスクリーン グループにスクロールすると、スクリーンの高さ全体を占めます。スクリーン グループにスクロール パネルがある場合、ユーザーがパネル内のコンテンツをスクロールする間、メイン ステージはその場に留まります。メイン ステージが変わるのは、最後のパネルがスクロールするときだけです。 パネルがない場合、メイン ステージはスクリーン一杯の高さまでスクロールするまでその場に留まります。

スクリーン グループでの操作方法

アプリケーションにスクリーン グループを追加して構成するには、以下の手順に従います。

  1. スクリーン グループを追加したいキャンバスに移動します。
  2. キャンバス上のスクリーン グループの挿入ボタンをクリックします。
  3. ギャラリーからスクリーン グループ テンプレートを選択します。
  4. スクリーン数やレイアウト オプションなどのプロパティを設定します。
  5. スクリーン グループ内のスクリーンの追加ボタンをクリックして、必要に応じて新しいスクリーンを追加します。

スクリーン グループの詳細については、add screen groupsを参照してください。

スクリーン グループ テンプレート

スクリーン グループで利用可能なテンプレートをいくつか紹介します。

テンプレート 説明
カスケード マルチスクリーン、フローティング パネル、メインステージのフェード、パネルのプッシュ スルー
インデックス ドッキングされたパネル、カスケードと同様のトランジション
フライヤー ブックマーク付きの地図用にデザインされたシングルスクリーンで、パネルのスクロールに合わせて地図が移動
ストリーム マルチスクリーン、フローティング パネル、パララックス効果、次の画面へのフェード

スクリーン グループ テンプレートの詳細については、Add Screen groups > templates を参照してください。

スクリーン グループの AppConfig

appConfig オブジェクトでは、一意の screenGroupId を持つオブジェクトを表す screenGroups プロパティの下にスクリーン グループが定義されます。screenGroups プロパティにはスクリーン グループ オブジェクトの配列が含まれ、各オブジェクトはアプリケーションに追加されたスクリーン グループを表します。各スクリーン グループ オブジェクトには、screenIdnamelayout など、スクリーンの構成詳細が含まれます。

appConfig でスクリーン グループを定義する例を以下に示します。

{
  "screenGroups": {
    "screenGroup1": {
      "screenGroupId": "screenGroup1",
      "screens": [
        {
          "screenId": "screen1",
          "name": "Screen 1",
          "layout": {
            "mainStage": {
              "type": "mainStage",
              "height": 600
            },
            "panels": [
              {
                "type": "scrollingPanel",
                "height": 300
              }
            ]
          }
        },
        {
          "screenId": "screen2",
          "name": "Screen 2",
          "layout": {
            "mainStage": {
              "type": "mainStage",
              "height": 600
            }
          }
        }
      ]
    }
  }
}