Steps to Build a PowerApp Screen, Connector And Navigation

Introduction 

 
PowerApps is an enterprise service that lets you connect, create, and share business apps with your team in minutes, using any device. You can create  PowerApps for an existing list in SharePoint Online.
 
Let's get started creating a fully functional PowerApps based standalone application. I am going to cover all of the below-mentioned steps throughout multiple articles.
  1. Design Home Page Screen
  2. Navigation among screen
  3. Item List View Screen
  4. Item Detail View Screen
  5. Item Detail Edit Screen
  6. New Item Screen
  7. Search Content
  8. Cascade Lookup Control
  9. Validation based on formula
  10. Hide and Show Control based on formula

Overview

 
In this article, I am going to talk about the first three points:
  1. Design Home Page Screen
  2. Navigation among screen
  3. Item List View Screen
Step To Build PowerApp Screen, Connector And Navigation
 
Step1 - Log in to PowerApps Portal
  1. Login to https://web.powerapps.com
  2. Select Apps
  3. Select New app and followed by Canvas 
Step To Build PowerApp Screen, Connector And Navigation
 
Step 2 - Design Home Screen
  1. Select New Screen and Click to Add
  2. Rename the newly added screen; i.e. Home Screen
  3. Select Label and Click to Add
  4. Add three more label sections as added text as given in image.
  5. Change the text with "Welcome to Admin Screen", font-weight and background color, as per your desired look and feel.
  6. Select Media and opt for image for option, then click to add (three times)
  7. Select any image icon and select image from right hand side properties. Set size and positioning as per your desired look and feel.
Step To Build PowerApp Screen, Connector And Navigation
 
 Step 3 - Add New Screen and Data Table
  1. Add a ListView Screen, Selecta  New screen and then click to add.
  2. Rename the screen with Flight List View.
  3. Select the Data table and click to add.
  4. The DataTable will be available under the Flight List View Screen
  5. The DataTable blank section will appear in the middle of the screen. 
Step To Build PowerApp Screen, Connector And Navigation 
 
Step 4 - Connect to a data source i.e. Site URL
  1. Enter SharePoint Online Site URL
  2. Select Connect to get connect with the SPO site. 
Step To Build PowerApp Screen, Connector And Navigation 
 
I have created a list in a SharePoint Online site with dummy data. Below is the screenshot for reference:
 
Step To Build PowerApp Screen, Connector And Navigation 
 
Step 5 - Connect to a data source i.e. List Name
 
Select List name and data will start appearing immediately into the selected database. 
 
Step To Build PowerApp Screen, Connector And Navigation 
 
 Step 6 - Set Navigation from Home to List View Screen
  1. Select home screen and image
  2. Select image into the canvas area
  3. Select the property "On Select " from the dropdown.
  4. Add formula to navigate to different screen

    Navigate(FlightListView)  
     5. Once the user clicks the image, it will navigate the user to the List View Screen
 
Step To Build PowerApp Screen, Connector And Navigation
 
Step 6 - Save, Publish and Test 
  1. Save the application, click file -> Save.
  2. Click save button to save the application 
  3. Click on the publish button to publish the application and make it available to your intended audience.
Press F5 or click the published version of the app to run.
  • Power Apps home screen will execute like this.
Step To Build PowerApp Screen, Connector And Navigation 
 
 Once flight details are selected, a List view screen will appear.
 
Step To Build PowerApp Screen, Connector And Navigation 
 
I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article!