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.
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'
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.
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'
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'
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)
Give the app a name and then click on Create. For this demo 'Radio-To-Single-Line' is the app name as shown below
Below is a screenshot of a window that will temporarily appear while the app is being built.
You will also see this helpful quick tour. You can either skip or go through the tour.
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
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.
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)
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.
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.
Here is a screenshot of what it looks like once it is deleted. You can ignore the two warnings for now.
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.
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.
With the rbtnRequester selected, change the items function from 'RadioSample' to ["Administrator", "Manager", "Requester"], Below is a screenshot of what the
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
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.
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
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'.
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.
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'
Select the edit form and delete it. In this scenario the form name is Editform1_1
Add a new edit form by going to the Insert ribbon click on Forms and select Edit as shown below.
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.
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.
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.
Add Title, MFR, Device, Model and Accessory. Below is a screenshot of what the screen and form looks like.
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.
Change the default value to 'EditForm1.LastSubmit.ID'
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.
And here are the formulas for MFR, Device, Model and Accessory
Distinct(PAMFR , MFR)
SortByColumns(Filter(PADevice, Title = ddMFR.Selected.Value), "Device", SortOrder.Ascending)
SortByColumns(Filter(PAModel, Title = ddDevice.Selected.Value && MFR = ddMFR.Selected.Value), "Model", SortOrder.Ascending)
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.
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.
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.
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
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
The data from 'Radio-To-Single-Line2' list will be added as a gallery. We will be using a vertical text gallery.
After moving the gallery and renaming it, here is a screenshot of what the screen looks like.
Set Items to 'Radio-To-Single-Line2'. This will connect the list to the new gallery.
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.
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?
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
The following video walks you through step-by-step on how to build the app described above.