Radio buttons and saving fields to multiple SharePoint lists using PowerApps

by Super User on ‎03-17-2017 09:31 AM

Introduction


This blog walks you through two features. One, how you can add the radio button options in an app and save the selected option to a single line of text. Two, to save fields from an app two separate SharePoint lists. The demo in this article is using SharePoint Online, however, the same can be done for On-Premises environments as long as the SharePoint On-Premises Gateway has been installed and configured.

 

Scenario


Consider a scenario where either an administrator, manager or a user is putting in an order for either a new or upgrade device. The request should be a two step process. Step 1 consists of selecting the Requester (i.e. Administrator, Manager or User), Request Type (i.e. New or Upgrade) and Employee Status (i.e. Contractor or Full-time). Step 2 consists of have the options to first choose the Manufacturer>Device>Model and then finally the accessory. Selections of step 1 are saved in list #1 which is titled as 'Radio-To-Single-Line' and selections of step 2 are saved in list #2 which his titled as 'Radio-To-Single-Line2'. The building of step #2 contains cascading drop-downs which is explained in detail in my previous blog called 'Cascading dropdowns for single line of text'

 

Requirements


6 SharePoint lists, 2 of them is to save the information and the remaining 4 is for lookup. Detailed description of the four lookup lists (PAMFR, PADevice, PAModel and PAAccessory) are described in detailed in my previous blog called 'Cascading dropdowns for single line of text'


Here is the description of the two lists to save information.

 

The Radio-To-Single-Line


This list will save the Requester, Request Type and Employee Status. Each of these are radio buttons in the powerapp, however, the SharePoint list stores them in a single line of text. Here is a screenshot of all the columns in this list which is titled as 'Radio-To-Single-Line'

 

Capture1.PNG

 

Radio-To-Single-Line2


In this list the Title field saves the ID number of 'Radio-To-Single-Line' item. The remaining columns are MFR, Device, Model and Accessory. Below is a screenshot of all the columns in this list which is titled as 'Radio-To-Single-Line2'

 

Capture2.PNG

 

Building the app


Go to the 'Radio-To-Single-Line' SharePoint list and click on PowerApps. Give the app a name (below is a screenshot)

 

Capture3.PNG

 

Give the app a name and then click on Create. For this demo 'Radio-To-Single-Line' is the app name as shown below

 

Capture4.PNG


Below is a screenshot of a window that will temporarily appear while the app is being built.

 

Capture5.png

 

You will also see this helpful quick tour. You can either skip or go through the tour.

 

Capture6.png

 

By default you will have the BrownScreen1, DetaileScreen1 and EditScreen1. Click on the three dots or the ellipses next to the EditScreen1 and click on Duplicate screen. Rename that screen to EditScreen2

 

Capture7.PNG


Building the 1st edit screen

 

Let's start with customizing EditScreen1. We need to re-arrange the columns and to do that simply drag and drop the columns that appear on the right. Once you've made your changes save the app. Below is a screenshot of the column order.

 

Capture8.PNG

 

We are also going to replace the check icon on the top right with a button on the bottom. The OnSelect action of the button will remain the same i.e. SubmitForm(EditForm1)

 

Capture9.PNG

 

Now, we have completed all the preliminary work needed to start adding the radio buttons. Select the Requester data card and unlock it. As the below screenshot shows, the data card name is DataCard6.

 

Capture10.PNG


We are now going to replace the Requester single line of text to radio buttons. Click on the data card value (as shown below) and delete it.

 

Capture11.PNG

 

Here is a screenshot of what it looks like once it is deleted. You can ignore the two warnings for now.

 

Capture12.PNG

 

Click on Requester data card and make sure it all selected (as shown below). Next, click on Controls which is available in the Insert menu's ribbon and finally click on the Radio option.

 

Capture13.PNG


After moving the new control to it's desired location, here is what the new datacard looks like. Notice the card name has been changed to rbtnRequester.

 

Capture14.PNG


With the rbtnRequester selected, change the items function from 'RadioSample' to ["Administrator", "Manager", "Requester"], Below is a screenshot of what the

 

Capture15.PNG


Make similar changes for the Request Type and Employee Status data card. For Request Type the data card name is rbtnRequestType and the Items formula is ["New","Upgrade"]. For Employee Status the data card name is rbtnEmployeeStatus and the Items formula is ["Full-time","Contractor"]. Below is as screenshot

 

