ワークフローサンプル: 「大分類」を選ぶと選択肢が絞り込まれる様に

前回に引き続き、「チェーン喫茶店における『週次報告』業務」を考える。

この喫茶店チェーンでは、メニューの数がまだ「全17種類」なので、「メニュー」を選択する入力操作に不自由を感じるケースは少ない。しかし、全30種、全50種ともなれば、やはり選択しづらくなるだろう。ミスの無いデータ入力のためにも何らかの工夫をしたい。

＜cafe-menu.xml＞

<items>
<item value="h1" display="コーヒー" />
<item value="h2" display="アメリカン" />
<item value="h3" display="カフェオレ" />
<item value="h4" display="紅茶" />
<item value="c1" display="アイスコーヒー" />
<item value="c2" display="アイスティー" />
<item value="c3" display="オレンジジュース" />
<item value="c4" display="レモンスカッシュ" />
<item value="c5" display="コーラ" />
<item value="e1" display="トースト" />
<item value="e2" display="サンドイッチ" />
<item value="e3" display="ピザトースト" />
<item value="e4" display="ナポリタンスパゲッティー" />
<item value="e5" display="ピラフ" />
<item value="m1" display="モーニングAセット" />
<item value="m2" display="モーニングBセット" />
<item value="m3" display="モーニングCセット" />
</items>

HTML の選択フォームは、表示名（display属性）以外に「value属性」がセットされる。そして、このケースでは「value属性」に「大分類コード」が入っている。（H:ホットドリンク、C：コールドドリンク、E：軽食、M：モーニングセット）

そこで、この「大分類コード」を使った簡単なフィルタを考えてみる。（JavaScript を使った表示非表示制御）

[データ項目一覧画面]

[週次報告フロー-二段階選択]

[週次報告フロー-二段階選択：「1.週報記入」画面]

以下は、既存の「メニューを選択するフォーム」に加えて、「メニュー候補を絞り込むためのフォーム」を新規追加する例だ。すなわち、「大分類」を選択すると、メニュー選択肢のリスト部分がフィルタされる仕組みとなる。（二段階選択）（選択肢の絞り込み）

なお Questetra の場合、入力画面設定の『デザイン設定』欄に HTML を記述できる（「入力のヒント」などを表示させる事ができる）が、そこに自己責任で JavaScript を記入する事も可能だ。

◆ フィルタ Script の例

<script type="text/javascript">
function ParentAndChildSelectByName(parent, child){
    var parent_obj = null;
    var child_obj = null;
    var child_html = null;

    jQuery('select').each(function(){
        if(jQuery(this).attr('name') == parent){
            parent_obj = jQuery(this);
        }
        if(jQuery(this).attr('name') == child){
            child_obj = jQuery(this);
            child_html = jQuery(this).html();
        }
    });

    parent_obj.change(function(){
        var prefix = jQuery(this).val();
        child_obj.html(child_html);
        child_obj.children().each(function(){
            var val = jQuery(this).attr("value");

            if(val.indexOf(prefix, 0) != 0){
                jQuery(this).remove();
            }
        });

    });
}
ParentAndChildSelectByName("data[17].selects", "data[2].selects");
ParentAndChildSelectByName("data[18].selects", "data[3].selects");
</script>

ブラウザの表示情報を制御するには、どうしても「JavaScript」の知識が必要となる。この例の様に「JavaScript」を活用する事で、データ入力の利便性を向上させる事ができる。しかし、「JavaScript」の多用は、メンテナンス性を下げ、またセキュリティを含むトラブルの原因にもなりかねない。利便性とメンテナンス性を両立させるのは容易ではない。自組織の「メンテナンス力」に合わせた設定としなければならない。

[雛形ダウンロード (無料)]