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.

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

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

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

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.

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

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

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

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.

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

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

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

Disable the Delete / Cancel icon

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

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

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

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

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

Add

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

Delete

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

Edit

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

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.

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.

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

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

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.

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.

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