Conditional Visibility & Styling

Topic Overview

When it comes to seamless app experiences, you may often hear the word intuitive. We can often identify when apps are intuitive, as they are simple to use, easy to follow, and not burdened with data/features that aren't useful. However, what might not be so obvious are some of the features that makes an app so snappy.

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, so your app users are not burdened with some of the excess.

: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. This helps draw your app users attention to pertinent things in your app.

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. You can click on the field to activate the field configuration pop-up. Or 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