Style Properties and Bindings

Every property of any web component in the UI Builder is bindable, which means it can be addressed using Bindings to implement all kinds of business logic to an application. Custom CSS style properties are no exception to this, and there are several ways you can leverage Iotellect bindings using them along with component style properties:

  • Changing a custom CSS style property’s value directly with an expression (not recommended)

  • Changing the Custom Classes property value while having CSS for the class(es) written beforehand (recommended)

  • Use any of the custom CSS styles or the Custom Classes values as a trigger to execute a binding for any other UI component or server entity.

Keep in mind that this approach involves an additional data exchange with the Iotellect Server and may cause possible performance-related complications.

Changing a Custom CSS Style Value

This method isn’t the optimal way to handle component style updates, but plausible if needed. The reasons to avoid this particular approach are:

  • It causes transferring a lot of additional string data as CSS styles on the binding execution between the Server and the Web UI

  • It is hard to maintain and troubleshoot since the styles are available only from the Expression Builder within the expression code and binding execution is disabled in the UI Builder.

Updating the Custom Classes Value

The preferred way to handle dynamic component style updates is to use the Custom Classes property:

  • Add the styles for all possible cases to the Container Style property of a component using a set of the chosen HTML classes to create the CSS rules beforehand.

  • Then, update the component’s Custom Classes property value with a binding using one of the predefined class names.

This method uses only a small bit of string data to transfer as a class name(s) on the binding execution between the Server and the Web UI. Also, it is much easier to troubleshoot since all the styles are available in the UI Builder and you just need to change the current Custom Classes value of the component to see the styles applied on the dashboard.

Was this page helpful?