Zero state – How to improve UX with images!

Introduction

User experience is a key factor for any application. It can lead to a much better user adoption. One such example is showing zero state. For example, when a users accesses an app for the first time, it is a good idea to show some zero state message. This helps the user know that the app is working fine, its just that there is no data to be displayed yet. Similarly, if there are no results in a gallery for a given search criteria, a message telling the user that the search resulted in no results makes for a better experience.

Tip - Zero state images!

There are multiple ways you can add zero state messages. They can be as simple as text on a label. But if you want to get fancy, you can add some cool images. Irrespective of whether you use labels or images, the idea is to conditionally show them based on the number of records in the datasource or the gallery.

The sample apps for Dataverse for Teams use this approach a lot. I will use the Milestones app, my personal favorite, to illustrate the concept here.

If a project doesn't have any work items, we show the following zero state illustration:

The Visible property of the image and label are set to:

CountRows(gblProject.'Project Work Items') = 0

where gblProject is a variable in which the selected project is stored.

If a gallery is blank simply because of a particular search criteria, then we show the following illustration:

In this case, the Visible property is simply set to

CountRows(galWorkItems.AllItems)

where galWorkItems is the gallery of work items.

To summarize,

1. Use the following to illustrate zero state when no data exists:

   CountRows(DataSource) = 0

2. Use the following to illustrate zero state when data exists but isn't displayed possibly because of a search criteria:

   CountRows(Gallery.AllItems) = 0

Recent articles

1. A-Z: 26 tips! Learn how to improve your Power Apps!
2. Add Picture vs Camera Control – Who is the winner?
3. Background images for Power Apps screens – the right way!
4. Combo box or Dropdown? - Who is the winner?
5. Delegation in Power Apps – How to identify and test!
6. Edit vs Display – Which is the better form?
7. Formulas – How to learn the 170+ Power Apps formulas?
8. Galleries vs Data Tables – How to pick between the two in Power Apps?
9. Hyperlinks – How to launch web pages & apps in Power Apps!
10. Icons – How to increase performance!
11. Jump start – How to speed up Power Apps dev with components!
12. Keyboard – How to control the keyboard type on mobile
13. LastSubmit – How to fetch the last submitted record in Power Apps
14. Media controls in Power Apps – How to improve user experience!
15. New screens – How to speed up Power Apps dev using templates!
16. OnStart – How to optimize app loading experience!
17. Phone camera – How to switch cameras on Power Apps mobile!
18. Quotes – Should you use single or double in Power Apps?
19. Reset – How to reset a Power Apps gallery?
20. SaveData – How to persist your Power Apps sessions!
21. Tables – How to create tables in Power Apps
22. User – How to fetch current user’s details in Power Apps
23. Variables – What happens when global & context var have the same name?
24. Wrap Count – How to change the layout of Power Apps galleries
25. X – Creating X records in a collection using Sequence
26. Yes/No – Change data card in Power Apps for better UX!