Flip the switch: two option (yes/no) fields in model-driven Power Apps
Who knew the simple two option (Boolean) field aka ‘Yes/No’ could have SO many options when it comes to user interface design? Its kind of ironic really.
Lets look at how to use Custom Controls and PCF components with the humble two option field in model-driven Power Apps for better visualisations and maximum user experience. Make sure you check out the third section which although technically not a two option field behind the scenes, shows a really smart example of how you can you a flip switch to set a timestamp, two visual benefits in one field!
It’s still only properly configurable through the classic form designer experience, some functionality is coming through in the new maker experience but for completeness lets stay in the classic version for this.
Custom Controls
There is a heap of options available out of the box without adding any fancy PCF controls.
Use the ‘Formatting’ and ‘Controls’ tabs on the form to use any of these user interface elements,
Change the colour of the ‘Flip - Switch’ with the themes ‘Legacy Accent Color’
Power Apps Component Framework (PCF)
Again, there is heaps of choice here too, be sure to check out the PCF Gallery for more controls than what you see below [1]
Set the values of the fields options to control the colour that shows when the option is selected
Set the switch, on and off colours using the colour names
Bonus: PCF Date as a two option field
Who knew there could be so many options for a simple true or false field? Let me know which two option controls you use and if you want to shout out some other ones out there drop me a comment below!
[1] PCF Gallery two option controls https://pcf.gallery/categories#two%20options
[2] Option sets in model-driven apps https://www.ameyholden.com/articles/option-sets-in-model-driven-power-apps
[3] Custom Switch control https://pcf.gallery/custom-switch
[4] Custom Switch configuration docs https://github.com/MscrmTools/PCF-Controls/blob/master/README.md#custom-switch
[5] Colour slider https://pcf.gallery/colour-slider/
[6] Two Option Icons control https://pcf.gallery/two-options-icons/
[7] Fabric UI icons for the Two Options Icon control https://developer.microsoft.com/en-us/fluentui#/styles/web/icons#available-icons
[8] Use dates instead of checkboxes for checklists https://www.youtube.com/watch?v=cuQIIAQPHbk
[9] Bonus: PCF Date as a two option field https://pcf.gallery/date-as-checkbox/