リスト ウィジェット

リスト ウィジェットはカスタム リスト ビューにデータ レコードを表示します。 詳細を表示するボタンを含めるオプションを備えた関連する情報の簡単な説明のコンテナーとして、カード デザインを使用します。 カード レイアウトを作成するために、複数のテンプレートから選択できます。 テンプレートには、画像、ボタン、およびテキスト ウィジェットが含まれます。 空白のテンプレートを選択して独自のレイアウトをデザインすることもできます。 リストのデータ ソースは、フィーチャ レイヤーによって定義されます。 リスト内の各アイテム カードはレコードを表し、カード上のウィジェットはレコードの属性を表示するために使用されます。 リストをデザインするには、スタイル設定をカスタマイズし、最初のカードのレイアウトを変更して、リスト内のすべてのカードを更新します。

例

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

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

使用上の注意

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

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

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

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

検索方法

リスト ウィジェットの検索ツールでは、検索候補と検索結果の取得に、異なる方法を使用します。

ウィジェットの検索ツールでは、フルテキスト検索を使用して検索候補を取得します。 フルテキスト検索は、レコードを小さい単位 (個々の単語など) に分割するフルテキスト フィールド インデックスを使用する効果的な検索方法です。 たとえば、米国の郵便局の位置を表すレイヤーに、すべての郵便局名を含む名前フィールドがあるとします。 このインデックスは、「Highland Station Baltimore Post Office」という名称を、検索可能な 5 つの単語 (Highland、Station、Baltimore、Post、Office) に分割します。 「Baltimore Office」、「Highland Baltimore」、「Stat Balt Office」など、これらの単語の任意の組み合わせ (または単語の冒頭部分のみの組み合わせ) で構成される検索語句を入力すると、検索候補にその郵便局が表示されます。

ホスト フィーチャ レイヤーの所有者か組織管理者である場合、フルテキスト フィールド インデックスをリスト ウィジェットかテーブル ウィジェットの検索フィールドとして選択すると、ホスト フィーチャ レイヤー向けに自動的に生成されます。また、レイヤーのアイテムの詳細ページの属性フィールドにインデックスを手動で追加することもできます。 インデックスがないレイヤーがあり、レイヤーを編集する権限がない場合は、リスト ウィジェットは START WITH abc% を使用して候補を検索します。つまり、ウィジェットは検索語句で開始するレコードを検索します。 これは効率性の低い検索方法です。

検索結果を取得するには、ウィジェットでは CONTAIN %abc% を使用します。つまり、検索語句はレコード内のどこに含まれていてもかまいません。 たとえば、「alt」を検索すると、Baltimore、Salt Lake City、Alton が検索結果に表示されます。

注意:

フルテキスト検索は 2023 年 10 月リリースの Experience Builder で追加された最新の変更点です。 このリリース以前のウィジェットでは、CONTAIN %abc% を使用して候補と結果の両方を取得していました。 CONTAIN %abc% クエリとは異なり、フルテキスト検索では、単語の中に含まれる検索語句は見つけられません。 上記の例では、「altimor」や「ighlan」を検索しても、想定される郵便局が検索候補に返されません。 マップとアプリのフィーチャを検索する方法の詳細。

設定

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

• [テンプレートの選択] - あらかじめ定義されたリスト デザインを選択するか、空のリスト テンプレートから始めます (テンプレートを選択した場合、表示設定は後からカスタマイズできます)。
• [データ] - リストに含めるデータを指定します。
  • [データの選択] - ウィジェットで表示する属性を持つフィーチャ レイヤーのデータ ソースを選択します。 1 つのフィーチャ レイヤーに対して 1 つのデータ ビューのみ選択できます。 データ ビューの設定では、データをフィルタリングしてウィジェットに表示される情報を制限したり、データを並べ替えて特定の順序でリスト アイテムを表示したり、レコードの制限を指定したりすることができます。
  • [データなしメッセージ] - ユーザーがフィルターを適用した場合など、ウィジェットにデータが含まれない場合に表示するメッセージを指定します。
  • [最終更新の表示] - 必要に応じて、データ ソースの [自動更新] が有効になっている場合に、アプリでデータが更新されたタイミングを示す最終更新ラベルを除外します。
