Client-side conditionals

From JRapid

Jump to: navigation, search

When it comes to properties on forms you have great flexibility to define when and how they should be shown. You can add client-side rules to properties that can disable, remove, hide and select their value. JRapid offers this flexibility through FPath, a language similar to XPath. These client side controls can simplify your application's back end code and make the user interfaces easier to understand.

As an example, we will take a product table:

Image:csc1.png

Properties accept the following attributes that take FPath expressions as values:

"Readonlyif" does not work with file, image, enum and boolean fields, but for the rest it can display an non-editable field. "Checkif" is used to validate the content of a field on the form upon submission. In our example, to disable free checking for products that weigh more than 5 pounds requires only one tag with an FPath expression.

<entity label="Product" name="Product">
       <property label="Name" name="name" type="string" unique="unique"/>
       <property label="Weight" name="weight" type="double"/>
       <property label="Free Shipping" name="freeShipping"
            type="boolean" disabledif="weight > 5"/>
</entity>


This creates a product entry form like the two below. Note in the left example the weight value is less than 5 and in the right one the free shipping checkbox is disabled as the weight is greater than 5.

Image:csc2.png

The free shipping checkbox can also be made invisible if the weight is over 5.

<property label="Free Shipping" name="freeShipping" 
type="boolean" visibleif="5 > weight"/>

Image:csc3.png

It is also simple to have the form validate the data to ensure that free shipping is not selected for products weighing more than 5 pounds. This is accomplished with a checkif tag, and the message can be specified in a checkifmessage tag. Note that in this example we have to check the weight only if “freeShipping = ‘true’”. If it is false, the form should allow any weight.

<property label="Free Shipping" name="freeShipping" type="boolean"
checkif="(5 > weight and freeShipping = 'true') or (freeShipping = 'false')"          
checkifmessage="Free shipping is not valid for items weighing more than 5 pounds"/>

Image:csc4.png

In order to show how a text field can be displayed or made read-only, we added a promo code for the product, so that it can be entered only if the free shipping box is checked:

<property label="Promo Code" name="promoCode"
type="string" displayif="freeShipping = 'true'"/>

Image:csc5.png

You can also easily allow the promo code to show up but remain disabled unless free shipping is checked:

<property label="Promo Code" name="promoCode"
type="string" readonlyif="freeShipping != 'true'"/>

Image:csc6.png


These incredibly useful scripts will make your application more efficient as the front end can validate content before even contacting the back end, and the user can be shown only the relevant options, and notified when their selection is invalid. This is yet another way JRapid makes producing professional, impressive user interfaces a snap and possible in a fraction of the normal time.


See also

Personal tools