例

このウィジェットを使用して、次のようなアプリの設計要件をサポートします。

• エンド ユーザーがリストでレコードを選択して、マップ上でそのレコードを表示できるアプリを作成します。
• データ ソースからのレコードをカスタム リスト ビューで表示します。表示するレコードは一定の条件を満たす必要があります。
• リストのフィルター処理、あらかじめ定義されたオプションでのリストの並べ替え、リストでのレコードの選択などの操作をするためのリストをエンド ユーザーに提供します。

使用上の注意

リスト ウィジェットを追加するときは、まずリストでアイテム カードのテンプレート デザインを選択して、[開始] をクリックします。キャンバス上で、リスト ウィジェットの最初のアイテムが有効化されます。そこでウィジェットのレイアウトを変更するか、最初のカードの [挿入] パネルからウィジェットをドラッグして追加することができます。現時点で、リスト ウィジェットは、テキスト、ボタン、および画像ウィジェットだけをサポートしています。

リスト ウィジェットにはデータ ソースが必要です。マップが表示されているまたは表示されていないページでリスト ウィジェットを使用することができます。同じレイヤーを使用するマップ ウィジェットを含める場合は、リスト内のフィーチャをクリックして、マップ内の対応するフィーチャをハイライト表示します。リスト内のアイテム カードのコンテンツをデザインする場合、最初のアイテムのウィジェットを構成して表示するアイテムを指定し、それぞれの動的コンテンツを選択して接続されたデータ ソースからレコードを入力します (デフォルトでは、リストに追加するウィジェットはリストのデータを継承します)。また、リスト ウィジェットのアクションを設定して、マップ ウィジェットでマップ上のフィーチャをズームしたり、フィーチャ情報ウィジェットで選択したフィーチャの属性を表示したりするなど、アプリ内の他のウィジェットも操作できます。

複数の状態 ([標準]、[ホバー]、および [選択]) でリスト ウィジェットを構成した場合、ネストされたウィジェットを選択すると、[リンク元] ボタン が表示されます。このボタンは、ウィジェットの設定が分離されているか、状態全体で同期しているかを示します。

• 同期されたウィジェットの場合、状態全体でウィジェットのコンテンツとスタイル設定 (背景、枠線、および影) は同じになり、サイズと位置は別々になります。
• 分離されたウィジェットの場合、別の状態にある他のウィジェットに影響することなくプロパティを構成できます。
• 別の状態で同じウィジェットを使用する、またはウィジェットのサイズと位置も同期するには、ウィジェットを選択して、それをターゲット状態に適用します。
• 最初にウィジェットを分離していない場合は、同期されているウィジェットを削除すると、別の状態にある同じウィジェットも削除されます。

設定

リスト ウィジェットには以下の設定が含まれます。

• [テンプレートの選択] - あらかじめ定義されたリスト デザインを選択するか、空のリスト テンプレートから始めます (テンプレートを選択した場合、表示設定は後からカスタマイズできます)。
• [データ] - リストに含めるデータを指定します。
  • [データの選択] - ウィジェットで表示する属性を持つフィーチャ レイヤーのデータ ソースを選択します。
  • [フィルターと並べ替え] - ウィジェットでの表示を制限するためにソース データをフィルター処理します。リスト アイテムを表示するデータを特定の順序で並べ替えます。適用されるフィルターと並べ替えは、同じデータを使用する他のウィジェットには影響しません。
  • [最大アイテム数] - ウィジェットで表示するフィーチャの数を制限します。
• [配置] - リストでのアイテムの表示方法を指定します。
  • [方向] - 水平リストまたは垂直リストでアイテムを表示します。
  • [アイテムの幅] または [アイテムの高さ] - リスト アイテムのサイズを指定します (ピクセル単位)。
    • 水平リストの場合、この設定に正確なピクセル数を入力するか、キャンバス上のサイズ変更バーをドラッグして、リスト アイテムの幅を指定します。アイテムの高さは、ウィジェットの高さによって決まります。
    • 垂直リストの場合、この設定に正確なピクセル数を入力するか、キャンバス上のサイズ変更バーをドラッグして、リスト アイテムの高さを指定します。アイテムの幅は、ウィジェットの幅によって決まります。
  • [幅/高さの比をロック] - ウィジェットのサイズが変更されるときにリスト アイテムの幅/高さの比をロックします。
  • [水平間隔] または [垂直間隔] - リスト アイテムの間隔を指定します (ピクセル単位)。
  • [ページング スタイル] - 最初のページに適合しないリスト アイテムを読み込む方法を指定します。
    • [スクロール] - リストでユーザーが下にスクロールしたとき、他のアイテムを読み込みます。
      • [スクロール バー] - スクロールバーを表示します。
      • [ナビゲーター] - リストをスクロールするための上下のナビゲーション コントロールを含めます。[ステップ] に、ナビゲーター コントロールでクリックするたびにスクロールするアイテムの数を指定します。
    • [複数ページ] - ページネーションを使用して、長いリストを複数のページに分割します。[1 ページのアイテム数] に、1 ページに表示するアイテムの数を指定します。
