To Control Inputting for Multiple Select Type Data Items (Radio Button / Checkbox ed.)

Realize input control cooperating among multiple data items by using JavaScript.

 

We have received the following request from our Questetra BPM Suite’s customers since before

“When we have selected an option data item, we want to disable entering other option data item or to limit the range of entering”

 

In the case of “cooperation of multiple choices”, you can realize such request by using the method of Workflow Sample “Select from Main Class, Narrowed Down Choices”.

Select from Main Class, Narrowed Down Choices
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. That 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)

http://en.workflow-sample.net/2014/05/2phase-selection.html(2014-05-12)

The sample shown above includes

  • realization by selection type select box
  • 2-step selection (narrowing down choices)

, and it is effective mechanism when you have many choices.

However, when you want “to disable inputting to cooperation target choices” or “to deal with radio button or check box selection type data“, such way cannot be applied.

We would like to introduce a way for supporting such requests based on a specific example.

== Use Case ==

In response to recent information leakage risk, the necessity of taking-out management of information equipments is becoming higher. We would like to describe the Use Case about inputting when applying for taking-out information equipments.

1. Select “In-house Use” or “External Taking-out” in “Take out Kind” (Single selection : Required)
2. In the case of “In-house Use”, select the floor in which you use the equipment in “In-house Use Area” (single selection : Required)
3. Select the content of “Taking-out Equipments”. (Multiple selection : Required)
4. In the case of “External Taking-out”, ‘PC/laptop/smartphone’ cannot be selected.
5. When “Others” is selected in “Taking-out Equipments”, entering “Taking-out Equipments (Others)”. (String: Required)

The contents of choices will vary, but the input control described above will be needed.

== Point of Solution ==

* Add the choice of “Taking-out” to “In-house Use Area”, cooperate with inputting of “Take out Kind”

When you realize ‘2. In the case of “In-house Use”, select the floor in which you use the equipment in “In-house Use Area” (single selection : Required)’, you will trouble in the case of “External Taking-out”. (You can use floor selection for “In-house Use”). In the case of “External Taking-out”, it will be better to automatically select the choice of “External Taking-out” in “In-house Use Area” so as not to select the floor.

 

* In the case of “External Taking-out”, prevent checking of the ‘PC/laptop/smartphone’, the selection of “Taking-out Equipments”.

In the case of “External Taking-out”, it requires to set so as not to check the ‘PC/laptop/smartphone’, and
in the case of “In-house Use”, it requires to set so as to enable a check of the “PC/laptop/smartphone.

These settings can be realized by performing the checkbox control.

However, in some cases, note that it enables to “check in the ‘External Taking-out’” due to the order of data input. It also requires the control such as clearing “PC/laptop/smartphone” by considering not only the first input but also the change of “‘In-house Use’ <=> ‘External Taking-out’ of ‘Take out Kind'”.

 

Since the standard functions cannot realize these controls by themselves, you will need the implementation by JavaScript (reluctantly!).

== Implementation ==

The implementation examples being aware of “Use Case” + “Point of Solution” are shown below.

<Data item info : image>
Related data item setting list

<Input screen demo :”In-house Use”>
In-house Use demo

<Input screen demo :”External Taking-out”>
External Taking-out demo

<Input screen demo : “In-house Use”→”External Taking-out”>
in-house2external
The implement example of JavaScript realizing the input control is shown as follows.

<JavaScript Implementation Example

<script type="text/javascript">
jQuery(document).ready(function(){
    var takeOutKind; // Take out Kind
    jQuery('input[name="data[2].input"]').attr("readonly","readonly");
    // Processing when selecting Take out List
    jQuery('input[name="data[0].selects"]').change(function(){
        takeOutKind = jQuery(this).val();
        if (takeOutKind == 1) { // Type : In-house Use
	    // In-house Use Area : Disable selecting "External Taking-out"
    	    jQuery('input[name="data[4].selects"]').removeAttr("checked");
            jQuery('input[name="data[4].selects"]').removeAttr("disabled");
            jQuery('input[name="data[4].selects"][value="99"]').attr("disabled",true);
            // Taking-out Equipments : Possible to select "PC/laptop/smartphone"
            jQuery('input[name="data[1].selects"][value="1"]').removeAttr("disabled");
        }
        if (takeOutKind == 2) { // Type : External Taking-out
            // In-house Use Area : enable inputting "External Taking-out" and disable other choices
            jQuery('input[name="data[4].selects"]').val(['99']);
            jQuery('input[name="data[4].selects"]').attr("disabled",true);
            jQuery('input[name="data[4].selects"][value="99"]').removeAttr("disabled");
            // Taking-out Equipments : Check off choices of the "PC/laptop/smartphone" and disable inputting 
            jQuery('input[name="data[1].selects"][value="1"]').removeAttr("checked");
            jQuery('input[name="data[1].selects"][value="1"]').attr("disabled",true);
        }
    });
    // Taking-out Equipments : "Others"
    jQuery('input[name="data[1].selects"]').change(function(){
        if (jQuery('input[name="data[1].selects"][value="99"]:checked').val() == "99"){
            // Taking-out Equipments : enable inputting and clear
            jQuery('input[name="data[2].input"]').removeAttr("readonly");
            jQuery('input[name="data[2].input"]').val("");
        }
        else{
            // Taking-out equipments (Others) :  Disable inputting and set "None"
            jQuery('input[name="data[2].input"]').val("None");
            jQuery('input[name="data[2].input"]').attr("readonly","readonly");
        }
     });
});
</script>

== Afterword ==

Though it looks a little tedious to implement the JavaScript, I think the code itself is relatively understandable. When the cooperating data items are many, we can consider some devise such as making function of controlling step.

If you “are troubled with many input mistakes“, please try to consider the implementation.

For more details or consultation on implementation, please feel free to contact us.

2016-05-12

About Masato Furukubo

Questetra, Inc. Sales Department
View all posts by Masato Furukubo

Recommendations
Prev article - 50. Questetra Tips Collaboration between Cloud-based Workflow and Cloud Storage (Box ed.)
Next article - 50. Questetra Tips New Version, v11 : Try Browser Cache Clearing for Error Dialog of Modeler
Another article - Masato Furukubo Acquire the Storage Folder URL after Automatic Processing Step(Google Drive Integration)

Archive

 RSS