Forguncy サポート

メニュー/ツリービュー型セル

フォローする

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

※本ページは、Forguncy 3用の説明です。メニュー/ツリービュー型セルは、Forguncy 4ではプリインストールプラグインになりました。詳細については、以下のオンラインヘルプを参照してください。

ダウンロード

Forguncy 3用 FGC3_MenuTreeview_1_0_0_3.zip (80 KB)
Forguncy 4用 MenuTreeview_1_0_2_3.zip (150 KB)

 

インストール

ダウンロードしたプラグインを「プラグインを追加する」を参照してインストールすると、以下が「プラグインの管理」に表示されます。インストール後にForguncyの再起動が必要なことに注意してください。

FGC3_MenuTreeview1.png

 使い方(ツリービュー)メニューの使い方はこちら

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

    FGC3_Treeview1.png
  2. ツリービュー型セルの詳細を設定します。
    右ペイン下部の[セル型]タブをクリックして、ツリービュー型セルの設定を行います。
    FGC3_Treeview2.png

コマンド…

既定値を変更したい時にコマンドを設定します。画面に表示されているツリービューの項目が選択されると、設定したコマンドが実行されます。詳細は、セル型のコマンドを参照してください。また、ツリービュー型セルを参照することで、ツリービューのどの項目が選択されているかを取得できます。

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

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

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

次の画面が表示され、ここでデータベースの連結設定を行います。
FGC3_Treeview3.png
「データ連結モード」で、ツリービューに表示するデータを以下の2つから選択します。

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

ツリーノード…

次の画面が表示され、ここで独自のツリーノードを作成します。
FGC3_Treeview4.png

  • 上記画面の左側のリスト
    ツリーの階層を表します。追加したい場合は「+」、削除したい場合は「−」をクリックします。階層を移動する場合は、FGC3_Treeview5.pngをクリックします。階層上で右クリックして表示される次のメニューでも同様のことが行なえます。
    FGC3_Treeview6.png
  • 名前
    ノードの名前を入力します。

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

規定の展開状態

ページを表示した時に、ツリーノードを展開して表示するか折りたたんで表示するかを指定します。
展開して表示したい時は「すべて展開」を選択してください。
折りたたんで表示したいは「すべて折りたたんだ状態」を選択してください。

ツリースタイル

次の画面が表示され、ツリーノードを選択した時のスタイルを指定します。
FGC3_Treeview7.png

  • 選択時背景色
    ツリーノードを選択した時の背景色を指定します。
  • 選択時文字色
    ツリーノーを選択した時の文字色を指定します。

セルの値

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

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

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

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

セルの値は各階層の「レコード位置を表すフィールド」に指定したフィールドの値が「_」で区切られて設定されます。
テーブルから値を取得する場合(動的階層) セルの値は「レコード位置を表すフィールド」に指定したフィールドの値になります。

 [ツリーノードのデータ連結設定…]の「データ連結モード」について

固定階層

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

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

実行結果:
FGC3_Treeview9.png

テーブル:都道府県テーブルを作成しておきます。
FGC3_Treeview10.png

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

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

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

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

実行結果:
次の画像では、ツリーノードで「港区」をクリックすると、「港区」に存在する店舗のみを「店舗テーブル」に表示しています。さらに、選択した港区の階層を示す数値を、ツリーノードの上部(背景色が青の部分)に表示しています。
ここで使用したサンプルはこちらからダウンロードできます。
FGC3_Treeview14.png

上記の設定方法:
例1の設定に続けて以下を設定します。

  1. 店舗テーブルを作成します。
    FGC3_Treeview15.png
  2. 市区町村テーブルに数式フィールドを追加します。これは階層のレベルを数値化(ここでは“1_2”というようにアンダーバーで表現)して表示するためのフィールドです。
    FGC3_Treeview16.png
    FGC3_Treeview17.png
  3. ここまでで、市区町村テーブルに「階層の数式」フィールドが追加されたことを確認できます。
    FGC3_Treeview18.png
  4. テーブルの関連付けを設定します。
    店舗テーブルの市町村IDと市区町村テーブルのIDを関連付けます。
    FGC3_Treeview19.png
    同様に市区町村テーブルの都道府県IDと都道府県テーブルのIDを関連付けます。
    FGC3_Treeview20.png
  5. 各テーブルの値を表示するリンクテーブルをページに作成し、それぞれフィールドを連結表示させます。FGC3_Treeview21.png
  6. B3セルを選択し、ノードが選択された時に実行されるコマンドを次のように指定します。
    「セルプロパティの設定」で現在選択されているノードの階層をB2セルに表示させるように指定します。
    FGC3_Treeview22.png
    「クエリー」で現在選択されているノードにマッチするデータだけを、店舗テーブルのリンクテーブルに表示させるように指定します。
      FGC3_Treeview23.png
  7. 実行すると、実行結果の画面が表示されます。

