Display SharePoint Online List Columns in multiple screens in Microsoft PowerApps

This PowerApps SharePoint tutorial, I will explain, how to display SharePoint Online List columns or fields in two screens in Microsoft PowerApps. And then We will see how to navigate from one screen to another new screen in PowerApps. We will see how to save PowerApps form data within a button click to a SharePoint Online list.

Here I have created a SharePoint List named “TsinfoEmployee”. I have added some columns to the “TsinfoEmployee” list in SharePoint online site.

powerapps examples
powerapps examples

Here I will design a multiple screens, where I will display a few fields in one screen and in another screen I will display a few other fields in PowerApps.

Check Out Microsoft PowerApps and Flow Video Training Course (Lifetime Access)

If you are new to PowerApps, then read a tutorial on Create your First form using Microsoft PowerApps in SharePoint Online.

I have created a new PowerApps form from the SharePoint “TsinfoEmployee” List in the SharePoint Online site. From the ribbon option(only in the modern look) create a new PowerApps form.

Now the PowerApps designer page will open. In the Left side panel we can able to see all the page. For example: Edit form, Details form and browse form. 

powerapps save data to sharepoint list
powerapps save data to sharepoint list

I have added one more screen in the PowerApps form and renamed as “NewForm”. Here I had added the New form of blank type form from the Insert option(Top bar).

I have added two text boxes and two labels and one button click in the PowerApps form. Renamed all the control with proper names.

powerapps multiple screens
powerapps multiple screens

In the Edit form of old screen, I have added one button click and rename as “NavigateToNextScreen” in the PowerApps form.

In the Formula bar, I have added the formula Navigate(NewScreen, None) in the OnSelect property in the PowerApps designer page. So when we click on Button click then a new screen will be going to display.

powerapps button onselect change screen
powerapps button onselect change screen

In the New Screen, I have added the button click in the PowerApps form. In the button click I have written the formula SubmitForm(EditForm1). With in the Click the data will be saved.

powerapps navigate button
powerapps navigate button

I have opened the Preview of the PowerApps form. In the preview, in the Edit screen, I can able to see Title, EmployeeName, and Designation only three fields.

powerapps save data to sharepoint list
powerapps save data to sharepoint list

When we clicked on Navigate to new screen, the new screen will appear. In the New form, I have added two columns: HomeAddress & Salary like below:

Finally we, on Submit. Now Item will be created in SharePoint Online list. You can see the PowerApps form looks like below.

powerapps submit to sharepoint online list
powerapps submit to sharepoint online list

In the Browser screen, we can able to see our data is saved to the SharePoint Online list and you can see using PowerApps form. When we opened the SharePoint list our item will be saved, we can able to see in SharePoint list.

powerapps multiple screens
powerapps multiple screens

You may like following PowerApps tutorial:

In this PowerApps tutorial, we saw one example of how to display SharePoint list column in two PowerApps form screens. We saw how to navigate from one screen to another screen in PowerApps. We also learned on the button click of PowerApps form how the item is stored in the SharePoint List.

>