Forguncy 10 オンラインヘルプ
アプリの開発 / 画面の設計 / セル / セル型 / メニュー/ツリービュー / ツリービュー型セル
このトピックで
    ツリービュー型セル
    このトピックで

    セル型に「ツリービュー」が使用できるようになり、データをツリー構造で階層化して表示できます。

    ツリービューの使い方

    1. 任意のセルの領域にツリービュー型セルを割り当てます。

      ツリービューを表示する領域を選択して、[ホーム]→[セル型]のドロップダウンリストから[ツリービュー]を選択します。

    2. ツリービュー型セルの詳細を設定します。

      右ペイン下部の[セル型]タブをクリックしてツリービュー型セルの設定を行います。

      クリックイベント

      クリックイベントの機能を使用することで、値、名前、およびノードレベルのそれぞれを利用してコマンドを作成することができます。

      コマンド設定ダイアログボックスで、選択したコマンドが「ポップアップウインドウの表示」の場合、「詳細設定を表示」を行い、受け渡す値の後にをクリックし、ポップアップダイアログボックスで、変数一覧から変数を選択し、ダブルクリックして挿入します。

      値、名前、およびノードレベルはシステムによって自動的に生成され、これら3つのパラメーターを後続のコマンドで直接使用できます。

      テーブルからデータを取得

      チェックされている場合、データベースからツリーノードのデータを取得します。取得するデータは、「ツリーノードのデータ連結設定…」から指定します。

      チェックしていない場合、「ツリーノード…」をクリックすることで、独自のツリーノードを作成できます。

      ツリーノードのデータ連結設定…

      次の画面が表示され、ここでデータベースの連結設定を行います。

      「データ連結モード」で、ツリービューに表示するデータを以下の2つから選択します。

      • 「固定階層」を選択すると、固定した任意の階層を作成し、その階層ごとにテーブルのフィールドと関連付けることができます。またその階層ごとにクエリー条件や並び替えの設定ができます。詳細は、本ページ下記の「固定階層」を参照してください。

      • 「動的階層」を選択すると、指定したテーブルの1つのフィールドを自動的に階層判断して、階層表示します。詳細は本ページ下記の「動的階層」を参照してください。

      ツリーノード…

      次の画面が表示され、ここで独自のツリーノードを作成します。ツリービュー型セルをダブルクリックすることでも同じ画面が表示されます。

      • 上記画面の左側のリスト

        ツリーの階層を表します。追加したい場合は「+」、削除したい場合は「−」をクリックします。階層を移動する場合は、をクリックします。階層上で右クリックして表示される次のメニューでも同様のことが行なえます。

      • 名前

        ノードの名前を入力します。

      • ノードに表示する値を入力します。

      既定の展開状態

      ツリーに対して既定の展開状態を[すべて展開]、[指定したレベルまで展開]、または[すべて折りたたんだ状態]に設定します。

      展開して表示したい時は「すべて展開」を選択してください。

      折りたたんで表示したいは「すべて折りたたんだ状態」を選択してください。

      特定のレベルまで展開して表示したいときは「指定したレベルまで展開」を選択してください。最初のレベルは「1」です。指定した値は「1」より小さい場合、すべて折りたたんだ状態で表示されます。指定した値は最大レベルより大きい場合、すべて展開した状態で表示されます。

      リーフノード/展開/折りたたみアイコン

      ノードをリーフノード/展開/折りたたみアイコンを設定します。ローカルファイルまたは組み込み画像を設定できます。

      • ローカルファイルを選択する場合、.jpg/.jpeg/.png/.gif/.ico/.bmp/.svg形式の画像を選択できます。

      svg形式の画像を選択して、svg画像の右上にあるをクリックすると、画像の色を設定できます。

      • 組み込み画像を選択する場合、画像の色を設定できます。既定値は、「セルのフォントの色を使用」がついています。すなわち、画像の色はボタンの文字色と同じです。

      チェックを外すと、別の色を選択できます。

      ツリービューの参照値

      ツリービュー型セルを参照することで、ツリービューのどの項目が選択されているかを取得できます。

      セルの参照時に取得できる値は以下の通りです。

      テーブルから値を取得しない場合

      ツリーノードダイアログの「値」に設定した値が「_」(アンダースコア)でつながった値を取得します。 たとえば、「ノード1」の子ノードの「ノード11」を選択している場合、セルの値は「ノード1_ノード11」になります。

      テーブルから値を取得する場合(固定階層)

      各階層の「レコード位置を表すフィールド」に指定したフィールド値が「_」でつながった値を取得します。

      テーブルから値を取得する場合(動的階層)

      「レコード位置を表すフィールド」に指定したフィールド値を取得します。

    ツリービューのセルスタイル

    ツリービューにセルスタイルの設定をサポートしています。スタイルを設定したいツリービューを指定した後、[ホーム]リボンタブー[セルスタイル]をクリックし、セルスタイルリストから設定するスタイルを選択して適用します。詳しくはセルスタイルをご参照ください。

    固定階層

    [ツリーノードのデータ連結設定…]画面の「データ連結モード」で「固定階層」を選択した時、次の画面が表示されます。固定した任意の階層を作成し、その階層ごとにテーブルのフィールドと関連付けることができます。またその階層ごとにクエリー条件や並び替えの設定ができます。画面左のエリアにある「+」や「−」で階層の追加や削除が行えます。左のエリアで選択している階層に関連付ける情報を、右のエリアで指定します。

    ※クエリー条件は階層ごとに指定できますが、親の階層で指定したクエリー結果が0件の場合、子の階層は表示されません。

    固定階層の使用例1

    次の画面のようなツリーノードを作成する例をもとにして、設定値を説明します。

    実行結果:

    1. テーブル:都道府県テーブルを作成します。

    2. テーブル:市区町村テーブルを作成します。

      「都道府県ID」は、都道府県テーブルの「ID」と関連性があるものとします。なお、関連するフィールドの型は必ず同じにしてください。ここでは整数型にします。「都道府県ID」の値は、階層としてぶら下がりたい「親のレコードID」の値が記載されている必要があります。図では都道府県テーブルの「東京都」にぶら下がりたい場合、そのIDが「2」のため、「都道府県ID」の値は「2」になります。

    3. ツリーノードのルートノードのデータ連結設定をします。

      ツリーのルートとなる「階層名」を「ツリー階層1」という名称で定義します。

      ルートに表示するデータをどのテーブルから表示させるかを「テーブル」で指定します。

      テーブルのどのフィールドを表示するかを「表示フィールド」で指定します。

      「レコード位置を示すフィールド」は、固定階層のルートの場合のみ、ルート上に表示するデータの基準値を指定します。つまりこの例でいえば「ID」フィールドを指定しているため、IDの値が違えば表示フィールドで指定した「都道府県」フィールドがすべて表示されます。もし都道府県テーブルの4レコード目に「東京都」が再度あった場合でも、IDの値が違うため「東京都」は2つ表示されます。「ID」フィールドではなく「都道府県」フィールドを指定すると「東京都」は1つ表示されます。しかしこの場合、子が正しく表示されないため階層化する場合は一意になる値を設定してください。

    4. ツリーノードの子ノードのデータ連結設定をします。

      ツリーの子ノードを「ツリー階層2」という階層名で定義します。

      子ノードは親のルートのどのフィールドに関連づけられているかを「親レコードの位置を保持するフィールド」で指定します。そのレコードが、階層としてぶら下がりたい親のレコード位置が書かれたフィールドを指定します。

    5. 実行して実行結果を確認します。以下の実行結果が表示されます。

    固定階層の使用例2

    選択したツリーノードに関連する情報を一緒に表示する設定例を示します。

    実行結果:

    次の画像では、ツリーノードで「港区」をクリックすると、「港区」に存在する店舗のみを「店舗テーブル」に表示しています。さらに、選択した港区の階層を示す数値を、ツリーノードの上部(背景色が青の部分)に表示しています。

    固定階層の使用例1の設定に続けて以下を設定します。

    1. テーブル:店舗テーブルを作成します。

      店舗テーブルを作成します。

    2. 市区町村テーブルに数式フィールドを追加します。

      これは階層のレベルを数値化(ここでは“1_2”というようにアンダーバーで表現)して、ツリーノードの上部(背景色が青の部分)に表示するためのフィールドです。

      これによって、以下のように市区町村テーブルに「階層の数式」フィールドが追加されたことを確認できます。

    3. 店舗テーブルと市区町村テーブルの関連付けを設定します。

      「店舗テーブル」の市町村IDと「市区町村テーブル」のIDを関連付けます。

    4. 市区町村テーブルと都道府県テーブルの関連付けを設定します。

      「市区町村テーブル」の都道府県IDと「都道府県テーブル」のIDを関連付けます。

    5. 各テーブルの値を表示するリストビューをページに作成し、それぞれフィールドを連結表示させます。

    6. ノードがクリックされた時のコマンドを指定します。

      ツリービュー型セルのコマンドを表示して、「セルプロパティの設定」で、現在選択されているノードの階層をB2セルに表示させるように指定します。

      • 対象セル:=B2

      • プロパティの種類:値

      • 設定値:=B3

    7. ノードがクリックされた時のコマンドを指定します。

      続けて、「クエリー」で現在選択されているノードに一致するデータだけを、店舗テーブルのリストビューに表示させるように指定します。

      • 対象テーブル:店舗テーブル

      • フィールド:[市区町村ID]-[都道府県ID]

      • 条件:=(等しい)

      • 値:=B3

      Or

      • フィールド:[市区町村ID]-[階層の数式]

      • 条件:=(等しい)

      • 値:=B3

    8. 実行して実行結果を確認します。

      ノードを選択すると、選択したノードの位置が青背景に表示され、店舗テーブルに対象の店舗が絞り込んで表示されます。

      動的階層

      [ツリーノードのデータ連結設定…]画面の「データ連結モード」で「動的階層」を選択した時、次の画面が表示されます。

      動的階層は、テーブルの1つのフィールドを自動的に階層判断して、階層を表示します。

      テーブル

      対象となるテーブルを指定します。

      レコード位置を示すフィールド

      レコードを識別できる一意のデータのフィールドを指定します。

      表示フィールド

      階層化して実際に表示したいデータが格納されているフィールドを指定します。

      親レコードの位置を保持するフィールド

      階層化を判断するために必要となる情報が格納されているフィールドを指定します。この判断が必要となる情報とは、そのレコードが、階層としてぶら下がりたい親のレコード位置情報(上記の「表示フィールド」で指定したフィールドに書かれた値)です。詳しくは以下の「動的階層の使用例」を参照してください。

      クエリー条件を設定した後、クエリー結果の表示モードを次のように設定できます:クエリー結果の子ノードも表示、クエリー結果の親ノードも表示、クエリー結果の親子ノードも表示、クエリー結果のノードのみ表示。

    動的階層の使用例

    「レコード位置を示すフィールド」と「親レコードの位置を保持するフィールド」の関係性を、例をあげて下記に説明します。

    1. テーブルを準備します。

      動的階層の時は、階層を判断するためのキーとなるフィールドがテーブルに必要になります。

      以下の例ではA列とF列に該当します。

    2. 動的階層を選択し、詳細情報を設定していきます。

      以下のように設定します。

    3. 「並び替え」をクリックして設定します。次のように設定します。優先の高いものから指定することで並び替えができます。

    4. 実行して実行結果を確認します。

      この段階で実行すると、次のように表示されます。条件で絞り込みたい場合は、次に進んでください。

    5. 「クエリー」をクリックして設定します。

      「クエリ条件」でデータベースから該当レコードを抽出する条件を指定することができます。

      たとえば、以下のように指定すると都道府県フィールドに「みやぎけん」が含まれているレコードのみ階層表示されます。

    6. 実行して実行結果を確認します。

      宮城県だけが表示されます。

    参考:メニュー/ツリービュー型セルは、リストビュー内で使用することはできません。