Capture16.PNG

 

Populating the single line of text

 

Now that the radio buttons have been added, we need to save all the values to the original single of text fields that connect to the SharePoint list columns. Hence we now need to add those columns back and assign default values to them.

First, add those single line of text fields back to the form. On the right you can click on icon that looks like an eye for employeestatus, requester and requesttype. Below is a screenshot.

 

Capture17.PNG

 

As you see, there are now three new data cards added. These are the single line of text fields that come from the SharePoint list

 

Capture18.PNG

 

Next, unlock each of these new columns, however, only change the default values of each. For example, click on the new Employee Status field i.e. the single line of text one and unlock it. Also, rename the data card to txtEmployeeStatus. Once it is unlocked, change the default value from 'Parent.Default' to 'rbtnEmployeeStatus.Selected.Value'.

 

Capture19.PNG


 After assigning the value, scroll down and change the Visible to 'false. This way you do not see both of them in the form, however, the selected value does get saved to the list column.

 

Capture20.png

 

Do the same for the new Requester and Request type columns, however, change the names and the default formulas to-

 

Requester - txtRequester - rbtnRequester.Selected.Value
Request Type - txtRequestType - rbtnRequestType.Selected.Value

 

Below is what the screen looks like when the changes have been made. The text of the button has also been changed to 'Choose Device'

 

Capture21.PNG


Building EditScreen2

 

Select the edit form and delete it. In this scenario the form name is Editform1_1

 

Capture22.PNG

 

Add a new edit form by going to the Insert ribbon click on Forms and select Edit as shown below.

 

Capture23.PNG


Make sure the height and width of the new edit form has been adjusted leaving some room below for a button. Also rename the form to EditForm2.

 

Capture24.PNG

 

We now need to add 5 new data sources. One of them is a secondary list to save information and the remaining 4 are for the cascading dropdowns. Below is a screenshot of all the data sources.

 

Capture25.PNG


Click on the new EditForm2, select DataSource and start typing in 'radio' in the function. Thanks to PowerApps IntelliSence you should see 'Radio-To-Single-Line2'. Click on it. You should now see all the fields from that data source  appear on the right.

 

Capture26.PNG

 

Capture27.PNG


Add Title, MFR, Device, Model and Accessory. Below is a screenshot of what the screen and form looks like.

 

Capture28.PNG


We now need to link the two lists. To achieve that we are going to save the ID number of the first list as the title in the second list.

Select the PrimaryID data set field and unlock it.

 

Capture29.PNG

 

Change the default value to 'EditForm1.LastSubmit.ID'

 

 

Capture30.PNG


The steps to build the cascading dropdowns is described in detail in my 'Cascading dropdowns for a single line of text' blog. Make sure you follow all the steps which includes adding the original single line of text to save the selected values back to the SharePoint columns. In this case the values are saved to the 'Radio-to-Single-Line2' list.
The data connections have already been created. Once that is completed, below is what the form should look like.

 

Capture31.PNG
 
And here are the formulas for MFR, Device, Model and Accessory

 

MFR

Distinct(PAMFR , MFR)

 

Device

SortByColumns(Filter(PADevice, Title = ddMFR.Selected.Value), "Device", SortOrder.Ascending)

 

Model

SortByColumns(Filter(PAModel, Title = ddDevice.Selected.Value && MFR = ddMFR.Selected.Value), "Model", SortOrder.Ascending)

 

Accessory
SortByColumns(Filter(PAAccessory, Title = ddModel.Selected.Value), "Accessory", SortOrder.Ascending)

 

IMPORTANT!! If the Model dropdown values are the same as the MFR then select the Model data card value, go to the advanced setting on the right hand side, in  the Data section right below Items change the Value from MFR to Model. Below is a screenshot.

 

Capture32.PNG

 

Changes to the Edit Screen 2

 

In the EditScreen2, select Item and set the function as 'Defaults('Radio-To-Single-Line2'). WITHOUT THIS THE FORM WILL BE EMPTY WHEN ACCESSING THE EDITFORM2 SCREEN. Below is a screenshot of the formula.

 

Capture35b.png

 

Click on the EditScreen2 screen selected, change the OnVisible's 'Back()' to False. Below is a screenshot of how you find OnVisible. Note that nothing on the screen itself has been selected.

 

Capture34.PNG


