Conditional Styling

Topic

Conditional styling is a Honeycode feature that allows you to dynamically change an app object's style (color, font, borders, etc.) when a condition is true.

Conditional styling can enhance the aesthetic of your app's user interface and provide intuitive visual cues to make things pop out and easy to follow for an improved user experience. You can select from pre-packaged styles or create custom styles of your own.

:bulb: This functionality removes the need to add duplicate objects to achieve the conditional styling effect.

When adding this feature to your app objects, you will need to (1) set a condition and (2) select a styling option.

Example

For this example, we will use the Tasks screen of the Team Task Tracker template. Each task has a status (blocked, not started, in progress, and completed). These statuses are coming from the [Status] column of the A_Tasks table.

The image below shows how ContentBox19 contains a data cell that is being sourced from the [Status] column of the A_Tasks table. Depending on the status for a given task, ContentBox19 dynamically changes color. The app will display grey, blue, or green depending on when a condition is true based on the value in the [Status] column of the A_Tasks table.

  • Grey: =[Status]="Not Started"

    • If the value in the status column is Not started, the display will be grey.
  • Blue: =AND([Status]<>"Completed",[Status]<>"Not Started")

    • If the value in the status column is not equal to Completed AND not equal to Not started, the content box display will be blue. In other words, if the status is Blocked or In progress, then the display will be blue.
  • Green: =[Status]="Completed"

    • If the value in the status column is Completed, the content box display will be green.

There are two key components to conditional styling as the term suggests. The first is to set the condition, and the second is to set the style. Below, we will walk through the steps.

Steps

This video shows an overview of the steps. The example is adding a new red style for any tasks with a blocked status.

Set the condition

  1. Select an object in your app that could benefit from conditional styling, and think about which conditions (i.e. rules) you would want to utilize.

:hammer_and_wrench: Builder tip: While conditional styling can be applied to a higher level object like a list, depending on your need, it may be most effective to apply the conditional styling to the individual content box within a list.

  1. In builder, click on the object that you want to conditionally style.

  2. Click on the Display tab in the properties panel.

  3. In the conditional styling section of the properties panel, click + Add.

  4. In the set condition field, write a formula starting with an = sign. Note that when these expressions contain multiple arguments, you have to use the AND operator.

Below are some common use cases with a variable data cell $[Datacell] which are often sourced from a column within a table:

  • Is blank: =$[Datacell]=""
  • Is not blank: =$[Datacell]<>""
  • Is equal to: =$[Datacell]="User Input"
  • Is not equal to: =$[Datacell]<>"User Input"
  • For numbers: =$[Datacell]=Number
  • Date is Today: =$[Datacell]=Today()
  • DateTime is Now: =$[Datacell]=Now()
  • Contact is Current User: =$[Datacell]=$[SYS_USER]
  • Row is the Current Row: =$[Datacell]=ThisRow()

:hammer_and_wrench: Builder tip: You can click + Add up to five times for an object. Meaning each object can have up to five conditions and five styles. Do know that each condition can have up to five rules, and you can add these by clicking + Add another.

Once you've set the condition, you can then get creative and set the style.

:art: Set the style

  1. In the then style as section, click the drop down arrow.

  2. Choose one of the prebuilt options or select custom if you want to do something different.

  3. Depending on the object, you can style the following components:

  • List: Background color, border styling, corner styling
  • Block: Background color, border styling, corner styling
  • Segment: Background color, border styling, corner styling
  • Content Box: Background color, border styling, corner styling, font color, bold, italics, underline
  • Button: Background color, border styling, corner styling, font color, bold, italics, underline

That's it. Happy styling!

Was this article helpful?
  • Yes
  • No

0 voters

4 Likes