Swap Controls in PowerApps

PowerApps

I really enjoy working with PowerApps but I cannot say the same about the default form controls. I suppose my SharePoint list datasource is to blame but I prefer to keep the SharePoint columns as simple as possible. Unless my SharePoint list columns contain dates, people’s names, numbers or many lines of text, I rarely use any column other than Single line of text. Why? I don’t feel like dealing with SharePoint quirks and PowerApps quirks, I can do whatever I want in PowerApps, and when I connect my data to Power BI, reporting is just as easy.

Because of my logistical SharePoint choices, I swap out default text controls in every PowerApps project. For example, I may have a Yes/No question on a form. My SharePoint column for this field is still a Single line of text column and so the default control in PowerApps is a Text Input control. I remove that control and add a Radio control in its place.

Here are my steps to do the control swap:

  1. Select the desired data card.
  2. In the data card’s Properties panel, click the Advanced tab and toggle off the lock so that all properties are editable.
  3. In the Tree view, make a note of the name of the Text Input control to be replaced.
  4. In the example above, DataCardValue1 is the Text Input control. Delete this Text Input control. For now, ignore all the errors and warnings that appear.
  5. Immediately go to the Insert tab. Click the Input menu and select the Radio control.
  6. Now the Radio control is in the data card. Continue ignoring the errors.
    undefined
  7. In this example, the new Radio control is named Radio1. Right-click this Radio control and select Rename.
  8. Give the Radio control the name of the previously deleted control, i.e., DataCardValue1. Some of the errors should have disappeared, now.
  9. One error may remain. Click the red error icon and select Edit in the formula bar.
  10. The current formula is only valid for text input controls and may say something like this:

    DataCardValue1.Text
  11. Replace that code with this:

    DataCardValue1.SelectedText.Value
  12. All errors should be gone, now. The data card should look something like this:
    undefined
  13. Next, let’s change the options. Select the Radio control in the data card and clicked the Advanced properties panel.
  14. In the Items field of the Advanced properties panel, replace the default value RadioSample with the following code:

    ["Yes","No"]
  15. Lastly, change the orientation of the radio buttons. In the Layout field of the Advanced properties panel, change the default value Layout.Vertical to Layout.Horizontal.
    undefined
    That’s it! The Text Input control has been successfully swapped for a Radio control.