Canvas Apps Controls Expressions UI

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

Yes? No?
Yes? No?

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

Unlock the data card
Unlock the data card

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

Copy the data card control's name
Copy the data card control's name

  • 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

Errors after deleting the default data card control
Errors after deleting the default data card control

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

Add a toggle control
Add a toggle control

  • 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.

Default vs custom data card control
Default vs custom data card control

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

5 thoughts on “Yes/No – Change data card in Power Apps for better UX!”

  1. I have a toggle in powerapp for yes no field. But when i submit form it updates true or false in SharePoint list. I have selected true/false text as Yes/No but still it sends true/false in SP list. Any thoughts?

  2. This is GREAT!! Helped me figure it out exactly how to make this happen–but one note: CheckBoxes and Toggle controls now do NOT have a .Value property or .Default You must beat it to fit, and paint it to match with a .Checked property, and pass the Yes/No true/false back and forth. But the whole tutorial was VERY eye-opening!! Thank YOU!!

Leave a Reply