Yes/No – Change data card in Power Apps for better UX!

Introduction

A form has multiple data cards. One of the main elements of a data card is the DataCardValue control. It is the control that you use to display/edit column values. With Dataverse and Dataverse for Teams, the default control that gets added for a Yes/No field is a combo box. While it works fine, it doesn't provide a good user experience.

Tip - Yes/No toggle

To provide a much better user experience, replace the combo box control with the toggle control (a form connected to SharePoint adds a toggle control by default for a Yes/No column). But how would you go about it?

Steps to replace combo box with toggle

Here are the steps (I have a registration form in which one of the columns is a Yes/No which is used to mark whether the person is an employee or not):

• Select the data card and unlock it, otherwise you will not be able to perform any of the following steps

• Copy the data card control's name (not the data card's). In this case, it is DataCardValue2

• Go ahead and delete the default control (combo box). You will notice a few errors crop up but they will go away with the next steps

• Add a toggle within the data card and rename it using the name of the default control i.e. DataCardValue2

• Change any design property of the toggle as needed and reposition it
• You will see that most of the errors go away except one (Update property of the data card)
• Since the control was initially a combo box, the Update property was DataCardValue2.Selected.Value

  If(DataCardValue2.Value, 'Employee (Registrations)'.Yes, 'Employee (Registrations)'.No)

• Change the Update property of the data card (not the data card value i.e. toggle) to account for the fact that a combo box has been replaced by a toggle control
• Since the combo box was populated by the option set, you could simply pick the selected value. However, the values for a toggle control are true or false. So the Update property should be changed as shown below:
• To make the toggle display the current value, we will have to change the Default property of the toggle to

  If(ThisItem.Employee = 'Employee (Registrations)'.Yes, true, false)

The default property of the data card itself will still be ThisItem.Employee.

Demo of toggle vs combo box for Yes/No field

With all these changes, here is a comparison of two versions of the same form - one that uses a combo box for a Yes/No field and one that uses a toggle.

Stay tuned for the last tip, of this series that is!

Related 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