Display "Two Options" field of Common Data Service as checkbox on canvas app

Do you have the following requirements?

You want to display dropdown items as checkbox inside a canvas app
You want to display a Two option field of Common data service as checkbox inside a canvas app.

If you have these requirements, then this blog might save your day. Well for anyone who is wondering what the problem statement is all about, if you have used two options field of Common data service on the Canvas app form, this is how it displays on the form.

Approved? field is a two options field and the customer want to to display it as checkbox. However by default it displays as a dropdown.

So let’s see how we can achieve the requirement. As a starter we need to first unlock the datacard.

The next step is to delete the Dropdown field inside the data card.

Once you have deleted the dropdown field, the next step is to insert a checkbox control inside the datacard. Make sure if you insert it inside the data card.

As you delete the dropdown and insert the checkbox, you may notice some errors. The errors are because some of the properties of the the data card is referring to the old dropdown control. Use the “App Checker” to resolve all these errors by removing the reference of the old dropdown control.

Few of the corrections which are absolutely important, you need to make here.

Select your data card and then change the Update property to the below formula. I have changed the name of the Checkbox to ApprovedCheckbox.

If(ApprovedCheckbox.Value = true, 'Approved? (Accounts)'.Yes, 'Approved? (Accounts)'.No)

Next select the Default property of the Checkbox and set it to the below formula.

If(ThisItem.'Approved?' = 'Approved? (Accounts)'.Yes, true, false)

That’s it. Save the app and you are done. Run the app and everything should work just fine. If you are using multiple checkboxes for multiple dropdown items, you need to basically use the same process.