Conditional Visibility & Styling

Topic Overview

In creating the best possible experience for app users, many commonly reference the word intuitive. But what makes an app intuitive? Things that come to mind are simple to use, easy to follow, and not burdened with data/features that aren't useful.

In this article, we will walk through some common patterns to help achieve this:

:eye: We'll show you how to hide and show parts of your app using conditional visibility. This way some of your fields and buttons only show up when certain criteria have been met.

:art: We'll introduce how to enhance your app's experience using conditional styling, so that fields display in certain colors and shades depending on what rules you put in place.

Conditional visibility

This enables you to set ground rules for different parts of your app, so they only show up just when you want them to.

Examples

  • I only want the submit button to show up after a user has completed all the necessary fields, so I can capture the right data.
  • In my app's list screen, I want to hide the low priority and medium priority projects so that it only shows projects that have a high priority status.

Steps

In this example, we will use the Project Tracker template. Imagine that your team has been using it for a few weeks; however, some of your colleagues have been submitting projects with no description and no manager. This is resulting in some confusion, so you decide it's a good idea to hide the notify of update button until both of these fields are completed.

Here is how you would do this:

  1. Go to properties panel, select actions, select the button's ellipsis, and select the hide when add condition arrow.

image

  1. Select custom, and complete the conditions using the dropdowns.

  1. Select save, and view your app to check out the changes.

That's it! Honeycode has made it easy to do this, and you can apply all sorts of rules to different features in your app to make the most of conditional visibility.


Conditional styling

Set criteria for different parts of your app, so they only show up with certain colors and different shades to help draw attention and communicate in an easy-to-understand way.

Examples

  • If the due date has past, I want to show the project name field shaded in red.
  • If a project is on track for completion, I want to text in the status field to show up in green.

Steps

Say, for instance, that you are working in the Project Tracker template and want to add a red shade to the task field for any tasks that are (1) high priority and (2) have due date that is in the past to draw attention to it.

Here is how you would do this:

  1. Go to the properties panel, select the field's ellipsis, and select the conditional styling arrow.

  2. In pop-up window, toggle the style, and select the add condition arrow

image

  1. Set the conditions using the dropdown menus. You can add multiple conditions.

  1. Select save, and view your app to check out the changes.

Quick and easy! You can apply conditional visibility to all sorts of different features in your app to leverage the color wheel for an intuitive user experience.

Was this article helpful?
  • Yes
  • No

0 voters

1 Like