How I migrated my Access Web App to PowerApps - Part 2

by Super User ‎01-11-2018 05:29 PM - edited ‎02-09-2018 07:46 AM

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

 

Capture.PNG

 

We can also add the top title and an image on the right, similar to what we have in the Access Web Apps

 

Capture22.PNG

 

Step 1 - Build the vertical navigation.

Here is a screenshot of the vertical navigation.

 

Capture23.PNG

 

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

 

Capture24.PNG

 

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

 

Capture24a.PNG

 

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.

 

Capture25.PNG 

 

In this scenario the Vertical Gallery has been used since it already contains a Title and Subtle. The image has been deleted.

 

Capture26a.PNG

 

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.

 

Capture26b.PNG

 

Here is a combined screenshot of the four galleries

 

Capture26c.PNG

 Capture26.PNG

 

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.

 

Capture27a.PNG 

 

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'.

 

Capture27.PNG

 

Here are screenshots of the remaining Display forms and galleries.

 

Products

 Capture27b.PNG

Customers

 Capture27c.PNG

Orders

 Capture27d.PNG

 

We'll follow the same process, however, this time we'll add the Data table

 Capture28.PNG

 

picture4.png

 

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

 

Capture29.PNG

 

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

 

Capture210a.PNG

 

The Datasheet button will help us view all the items of the list in a data sheet format.

 

Capture210b.PNG

 

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

Capture210c.PNG

 

Select the trash icon will allow us to delete items

Capture210d.PNG

 

Finally selecting the pencil icon will allow us to edit items

Capture210e.PNG 

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.

 

Capture210f.PNG

 

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.

 

Capture211.PNG

 

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.

 

Capture212a.PNG

 

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

How I migrated my Access Web Apps to PowerApps - Part 1

How I migrated my Access Web Apps to PowerApps - Part 3

Comments
by Jason_AC
on ‎03-06-2018 09:20 PM

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

by Jason_AC
on ‎03-06-2018 09:39 PM

ignor emy previous comment, got it in the end

thanks

Meet Our Blog Authors