• Calculated Field Expressions
• Client-side Formatting
• Conditional Styles
• conditionalstylelevel
• Enable Expression
• formatdefinition
• formattype
• securitygroups
• Show and Hide Fields

Client Side PropertiesConditional Styles

Description

Conditional Styles contain conditions that are evaluated in a Browser using Javascript.

This makes it possible to dynamically style controls without having to make Ajax callbacks. For example, if a user enters an exceedingly large value into a Quantity field, the entry can immediately be displayed in red to show it is too big. In contrast to 'client-side' conditional styles, 'server-side' conditional styles use conditions that are expressed using Xbasic expressions. These conditions are then evaluated on the server. This video shows how client-side conditional styles can be used to display a different font and background color depending for different ranges of values.

Conditional styling for a Grid row, checked rows are red. Unchecked rows are black.

Example: Using a Javascript Function

In addition to the functions listed in Insert Function..., you can write your own JavaScript functions to use in the conditional expression. To define your own JavaScript function, go to the Javascript Functions pane and define the JavaScript function you'd like to use. This function can include arguments populated from fields in the conditional expression.

For example, assume you have three fields in the Grid row that you'd like to use in your JavaScript function in an expression: 'field1', 'field2', and 'field3'. The expression could be written as:

myCustomFunction(field1, field2, field3)

where myCustomFunction is the name of your JavaScript function defined in the Javascript Functions pane.

function myCustomFunction(field1, field2, field3) {
    // Code that performs the evaluation and stores
    // the computation in a variable called result

    return result; // result is a variable with a true or false value
}

The JavaScript function must return a value. If the function is used to compute the whole expression, the JavaScript function must return a true or false value. Otherwise, the return value must be used in a conditional expression that evaluates to true or false.

Videos

Client-side conditional style

In this video, we show how to dynamically style controls in the Grid. The video demonstrates how the Quantity field can be displayed in a different font and background color depending on where the field's value occurs within a range.

• Watch Video