cancel
Showing results for 
Search instead for 
Did you mean: 
darogael

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

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 a new screen which will be used to add and edit items.

 

Here are our build steps-

Step 1 - Add an additional icon

Step 2 - Add new Global variables

Step 3 - Create the Add and Edit screen

Step 4 - Add the Edit forms 

Step 5 - Add conditions which will allow the icons to be used only when appropriate

 

Step 1 - Add an additional icon

We now have the need to add a Delete icon which will be used when either adding or editing. This icon will be in edit mode in the Add and Edit screen only. We'll look at that in detail in Step 5.

 

Below is a screenshot which shows the new cancel icon. It is built the exact same way as the other 4 icons. The formula for Visible which includes the variables built and describe in Part 2 applies to these new icons as well. This was explained in Step 5 of the Part 2 blog.

 Capture31.PNG

 

Step 2 - Add new Global variables.

These are new Global variables we're adding in addition to the variables we built in Part 2. These variables will be used primarily for the AddEditScreen. The Set function to build these global variables use the OnStart function.  Make sure you  ViewScreen selected first.  The initial false value of each variable is what disables and greys out the Save and Cancel icons in the ViewForm screen

 

Capture38.PNG

 

Set(EmployeesAddEditVar,false);Set(ProductAddEditVar,false);Set(CustomersAddEditVar,false);Set(OrdersAddEditVar,false)

 

Step 3 - Create the Add and Edit screen

The original Screen1 has been renamed to ViewScreen. The Add and Edit screen should look the exact same as the original ViewScreen. Hence we simply duplicate the ViewScreen and then remove the unwanted sections for the new AddEditScreen

 

Capture30.PNG

 

In the new AddEditScreen, you can delete the Tables and Forms highlighted below. We'll be creating the Edit form instead.

 

 Capture33.PNG

 

Step 4 - Create the Add / Edit Employees form.

Confirm that you are in the AddEditScreen.

On the top horizontal table select the Forms dropdown and choose Edit. Select Employees as the Data Source.

 

Capture34.PNG

 

Rename the form, in this example I have renamed the form to AddEditEmployeeForm. I've moved the form to a desired location and only selected the fields I need. Here is a screenshot of what it looks like

 

Capture35.PNG

 

Next, select Item and type in EmployeeGallery.Selected as the formula. This is required when editing an item.

 

Capture36.PNG 

 

Now that you have the new form in the AddEditScreen, go back to the ViewScreen, select Employee from the left vertical navigation and then make the changes to the icons. As you see below, in the ViewScreen the Save and Cancel icons are Dim Grey colored and also disabled. The Add, Delete and Edit icons are active. We can achieve this with a combination of the Global variables we created above and the DisplayMode function.

 

Step 5 - Add conditions which will allow the icons to be used only when appropriate

 

As mentioned before the initial false value of each variable is what disables and greys out the Save and Cancel icons in the ViewForm screen

 

Disable icons in the ViewScreen

 

Capture37.PNG 

 

Disable the Save icon

Below is a screenshot of the EmployeeSaveGroup that was created in Part 2. If you recall each icon is grouped with the circle icon. We first need to change the color of each icons individually then we select the group and change the DisplayMode to disable it.

 

Capture39.PNG

 

To change the color first make sure you select the circle icon only and then add the formula for BorderColor. Below are screenshots.

 

Capture310b.PNG

Capture310a.PNG 

 

Next, click on the save icon (Which looks like a floppy) and then add the formula for Color. Below are screenshots.

 

 

Capture311a.PNG

Capture311b.PNG 

 

Finally, Select the entire EmployeeSaveGroup and then change the formula for DisplayMode as shown below.

 

Capture310c.PNG

  

Disable the Delete / Cancel icon

We follow the similar steps as we did before to disable the Delete / Cancel icon

 

Capture312a.PNG 

 

First, make sure you select the circle icon only and then add the formula for BorderColor. Below are screenshots.

 

 Capture312b.PNG

 

picture1.png

 

Next, click on the cancel icon (which looks like X) and then add the formula for Color. Below are screenshots.

 

Capture312c.PNG

 

picture1a.png

 

Finally, make sure you select the entire EmployeesCancelGroup and change the DisplayMode formula as shown below

 

 Capture312d.PNG

 

You will have to follow the exact same steps as described above to disable the icons for Products, Customers and Orders.

 