• [配置] - リストでのアイテムの表示方法を指定します。
  • [レイアウト] - 行、列、グリッドのリストにアイテムを表示します。
  • [アイテムの幅] または [アイテムの高さ] - リスト アイテムのサイズを指定します。
    • 行リストの場合、この設定に正確なピクセル数を入力するか、キャンバス上のサイズ変更バーをドラッグして、リスト アイテムの幅を指定します。 アイテムの高さは、ウィジェットの高さによって決まります。
    • 列リストの場合、この設定に正確なピクセル数を入力するか、キャンバス上のサイズ変更バーをドラッグして、リスト アイテムの高さを指定します。 アイテムの幅は、ウィジェットの幅によって決まります。
    • グリッド リストの場合、各設定に正確なピクセル数を入力するか、キャンバス上のサイズ変更バーをドラッグして、リスト アイテムの幅と高さを指定します。 また、リスト アイテムの幅をウィジェットの幅のパーセンテージで定義することもできます。

    注意:

    リストで、中画面または小画面デバイスに対してカスタム レイアウトを使用している場合、リスト アイテムのサイズをカスタマイズできます。 この設定のアイコンは、構成が適用される画面サイズ (大、中、小) を示します。

  • [幅/高さの比をロック] - ウィジェットのサイズが変更されるときにリスト アイテムの幅/高さの比をロックします。
  • [配置] (グリッド リストで使用可能) - リスト アイテムを右、中央、左に配置します。
  • [水平間隔] または [垂直間隔] - リスト アイテムの間隔を指定します (ピクセル単位)。 グリッド リストでは両方を定義します。
  • [ページング スタイル] - 最初のページに適合しないリスト アイテムを読み込む方法を指定します。
    • [スクロール] - リストでユーザーが下にスクロールしたとき、他のアイテムを読み込みます。
      • [スクロール バー] - スクロール バーを表示します。
      • [ナビゲーター] - リストをスクロールするための上下または左右のナビゲーション コントロールを含めます。 [ステップ] に、ナビゲーター コントロールでクリックするたびにスクロールするアイテムまたは行の数を指定します。
    • [複数ページ] - ページネーションを使用して、長いリストを複数のページに分割します。 [1 ページのアイテム数] に、1 ページに表示するアイテムの数を指定します。
• [状態] - リスト アイテムの次の 3 つの状態を伝える視覚的な表現を提供します。[デフォルト] (ユーザーの操作がないアイテムのデフォルトの状態)、[ホバー] (ユーザーがリスト アイテムをポイントしている状態)、および [選択] (ユーザーがリスト アイテムを選択した状態)。

  ヒント:

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

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

  注意:

  [選択セットの表示] ツールと [選択セットの解除] ツールは、[選択] 状態が有効になっている場合にのみ表示されます。

操作オプション

このウィジェットは、ウィジェットの設定の [アクション] タブで構成されるアクションをサポートしています。

メッセージ アクションを構成して、ウィジェット間の自動的な対話機能を作成できます。 たとえば、ユーザーがリスト ウィジェットでフィーチャを選択したときに、マップ ウィジェットでそのフィーチャに自動的にズームするには、[レコード選択の変更] トリガーを追加し、マップ ウィジェットをターゲットとして設定して、[ズーム] アクションを追加します。

データ アクションをオンにすると、データ処理タスク (エクスポート、ズーム、フィルターの設定など) を実行するためのボタンがリスト ウィジェットのユーザー インターフェイスに追加されます。 ユーザーは、リスト内のすべてのデータや、選択したフィーチャに対してデータ アクションを実行できます。

注意:

ユーザーが [エクスポート] データ アクションでデータをエクスポートする場合、リスト ウィジェットでアクティブに使用されているフィールドのみがエクスポートに含められます。 これには、ダイナミック テキストや動的画像などに使用されているフィールドが含まれます。