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

    セル型に「メニュー」が使用できるようになり、データをメニュー形式のように表示できます。

    メニューの使い方

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

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

    2. メニュー型セルの「セル型」タブから、他の設定を行います。

      右ペイン下部の[セル型]タブをクリックします。

      クリックイベント

      メニュー項目のクリック時に実行されるコマンドを設定できます。コマンド内では、クリックされたメニュー項目の値、表示テキスト、親の値をコンテキスト変数として参照できます。

      例えば、コマンド設定ダイアログで「ポップアップウインドウの表示」コマンドを追加し、[詳細設定を表示...]→[受け渡す値]のをクリックすると、ポップアップダイアログの変数一覧から変数を確認することが出来ます。

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

      チェックすると、テーブルからメニュー項目のデータを取得します。取得するデータは、「メニュー項目のデータ連結設定...」から指定します。

      チェックを外すと、「メニュー項目...」から独自にメニュー項目を作成できます。

      メニュー項目のデータ連結設定...

      次のダイアログが表示され、ここでテーブルとのデータ連結設定を行います。

      • 対象テーブル:対象となるテーブルを指定します。
      • 選択:データテーブルのフィールドを選択し、値、表示テキスト、親の値、アイコンを設定します。
      • クエリー:クエリー条件を設定し、対象テーブルのレコードの絞り込みができます。[値]には数式が使用できるため、他の変数を参照して条件値を指定することもできます。
      • 先頭レコード:[取得する先頭レコードの数]を指定して、対象のレコードを絞り込みます。[スキップする先頭レコード数]に何も指定しなかった場合、1レコード目からを[取得する先頭レコードの数]に指定した数だけのレコードを取得します。たとえば、[スキップする先頭レコード数]に「2」を指定した場合、3レコード目からデータを取得します。数式が使用できるため、他の変数を参照してレコード数を指定することもできます。
      • 並べ替え:並べ替え条件を指定し、取得するレコードの並び順を変更できます。メニュー項目の並び順に影響します。
      • その他:
        • クエリー結果の表示モード:クエリーを設定した場合、クエリー結果から表示するメニュー項目を指定できます。
        • キャッシュを有効にする:キャッシュが有効な場合、クエリーの結果はキャッシュが失効するまでサーバーのメモリ上に保存されます。キャッシュが有効な場合は、ページを訪問したときにキャッシュから直接データを取得するため、データペースの負荷を大幅に軽減し、高連続性シナリオのパフオーマンスを向上させることができます。連結テーブルのデータの変更頻度が低く、また、更新処理時間の増加が許容できる場合は、有効にすることをお勧めします。

      メニュー項目...

      次のダイアログが表示され、ここで独自のメニュー項目を作成します。メニュー型セルをダブルクリックすることでも同じ画面が表示されます。

      左側のリスト

      メニューのツリー構造を表しています。

      メニュー項目を追加したい場合は「+」、削除したい場合は「−」をクリックします。

      メニュー項目の並び順を変更する場合は、をクリックします。また、ドラッグ&ドロップでメニューの上下関係を変更できます。これらは、右クリックして表示される次のメニューでも同様のことが行えます。またメニュー項目を追加、複製、削除することができます。

      コマンド...

      メニュー項目をクリックした時に実行されるコマンドを設定します。[クリックイベント...]とは異なり、メニュー項目ごとに個別のコマンドを設定できます。詳細は、コマンド(通常)を参照してください。

      名前

      左側のリスト内で選択されているメニュー項目の名前を変更できます。また、左側のリスト内のメニュー項目を右クリックして表示される上記メニューの「名前の変更」からも同様のことが行なえます。

      アイコン

      メニュー項目ごとに表示する任意のアイコンを選択します。

      • ローカルファイルを選択する場合、.jpg/.jpeg/.png/.gif/.ico/.bmp/.svg形式の画像を選択できます。
        .svg形式の画像を選択して、svg画像の右上にあるをクリックすると、画像の色を設定できます。
      • 組み込み画像を選択する場合、画像の色を設定できます。既定で「セルのフォントの色を使用」にチェックが設定されています。チェックを外すと、別の色を選択できます。

      バッジ

      式を使用してバッジを表示します。式の結果が、0か空文字の時は何も表示されません。

      たとえば、上記のように「=A1」と記載し、A1が「10」だった場合、以下のように式の結果がメニュー項目の横に赤い通知アイコンとして表示されます。

      例えば、ワークフローの担当件数を表示したい場合、通常はOData関数を使用して担当者がログインユーザーのレコードの件数をカウントします。

      展開

      ページを表示した時に、メニュー項目ごとにメニューを展開して表示するか折りたたんで表示するかを指定します。

      :折りたたんで表示します。

      :展開して表示します。

      :[既定の展開状態]で表示します。

      表示権限

      メニュー項目ごとに、異なるロールに対して異なる表示権限を設定できます。デフォルトは「匿名ユーザー」で、誰でもメニュー項目が表示されます。「匿名ユーザー」のチェックを外して「ログインユーザー」を指定すると、ログインしたユーザー全員にメニュー項目が表示されます。「匿名ユーザー」と「ログインユーザー」のチェックを外して任意のロールを指定すると、そのロールに所属していて、かつログインしたユーザーのみメニュー項目が表示されます。

      親メニューが表示されない場合、その配下のすべてのサブメニューも表示されません。

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

      レイアウトが垂直方向の場合、このプロパティが表示されます。

      [クリックされたメニュー項目以外は閉じる]オプションがチェックされている場合、特定のメニューをクリックするとそれ以外のメニューが折りたたんだ状態になります。
      またメニュー項目の既定の展開状態は折りたたんだ状態になり、[既定の展開状態]が設定できなくなります。

      既定の展開状態

      垂直方向のメニューの場合に設定します。

      初期表示時に、メニューを展開して表示するか折りたたんで表示するかを指定します。

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

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

        [メニュー項目...]で個々のメニュー項目に対して展開状態を指定している場合、そちらの設定の方が優先されます。

      メニュースタイル...

      背景色やフォントの色などの基本的な外観設定はセルスタイルの機能を使用して設定してください。セルスタイルで指定できない外観について、本設定を使用します。

      • メニュー階層:スタイルを設定するメニュー階層を選択します。
      • フォント:メニュー項目のフォント名。
      • 太字:チェック時にメニュー項目が太字になります。

      • フォントサイズ:メニュー項目のフォントサイズ(pt単位)。

      • 高さ:高さ(ピクセル単位)。

      • 幅:幅(ピクセル単位)。このプロパティは[レイアウト]が「水平方向」の場合にのみ有効です。

      • アイコンサイズ:アイコンの幅と高さ(ピクセル単位)。

             

      参考:

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

      • メニューの向きが水平の場合、サブメニュー項目の幅は240です。メニュー項目の幅が小さすぎると、メニュー項目のレイアウトが乱れます。

    コマンドで利用可能な操作

    特定の条件を満たした場合に右ペインの「セル型」タブに「コマンドで利用可能な操作」プロパティが追加されます。

    以下の操作名が記載されているボックスをページ上のセルに向かってドラッグ&ドロップすることで[セル型の操作]コマンドが設定されたボタンが生成されます。ドラッグ&ドロップの先がボタン型セルだった場合、ボタン型セル内で設定されているコマンドの一番最後にセル型の操作コマンドが追加されます。

    設定方法の詳細についてはセル型の操作を参照してください。

    操作 条件 詳細
    JSONデータの設定(ツリー構造) なし メニュー型セルのデータソースとして、ツリー構造のJSONデータを読み込みます。
    JSONデータの設定(テーブル構造) なし メニュー型セルのデータソースとして、テーブル構造のJSONデータを読み込みます。
    選択項目のパスを取得 なし

    パスは配列データで取得されます。「=TEXTJOIN(/",1,valuePath)」などの数式で文字列に変換するか、繰り返しコマンドを利用して値を取得できます。

    • テーブルからデータを取得しない場合、表示されているテキストのパスしか取得できません。
    • テーブルからデータを取得する場合、値のパスを取得するか、テキストを表示するパスを取得するかを選択できます。
    メニュー項目の非表示 なし 対象のメニュー項目を非表示にします。
    メニュー項目の表示 なし 対象のメニュー項目を表示にします。
    メニュー項目のハイライト なし 対象のメニュー項目をハイライトします。
    バッジの設定 なし

    メニュー項目に表示されるバッジを設定します。

    対象のメニューが[テーブルからデータを取得]している場合、[対象のメニュー項目]には、メニュー項目の[値]を設定します。そうでなければ、[名前]を設定します。

    連結データの再読み込み 「テーブルからデータを取得」が有効 セルのバインドされたデータテーブルの値が変更されたが、セルのバインドされたオプションを自動的に更新できない場合、この操作でバインドされたオプションを強制的に更新することができます。