Build Low-Code and No-Code Solutions With PowerApps

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 a PowerApps for an existing list in SharePoint Online.
 
Let's get started on how we can create a fully functional PowerApps based on a standalone application. I am going the cover all of the steps throughout multiple articles.
  1. Design Home Page Screen
  2. Navigation among screen
  3. Item List View Screen
  4. Item Detail View Screen (Going to cover in this article)
  5. Item Detail Edit Screen (Going to cover in this article)
  6. New Item Screen
  7. Search Content
  8. Cascade Lookup Control
  9. Validation based on formula
  10. Hide and Show Control based on formula
 
In this article, I am going to talk about the below points:
  • Navigation among screens.
  • Item detail view screen
  • Item detail edit screen.
Build Low Code And No Code Solution With PowerApps
Prerequisites
 
Since I already explained the below points in detail, kindly refer to this article, where I explain the below points:
  1. Build a Home screen
  2. Add a List view screen
  3. Add a connection to SharePoint online.
  4. Add navigation among the screens.
Let's get started with next steps,
 
Step 1 - Add a Display screen with SPO list connection.
  1. Select and click to add a new screen
  2. Rename the screen "Flight Display Screen"
  3. Select and click to add a display form.
  4. FormViewer1 will appear in the tree view and a blank canvas without datasource connection.
  5. Select the form view canvas and click "Connect to Data"
  6. Select the data source from the Form View Property section. 
Build Low Code And No Code Solution With PowerApps
 
Step 2 - Design Display screen 
  1. Select DataSource as list name i.e. Flight Details.
  2. Set the Column Layout (i.e. 2) and Layout as vertical.
  3. Add a Label for the heading of the screen and change the text to "Flight Detail View Screen".
  4. Add a Home icon from the Icons section to navigate to the home screen.
  5. Add an Edit icon from the Icons section to navigate to the Edit Screen.
  6. Add the Close icon from the Icons section to navigate to the previous screen. 
Build Low Code And No Code Solution With PowerApps
 
Step 3 - Add Navigation for Home Icon
 
Select the Home icon and write a function, i.e:
  1. Navigate(HomeScreen)  
On a click of the home icon, it will navigate to the home screen.  
 
Build Low Code And No Code Solution With PowerApps
Step 4 - Add Navigation for Edit Icon
 
Select the Edit icon and it will write a function, i.e:
  1. Navigate(FlightEditScreen)
On a click of the edit icon, it will navigate to the flight edit screen
 
Build Low Code And No Code Solution With PowerApps 
 
Step 5 - Populate View Screen on Item Selection
  1. Select FormView
  2. Set the function for item property i.e. "DataTable1.Selected". This data table exists in the list view form. View get the selected item based on this property.
  3. Once the item property is set, the selected item value appears in the view screen. 
 Build Low Code And No Code Solution With PowerApps
 
Step 5 - Add and Populate Edit Screen on Item Selection
  1. Select and click to add a new screen
  2. Rename the new screen "Flight Edit Screen"
  3. Add an Edit from the Form Section
  4. Add a data source from Form Property section (i.e. List Name)
  5. Select a Form and set the item property to "DataTable1.Selected.
  6. As the item property is set, select the item value to start appearing in the Edit screen.
Build Low Code And No Code Solution With PowerApps 
 
Step 6 - Add a Save icon functionality on the Edit Screen
 
Select the save icon and write a function on On Select:
  1. SubmitForm(Form1);Navigate(FlightListView);  
It will save the data to SharePoint Online List and redirect the user to the list view screen. The user will get an updated record on the list view screen.
 
Build Low Code And No Code Solution With PowerApps 
 
Step 7 - Define navigation from List View Screen
 
Select the Flight List View screen, followed by DataTable1
 
Select the first column (i.e. Flight Name)
 
On Select property, write the below function to navigate to the Flight Display Screen
  1. Navigate(FlightDisplayScreen)  
Build Low Code And No Code Solution With PowerApps 
 
Step 8 - Save , Publish and Test
  1. Save the application, click file -> Save.
  2. Click save button to save the application
  3. Click the Publish button to publish the application and make it available to other intended audiences.
Press F5 or click the published version of the app to run.
 
The power apps home screen will execute like this and select for the click first image.
 
Build Low Code And No Code Solution With PowerApps 
  • List View Screen  | Select the item to navigate to the item detail view screen:
Build Low Code And No Code Solution With PowerApps
  •  Item Detail List View Screen | Click the Edit icon to navigate to the exit screen
Build Low Code And No Code Solution With PowerApps
  •  Item Edit View Screen:
Build Low Code And No Code Solution With PowerApps
 
I hope that you enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.