Workflow Sample: Select from Main Class, Narrowed Down Choices

Following the previous article we are going to consider "weekly report in the coffee shop chain business".

In this coffee shop chain, you don't feel inconvenience in inputting operation to select "Menu", because the number of the menu is only 17 in total. However, if the number becomes 30 or 50, there will be some difficulties in making selection. I would like to think up some trick for the sake of data inputting without mistakes.

＜cafe-menu.xml＞

<items>
<item value="h1" display="Espresso" />
<item value="h2" display="Americano" />
<item value="h3" display="Latte" />
<item value="h4" display="Black Tea" />
<item value="c1" display="Iced House Blend" />
<item value="c2" display="Iced Tea" />
<item value="c3" display="Organge Juice" />
<item value="c4" display="Lemonade" />
<item value="c5" display="Soda" />
<item value="e1" display="Bagel" />
<item value="e2" display="Oatmeal" />
<item value="e3" display="Serial" />
<item value="e4" display="Cheese Burger" />
<item value="e5" display="Pan Cake" />
<item value="m1" display="Prix fixe A" />
<item value="m2" display="Prix fixe B" />
<item value="m3" display="Prix fixe C" />
</items>

"Value attribute" is set in a Select form in HTML, other than Display name (display attribute). And "Main class code" is set in the "Value attribute" in this case. (H: Hot Drinks, C: Cold Drinks, E: Food, M: Prix Fixe)

So, I'm going to think a simple filter using this "Main class code". (Show hidden control using JavaScript)

[Data Items list screen]

[Weekly Report flow-2 Phase Selection]

[Weekly Report flow-2 Phase Selection: "1. Weekly Report" screen]

Here's an example for adding a "Form of to narrow down the choices of menu", in addition to "Form which you can select a menu" of existing. hat is, it is a mechanism for the list portion of the menu choices are filtered by selecting "main class". (2 phase selection) (Narrowing down Choices)

In Questetra, you can describe HTML code in "Design Settings" column in input screen setting (to indicate Tips of Input on the operation screen), you can also describe JavaScript code as well, at your own risk.

*Example of filter 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>

When you want to control the displays information of browser, knowledge of "JavaScript" becomes absolutely necessary. By using "JavaScript" as in this example, you can improve the convenience of the data input. However, heavy use of "JavaScript" might lower the maintainability, and also could be a cause of trouble including the security. Satisfying both maintainability and convenience is not easy. You must set it to match the maintenance ability of your organization itself.

[Free Download]