How I migrated my Access Web App to PowerApps - Part 2
This will be a multiple-part series on how I migrated my Access Web App to PowerApps. In this section I will focus on building the core design of the PowerApp and build the View Forms.
Here are our build steps
Step 1 - Build the vertical navigation similar to what we see in the Access Web App
Step 2 - Build the Galleries. We will be creating 4 galleries. The galleries will show the basic content from the Employees, Products, Customers and Orders list.
Step 3 - Build a view form and data table for each gallery. Hence we'll have a total for 4 data tables plus 4 view forms.
Step 4 - Adding buttons and icons. We'll be adding a List and Datasheet button to recreate the views we saw in Access Web Apps. We'll be adding a Add, Delete and Edit icons.
Step 5 - Finally, using Global variables we'll make the views of each View Form, Data table, buttons and icons dependent on the vertical navigation.
This PowerApp will contain only two screens. In this blog we'll be focusing on the first screen. We'll be using the Blank screen as shown below
We can also add the top title and an image on the right, similar to what we have in the Access Web Apps
Step 1 - Build the vertical navigation.
Here is a screenshot of the vertical navigation.
Each item of the navigation is a group, each contains the Star icon and a button. Hence to build the above navigation we have a total of four groups as shown below
Step 2 - Build the Galleries.
One of the first things we have to do is connect to the SharePoint Site and select the five SharePoint Lists as data sources. Here is a screenshot
Take a look at the screenshot below, in Access Web Apps we have a list. Our goal is to use Galleries to rebuild a list in PowerApps.
In this scenario the Vertical Gallery has been used since it already contains a Title and Subtle. The image has been deleted.
Note: Once you have created all the galleries make sure you keep their Position and Size the same. This will help in creating a professional UI for the PowerApp.
Here is a combined screenshot of the four galleries
Step 3 - Build a view form and data table for each gallery
In this step we are going to start adding Display forms to display the content of each gallery item. As shown below we have added a Display form and selected the Employees SharePoint list as the data source. I've also unselected the 'Snap to columns' option and then selected the required fields.
Here is a screenshot of how the Employee Display form looks like in the Screens section on the left, the content in the Employee Gallery in between and finally the content of the selected item on the right. I've named this Display form as 'EmployeeFormViewer'.
Here are screenshots of the remaining Display forms and galleries.
Products
Customers
Orders
We'll follow the same process, however, this time we'll add the Data table
Also, Initially when you've added both the Display form and the Data table you'll be able to see them both which makes it look congested, however, we'll seen fix that problem using Global variables. Below is a screenshot of what it looks like for now
Add Data tables for Product, Customers and Orders as well. They too will look congested.
Step 4 - Adding buttons and icons
Following are a set of buttons and Icons. We will need to have a total of 4 such sets, one for each table. Hence it is important to come up with a good naming convention.
Buttons
The List button will help us view the values of the selected List item. This will also be the default view
The Datasheet button will help us view all the items of the list in a data sheet format.
Icons
Each icon is infact a group of two icons, the secondary one being the Circle icon. This helps making the icons look very similar to they appeared to look like in Access Web Apps.
Selecting the plus icon will allow us to add items
Select the trash icon will allow us to delete items
Finally selecting the pencil icon will allow us to edit items
As mentioned earlier, we will need to have a total of 4 such sets, one for each table. Hence it is important to come up with a good naming convention. Below is a screenshot of what the buttons and icons were named. Also, positioning them is very important to make the UI user friendly. I've also provided a screenshot of what the X and Y coordinates should be.
Here is a screenshot of what your form will currently look like. As mentioned before it does look a little congested but in the next step we'll be adding the Global variables which will help make this look better.
Step 5 - Adding Global variables.
We are going to use a total of 8 Global variables, two for each table. One to view the default list and the other to view the data sheet. Here are all the Global variables. In the name itself you can see which one is for the table and which one for the Data Sheet.
EmployeeGalleryvar,
EmployeeDataSheetvar,
ProductsGalleryvar,
ProductsDataSheetvar,
CustomersGalleryvar,
CustomersDataSheetvar,
OrdersGalleryvar &
OrdersDataSheetvar.
To make it easier, I've provided you the formula for the Set function which will be used in the Vertical Navigation and the List and DataSheet buttons. Let's start with the Employees Navigation button and it's respective List and Datasheet buttons as shown below.
Here is the Set function formula for the Employees navigation button. As you can see only the EmployeeGalleryVar is set to true. This means when the Employees button is selected we'll only see the List view of the Employees. The same formula is added for the List button as well as the Add, Delete, Edit and Save icons
Set(EmployeeGalleryvar,true);Set(EmployeeDataSheetvar,false);Set(ProductsGalleryvar,false);Set(ProductsDataSheetvar,false);Set(CustomersGalleryvar,false);Set(CustomersDataSheetvar,false);Set(OrdersGalleryvar,false);Set(OrdersDataSheetvar,false)
Here is the formula for the employee's data sheet button. As you can see the formula is similar with only one difference, the EmployeeDataSheetvar is set to true.
Set(EmployeeGalleryvar,false);Set(EmployeeDataSheetvar,true);Set(ProductsGalleryvar,false);Set(ProductsDataSheetvar,false);Set(CustomersGalleryvar,false);Set(CustomersDataSheetvar,false);Set(OrdersGalleryvar,false);Set(OrdersDataSheetvar,false)
Here are the formulas for the remaining.
Products navigation, it's List button as well as the Add, Delete, Edit and Save icons
Set(EmployeeGalleryvar,false);Set(EmployeeDataSheetvar,false);Set(ProductsGalleryvar,true);Set(ProductsDataSheetvar,false);Set(CustomersGalleryvar,false);Set(CustomersDataSheetvar,false);Set(OrdersGalleryvar,false);Set(OrdersDataSheetvar,false)
Products' DataSheet button
Set(EmployeeGalleryvar,false);Set(EmployeeDataSheetvar,false);Set(ProductsGalleryvar,false);Set(ProductsDataSheetvar,true);Set(CustomersGalleryvar,false);Set(CustomersDataSheetvar,false);Set(OrdersGalleryvar,false);Set(OrdersDataSheetvar,false)
Customers navigation, it's list button as well as the Add, Delete, Edit and Save icons
Set(EmployeeGalleryvar,false);Set(EmployeeDataSheetvar,false);Set(ProductsGalleryvar,false);Set(ProductsDataSheetvar,false);Set(CustomersGalleryvar,true);Set(CustomersDataSheetvar,false);Set(OrdersGalleryvar,false);Set(OrdersDataSheetvar,false)
Customer's DataSheet button
Set(EmployeeGalleryvar,false);Set(EmployeeDataSheetvar,false);Set(ProductsGalleryvar,false);Set(ProductsDataSheetvar,false);Set(CustomersGalleryvar,false);Set(CustomersDataSheetvar,true);Set(OrdersGalleryvar,false);Set(OrdersDataSheetvar,false)
Orders navigiation, it’s list button as well as the Add, Delete, Edit and Save icons
Set(EmployeeGalleryvar,false);Set(EmployeeDataSheetvar,false);Set(ProductsGalleryvar,false);Set(ProductsDataSheetvar,false);Set(CustomersGalleryvar,false);Set(CustomersDataSheetvar,false);Set(OrdersGalleryvar,true);Set(OrdersDataSheetvar,false)
Order's DataSheet button
Set(EmployeeGalleryvar,false);Set(EmployeeDataSheetvar,false);Set(ProductsGalleryvar,false);Set(ProductsDataSheetvar,false);Set(CustomersGalleryvar,false);Set(CustomersDataSheetvar,false);Set(OrdersGalleryvar,false);Set(OrdersDataSheetvar,true)
Video
Take a look a this video which walks you through all the steps described above
In the next blog we'll look at how we can create a new Screen which will be used to add and edit items.
Helpful links
Comments
-
How I migrated my Access Web App to PowerApps - Part 2
ignor emy previous comment, got it in the end
thanks
-
How I migrated my Access Web App to PowerApps - Part 2
hi Darogael - i'm trying to follow the steps you took in migrating your access web apps to powerapps, however after exporting the app to Sharepoint Lists, i am unable to add those SP lists as a data source.
Error comes up saying sire cannot be found...
can you provide some tips on how to go around this issue?
thanks
*This post is locked for comments