Radio buttons and saving fields to multiple SharePoint lists using PowerApps

Daniel ChristianTue, 02/06/2018 - 10:08

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

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

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

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

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

 Cap5

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

 Capt5

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

 Capt7

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.

 Capt8

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)

 Capt9

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.

Capt10

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.

Capt11

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

Capt12

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.

Capt13 

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.

Capt14

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

Capt15

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

Capt16

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.

Capt17

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

Capt18

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'.

Capt19

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.

Capt20

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'

Capt21

Building EditScreen2

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

Capt22

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

Capt23

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.

Capt24

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.

Capt25

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.

Capt26

Capt27

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

Capt28

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.

Capt29

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

Capt30

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.

Capt31

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.

Capt32

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.

Capt35b

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.

Capt33

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

Capt34

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

Capt35a

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

Capt35

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

Capt36

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

Capt37

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.

Capt38

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?

Capt39

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)

Capt40

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