Condition

Within a block conditions can be set to HTML areas using the <div/> tag and the control HFWinJSCtrl.Condition:

<div id="tab-block#1">
    <div id="condition1" 
        data-win-control="HFWinJSCtrl.Condition"
        data-hf-condition='{"cond": [{"type": "field", "id": "testradio1", "val": "yes" }]}'>
        
        <input id="text1" type="text" data-win-control="HFWinJSCtrl.TextField" />
    </div>

    <div id="condition2" 
        data-win-control="HFWinJSCtrl.Condition"
        data-hf-condition='{"cond": [{ "type": "field", "id": "testradio1", "val": "no" }]}'>
        
        <input id="text1" type="text" data-win-control="HFWinJSCtrl.TextField" />
    </div>

    <div id="condition3" 
        data-win-control="HFWinJSCtrl.Condition"
        data-hf-condition='{
            "op": "and", 
            "cond": [
                { "type": "field", "id": "checkbox1", "val": "no" }, 
                { "type": "field", "id": "checkbox2", "val": "no" }
            ], 
            "else": "disabled"
        }'>
        
        <input id="text1" type="text" data-win-control="HFWinJSCtrl.TextField" />
    </div>
</div>

The conditions are defined inside the data-hf-condition attribute and the value of the data-hf-condition must be a JSON string.

Operator ("op")

Property	Type	How to use	Description
op	String	"op": "and"	concenate several conditions by "or" / "and" operator

Condition(s) ("cond")

Property	Type	How to use	Description
cond	JSON String	"cond": [ { ... } ]	Define your condition(s)
type	String	"type": "page"	The type of the form element the condition is based on
id	String	"id": "testradio1"	The id of the form element the condition is based on
val	Boolean Number String	"val": true "val": 2 "val": "no"	Only for use if `"type": "field"
hintText, hintHtml	String	"hintText": "Please fill in all required fields ..."	User info message - if the condition is not fullfilled. Only relevant if the condition property else is set to disabled. For example if the page is disabled because its condition is not fullfilled, this message text will be shown whenever the user clicks on the page. (Will be implemented in the next release.)

Info

If you want to use RadioBoxes or Checkboxes for condtional statements, you have to provide the HTML input attribute "value".

Else -Statement ("else")

Property	Type	How to use	Description
invisible	String	"else":"invisible"	Unless the condition is fulfilled the form element is invisible
disabled	String	"else":"disabled"	Unless the condition is fulfilled the form element is disabled
optional	String	"else":"optional"	Unless the condition is fulfilled the form element is not required - this option can only be used within fields and prerequests the data-win-option "required : true"
readonly	String	"else":"readonly"	Unless the condition is fulfilled the form element is readonly