動的階層

「データ連結モード」が動的階層の時、次の画面が表示されます。動的階層は、テーブルの1つのフィールドを自動的に階層判断して、階層を表示します。 

FGC3_Treeview24.png

テーブル 対象となるテーブルを指定します。
レコード位置を示すフィールド レコードを識別できる一意のデータのフィールドを指定します。
表示フィールド 階層化して実際に表示したいデータが格納されているフィールドを指定します。
親レコードの位置を保持するフィールド

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

設定例として「階層表示用ID」フィールドと「ID」フィールドの関係性を下記に示します。

テーブル
FGC3_Treeview25.png

実行結果
FGC3_Treeview26.png

この実行結果は「並び替え」で以下の設定をしています。優先の高いものから指定することで並び替えができます。
FGC3_Treeview27.png

「クエリ条件」でデータベースから該当レコードを抽出する条件を指定することができます。
例えば、以下のように指定すると都道府県フィールドに「みやぎけん」が含まれているレコードのみ階層表示されます。
FGC3_Treeview28.png

実行結果:
宮城県だけが表示されます。
ここで使用したサンプルはこちらからダウンロードできます。
FGC3_Treeview29.png

 

 使い方(メニュー)ツリービューの使い方はこちら

  1. 任意のセルの領域にメニュー型セルを割り当てます。
    メニューを表示する領域を選択して、[ホーム]→[セル型]のドロップダウンリストから[メニュー]を選択します。
    FGC3_Menu1.png
  2. メニュー型セルの詳細を設定します。
    右ペイン下部の[セル型]タブをクリックして、メニュー型セルの設定を行います。
    FGC3_Menu2.png

メニュー項目...

メニュー項目を作成します。
FGC3_Menu3.png

  • 上記画面の左側のリスト
    メニューを表します。
    メニュー項目を追加したい場合は「+」、削除したい場合は「−」をクリックします。
    メニュー項目を移動する場合は、FGC3_Menu4.pngをクリックします。また、ドラッグでメニューの上下関係を変更できます。これらは、右クリックして表示される次のメニューでも同様のことが行なえ、また兄弟メニューやサブメニューを追加することができます。
    FGC3_Menu5.png
  • コマンド…
    メニュー項目をクリックした時に実行されるコマンドを設定します。詳細は、セル型のコマンドを参照してください。
  • 名前
    左のリスト内でフォーカスされているメニュー項目の値を入力できます。また、左のリスト内を右クリックして表示される上記メニューの「名前の変更」からも同様のことが行なえます。
  • アイコン
    メニューに表示する任意のアイコンを選択します。
  • 権限設定
     メニュー項目ごとに、異なるロールに対して異なる権限を設定できます。デフォルトは「匿名ユーザー」で、誰でもメニュー項目を利用できます。「匿名ユーザー」のチェックを外して「ログインユーザー」を指定すると、ログインしたユーザー全員がメニュー項目を利用できます。「匿名ユーザー」と「ログインユーザー」のチェックを外して任意のロールを指定すると、そのロールに所属していて、かつログインしたユーザーのみメニュー項目を利用できます。
    親メニューにアクセスできない場合、そこに属するすべてのサブメニューにもアクセスすることはできません。

レイアウト

メニューを水平レイアウトか垂直レイアウトのどちらにするかを設定します。

規定の展開状態

ページを表示した時に、メニューを展開して表示するか折りたたんで表示するかを指定します。
展開して表示したい時は「すべて展開」を選択してください。
折りたたんで表示したいは「すべて折りたたんだ状態」を選択してください。

カラーテーマ

メニューのテーマカラー。

メニュースタイル...

色とフォントを含むメニューのスタイルを設定します。
FGC3_Menu6.png

  • メニュー階層:選択したメニュー階層のスタイルを設定します。
  • 背景色:メニュー項目の背景色。
  • 文字色:メニュー項目の文字色。
  • 選択時背景色:メニュー項目の選択時の背景色。
  • 選択時文字色:メニュー項目の選択時の文字色。
  • ホバー時背景色:マウスが上に置かれた時のメニュー項目の背景色。
  • ホバー時文字色:マウスが上に置かれた時のメニュー項目の文字色。
  • フォント:メニュー項目のフォント名。
  • 太字:チェック時に太字。
  • フォントサイズ:メニュー項目のフォントサイズ(pt単位)
  • 高さ:高さ(pt単位)
  • アイコンサイズ:アイコンの幅と高さ(pt単位)

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

使用できるForguncyのバージョン

1.0.0.3(Forguncy 3用) 3.0.105.0、3.0.109.0、3.0.112.0
1.0.2.3(Forguncy 4用) 4.0.104.0

 

 

他にご質問がございましたら、リクエストを送信してください

コメント