• [状態] - リスト アイテムの次の 3 つの状態を伝える視覚的な表現を提供します。[標準] (ユーザーの操作がないアイテムのデフォルトの状態)、[ホバー] (ユーザーがリスト アイテムをポイントしている状態)、および [選択] (ユーザーがリスト アイテムを選択した状態)。

  ヒント:

  ネストされたウィジェットの対応する状態を変更した場合、すべての状態に適用されないように変更を分離できます。リスト ウィジェットを選択して、変更する状態のボタン、ネストされたウィジェット、表示された [リンク] ボタン の順にクリックし、[分離] を選択してネストされたウィジェットの設定を構成します (最初に設定を構成して、[分離] をクリックすると、変更は他の状態に適用されてしまいます)。

  • [背景] - 標準状態 (現在ユーザーの操作がない) のリスト アイテムの背景を設定します。塗りつぶし色または画像を選択します。画像を選択した場合、 [フィット]、 [塗りつぶし]、 [中央揃え]、 [タイル]、または [ストレッチ] を使用して、リスト アイテムの枠線内にその画像を配置します。[フィット] を選択すると、画像の周りに背景の塗りつぶし色が表示されます。
  • [枠線] - 線の色、スタイル (破線または点線)、および幅 (ピクセル単位) を選択して標準状態のリスト アイテムに枠線を設定します。
  • [枠線の半径] - 半径サイズ (ピクセルまたはパーセント) を変更して、標準状態のリスト アイテムの角を作成します。設定をロックして、4 つの角すべての半径を同期します。
  • [ホバー] - エンド ユーザーがリスト アイテムにポインターを合わせたとき、そのリスト アイテムの外観を変えるかどうかを指定します。ホバー状態が有効化されている場合、その設定は、ポインターを合わせたリスト アイテムの背景、枠線、および枠線の半径を変えるオプションがある構成パネルに表示されます。
    • [ホバー] タブは、キャンバス内の最初のアイテム リストの横に表示されます。ユーザーがアイテムにポインターを合わせたときに更新され、そのアイテムがどのように表示されるかを示します。ウィジェットを追加したり、ホバー状態の既存のウィジェットだけを削除、サイズ変更、および再配置したりすることもできます。
  • [選択] - リスト内のアイテム カードが選択可能かどうか、およびエンド ユーザーがクリックして選択したときに外観がどう変わるかを指定します。選択状態が有効化されている場合、その設定は、複数選択を許可するオプションおよびポインターを合わせたリスト アイテムの背景、枠線、および枠線の半径を変えるオプションがある構成パネルに表示されます。[選択モード] では、選択を一度に 1 アイテムのみに制限する (別のアイテムをクリックすると現在の選択が解除される) ことも、エンド ユーザーが同時に複数のアイテムを選択できる (別のアイテムをクリックすると現在の選択セットに追加される) ようにすることもできます。
    • [選択] タブは、キャンバス内の最初のアイテム リストの横に表示されます。ユーザーがアイテムを選択したときに更新され、そのアイテムがどのように表示されるかを示します。ウィジェットを追加したり、選択状態の既存のウィジェットだけを削除、サイズ変更、および再配置したりすることもできます。
• [ツール] - リストを操作するためのツールをエンド ユーザーに提供します。
  • [検索] - リストに検索ボックスを表示します。
    • [検索フィールドの選択] - 検索するフィールドを 1 つ以上の選択します。
    • [完全一致] - 検索結果を検索語句に一致するレコードのみに限定します。
  • [並べ替え] - 特定のフィールドと順序でリストを並べ替えるためのメニューをエンド ユーザーに提供します。各メニュー オプションにカスタム名を入力します。
  • [フィルター] - リストを操作するためのフィルターをエンド ユーザーに提供します。
  • [選択セットを表示] - リストを更新して選択されたアイテムのみを表示するオプションをエンド ユーザーに提供します。