When you add a form to your canvas app, data cards get created for a few fields. You can select more fields for additional data cards. Among other things, A data card consists of a data card key which is the label describing what the data card is for and a data card value which has controls that can be used to display existing values or for users to use to specify values for the associated data cards.
The controls (data card value) are picked by default depending on the data type e.g. a text input control for a text field, combo-box for option set values, date picker control for date fields etc. As you can see from these examples, most controls picked by default are correct for their associated field types.
That being said, there are situations in which you would want to replace the default data card control with another one. For example, for a two-option field, a toggle would be better than a combo-box. I have outlined the steps you would want to follow if you want to replace a default data card control.
I have a registration form in which one of the fields is to mark whether the person is an employee or not. It is a two-option field with Yes and No as the two possible values. I want to replace the default control (combo box) with a toggle.
-
- 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
- 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:
If(DataCardValue2.Value, 'Employee (Registrations)'.Yes, 'Employee (Registrations)'.No) - 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
With all these changes, here is a comparison of two versions of the same form - one that uses a combo box for a two-option field and one that uses a toggle.
As you can see, a toggle control leads to a much better user experience and even looks better than a combo box control, at least for a two-option field. So go ahead and make your forms more UX friendly!
Have fun! Get addicted!