Disable icons in the AddEditScreen

 

Before we look at the icons in the AddEditScreen, we need to look at the formulas for the Add, Delete and Edit icon in the ViewScreen. These formulas not only change the screens but also change values of variables which affect the color and display of the icons in the AddEditScreen. Here are screenshots of the OnSelect function for each of the icons

 

 Capture313.PNG

 

Add

In the screenshot below you can see the Add icon is connected to the EmployeeAddGroup. You can also see it's OnSelect formula.

 

picture5.png 

 

Delete

In the screenshot below you can see the Delete icon is connected to the EmployeeDelGroup. You can also see it's OnSelect formula

 

picture6.png 

 

Edit

In the screenshot below you can see the Edit icon is connected to the EmployeeEditGroup. You can also see it's OnSelect formula.

 

picture7.png

 

Now let's take a look at the icons in the AddEditView screen. As you can see below the Add, Delete and Edit icons are greyed out which means they are disabled for obvious reasons. The Save and Cancel icons are active.

 

Capture315.PNG 

 

We'll go over the formulas for Add. The Delete and Edit are the exact save.

 

Add

Select the Add button, this will highlight the AddEditEmployeeAddGroup. Then select the Circle icon and add the formula for BorderColor.

 

Capture316a.PNGCapture316b.PNG

 

 

Next, Select the Add icon (which looks like +) and add the formula for Color

 

 picture8a.pngpicture8b.png

 

 

Finally, select the entire AddEditEmployeeAddGroup group and add the formula for DisplayMode

 

picture9.png

 

Follow the same steps for Delete and Edit.

 

Save

 

Here is the OnSelect formula for the Save icon. As you can see it saves the data and also sets a value to the EmployeeAddEditVar. This value is important for changing the color and disabling the icon when in ViewScreen.

 

picture10.png

 

Cancel

 

Here is the OnSelect formula for Cancel icon. As you can see it resets the edit form and sets a value to the EmployeeAddEditVar. This value is important for changing the color and disabling the icon when in ViewScreen.

 

picture11.png

 

Follow the same steps for Customers and Orders as well. Currently PowerApps does not have the option to save images to SharePoint and hence when it comes to Products you will have to manually add the images to the Product_Images as and then add it's link to the Products list. However, if you are interested in building your own custom data connection to save images then you can refer to the detailed instruction video by Paul Culmsee. Here is the link

 

Video.

 

This video walks you through the steps described above. The video shows how the Add Edit is created for Employees and Products only.

 

 

Helpful links

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

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

Comments

Love this! Smiley Happy

it's amazing and we solar Movies addon on Kodi welcome this, and we too will migrate our Access web apps to power apps. Thanks for posting such article.

 i have zero clue to what i am doing with power apps i have stumbled across this article and read it tonight but it seems like this is what i need i have a access web app that i use daily to track users of cell phones here at work and would like to convert it to power apps so that my team can access it and update it. please send help

Hi Mike.

 

Here are some good places to start:

Getting Started guide - https://docs.microsoft.com/en-us/powerapps/getting-started

PowerApps guided learning - https://docs.microsoft.com/en-us/powerapps/guided-learning

Function and formula reference - https://docs.microsoft.com/en-us/powerapps/formula-reference

 

What kind of tracking will be done with the app? What platform is it developed on at the moment if you say you have to convert it?

 

I keep inventory on issued mobile phones and tablets any device that is assigned a cell phone number. this power app option will be used primarly on a Windows Desktop environment and would like to set up a form\forms like i used in the access web app and be able to enter new devices as well. heres a screen shot of the access web appSample.JPG

 

Yes, this could be a PowerApp for sure!

Here is another great blog about a basic training app that you can get your hand dirty with.

 https://powerusers.microsoft.com/t5/PowerApps-Community-Blog/PowerApps-Training-App-new-way-to-learn...

 

Anonymous

I have been converting my access database to powerapps using these steps.  I am trying to figure out how to get the correct addedit card visible when I change views.  It is showing an overlap of each addedit screen.  Is there something with the addedit global variables I am missing?

Anonymous

Hello, i dont seem to see "export to sharepoint lists" in the settings cog. I only see customize in Access. Is there a reason why this is missing in Sharepoint 2013? I have full control over the SP sites. 

 

thanks