Similar to the change we made on EditScreen1, in EditScreen2 we delete the select icon that exists on the top right and replace it  with a 'Submit' button on the bottom. The function of the button remains the same. Below is a screenshot

 

Capture33.PNG

 

Finishing touches

 

The DetailScreen1 by default shows the items from 'Radio-To-Single-Line' list, however, we also need to display the related item from 'Radio-To-Single-Line2' list. And since we relating the two lists using 'Radio-To-single-Line' list's ID column, we need to add that field to the detail form and move it to the top. Here is a screenshot of what that will look like. Note the data card value number of the ID field, we will be using that shortly to filter the data coming from 'Radio-To-Single-Line2' list

 

Capture35a.PNG

 

The data from 'Radio-To-Single-Line2' list will be added as a gallery. We will be using a vertical text gallery.

 

Capture35.PNG


After moving the gallery and renaming it, here is a screenshot of what the screen looks like.

 

Capture36.PNG

 

Set Items to 'Radio-To-Single-Line2'. This will connect the list to the new gallery.

 

Capture37.PNG

 

We need to add one more text control in the new gallery, this way we can show the respective MFR, Device, Model and Accessory. After adding the field and changing its format a bit here is what it looks like.

 

Capture38.PNG

 

We can improve upon this by adding the concatenate formula in the EditScreen2Gal. Here's a screenshot of the new gallery items. Notice the formula?

 

Capture39.PNG


Now that all the data from the secondary list is coming in and is formatted correctly, all we need to do is filter it. Remember the data card value number we just mentioned? We will now be using that to create a function to filter the data in the new 'EditScreen2Gal'. Here is the formula 

 

Filter('Radio-To-Single-Line2',Title=DataCardValue5.Text)

 

Capture40.PNG

 

The following video walks you through step-by-step on how to build the app described above.

 


Helpful links


 • Cascading dropdowns for a single line of text blog
 • Filter function
 • Sort and Sort-by
 • Gallery control 
 

Comments
by Administrator
on ‎03-20-2017 03:38 PM

WOW! Thank you for showcasing radio buttons from PowerApps to SharePoint lists! I'm definitely going to give this a go!

by Pavithra
on ‎05-04-2017 01:44 PM

This is excellent Post . I tried the steps, One step i am missing though is after i click on first screen, its not taking me to second screen. am i missing any step?

by Super User
on ‎05-04-2017 04:15 PM

Hi Pavithra,

Thanks for the compliment. You have to use the Navigate function to change screens. In this article, I've added the Navigate function to the submit button with 'On Select' as the action. 

by Pavithra
on ‎05-05-2017 06:30 AM

Thanks for reply. I couldnt find the step where Navigate is being used on Onselect. Can you help me locate that step? 

 

Also if you use navigate how will the first form data be submitted?

 

Thanks

Pavithra

by Pavithra
on ‎05-05-2017 01:09 PM

Please ignore my earlier email. I was able to find the Naviagte function to Edit screen 2 .  Thank you so much for wonderful post which helped to resolving a issue pending for a month.

by forbesn
on ‎11-22-2017 02:20 PM

This is very thorough  but I can't get radio buttons to work to edit an existing sharepoint item.  Your App creates a sharepoint list item but it doesn't edit an existing list item.  Is there a way to make it work to edit a list item.

 

I've tried setting the colum in the list just as text but then converting the form to use a radio button like your example. But it just displays the last selection made for any list item.  It isn't connecting to the list item to get its original value.  Is there a way to do that and have it display what is currently selected.  

 

I've also tried setting my SharePoint column to a choice field, using a dropdown.  I then add the column to the app and it does add a drop down list on the form.  However, it only seems to work every other time.  I get "Entry is required or has an invalid value" every other save. Any ideas why?

 

I'd prefer to use a radio button though if I could get that to work.

 

by forbesn
on ‎11-28-2017 06:39 AM

I got it to list the existing selection by referring back to the field on the browse screen.  (browseform.selected.browsefield).

 

However, I am getting "An entry is required or has an invalid value. Please correct and try again." on every other update attempt.  Ideas?

by forbesn
on ‎11-28-2017 07:25 AM

I found this post: https://community.powerapps.com/t5/PowerApps-Forum/Bug-An-entry-is-required-or-has-invalid-value/td-...

 

I search my form for any fields that had "true" for required.  Unlocked them and changed the required to false and now it is working fine.  How weird?

Meet Our Blog Authors