Power Apps is the platform of choice for building business solutions using a low-code method. This approach enables the rise of the citizen developer, a being inside every organization who is keen on learning technology, which also brings the expertise of the business process to which this person belongs.

Canvas apps allow the creation of pixel-perfect implementations of user interfaces. As the name suggests, they bring a variety of tools to build any imaginable design into your applications, allowing you to design and develop apps of any type, whether a critical business system or a simple tracking application.

During this chapter, we will discover how to create a set of applications that will give you an insight into different styles when building canvas applications: standalone and embedded. We will also learn how to set up different types of data sources for our applications.

This chapter consists of the following recipes:

• Discovering best practices when building canvas apps
• Creating an incident tracking solution – setting up the data source
• Creating an incident tracking solution – building the user interface
• Embedding an expense tracking list with SharePoint list Power Apps
• Creating a canvas app from existing data

Setting up data sources, defining business process flows, creating user interfaces; all these tasks are pieces of an application-building process. These pieces come together to accomplish one main goal: to build a solution that solves a specific need.

One of the things you need to consider is the maintainability of your app. Whether fixing bugs or adding new features, using best practices is always a good idea. No matter your technology, well-documented code is easier to maintain.

Even though Power Apps is a low-code platform, you must consider certain things before building applications. Like any other developer team, you need to establish code standards. These standards allow your team to be more productive by setting predefined patterns for variable naming, control usage, and coding methodology.

Variable naming

Proper naming gives your developers instant insight into the scope of your variables. For example, if a variable name prefix starts with lcl (short for local), it means its value will only be available on the current screen. On the other hand, using gbl (short for global) means that this variable is accessible across the whole application.

These examples might seem trivial, but if another developer needs to maintain your app or if your app serves as a template for other apps in your organization, setting these patterns from the start can help the application-building process and maintainability.

Control usage

One of the vital elements of an application’s success is performance. If an application is slow to start or takes several seconds to perform a task, it hurts user adoption.

Here are a couple of examples of this:

• A great-looking app that uses many controls to build its user interface but hurts performance each time the screens get rendered.
• Displaying data to the user using a gallery inside a gallery. This approach might be tempting to present master-detail data, but this would be a significant slowdown in your application.

To avoid this, you need to learn the performance points of your platform. In Power Apps, one of the main recommendations for improving responsiveness is to reduce the number of controls.

Coding methodology

This concept describes a set of rules to regulate the development process in a low-code team. Your solution infrastructure can also help you make an informed decision on how to build your application:

• If you have data that rarely changes, you can create collections to avoid round-trips each time data is required. Even more, if you have data that never changes, you can import this as static data inside your app for speedier access.
• Taking advantage of the features available in your data source can significantly improve your application performance. For example, when using Dataverse or a relational database, there is a significant difference when querying data if you use data source views instead of building the actual query in your application logic, especially if it needs complex relationships. Using these views gives you cleaner code while also enhancing performance. This improvement relies on the data source engine as it is the one that executes the data processing instead of the application itself.

These are examples of practices you can coordinate with your team when building apps. For a detailed list of best practices, please refer to https://powerapps.microsoft.com/en-us/blog/powerapps-canvas-app-coding-standards-and-guidelines/

Tracking processes is a necessity for customers everywhere. As in any development process, the first step is to gather all the requirements needed to fulfill the business need; this will then help us design the data structure to support our application.

As for the data source, this recipe will set up the required fields in a SharePoint list while also applying certain settings to make it as performant as it should be.

Getting ready

Before diving into developing solutions with Power Apps, you will need a Microsoft 365 subscription. Please refer to the Preface section for suggestions on getting a playground to build your apps.

We will use SharePoint as the data source for this recipe, so we will start by creating a list. The actual list creation process is pretty straightforward, leaving plenty of time for our application design.

SharePoint Online performance considerations

When working with SharePoint Online, you need to remember that we are working on a web application with specific response and performance levels to provide the best user experience. To meet this, Microsoft has set a view threshold of 5,000 elements per list. Even though a list can hold up to 30 million items, querying data exceeding this limit will result in platform errors, making the list unresponsive.

These are a few recommendations to keep your lists performant:

• Set an index for the columns you wish to filter. Remember to do this beforehand since you cannot change it if you have exceeded the threshold.
• Prepare views for lists that might carry a large number of items by segment. Examples can be categories, years, and departments.
• Build your views with fewer than 12 People, Lookup, or Managed metadata fields to avoid performance issues.

For reference on this subject, check out the following links:

• https://support.microsoft.com/en-us/office/manage-large-lists-and-libraries-in-sharepoint-b8588dae-9387-48c2-9248-c24122f07c59
• https://support.microsoft.com/en-us/office/use-filtering-to-modify-a-sharepoint-view-3d8efc52-0808-4731-8f9b-3dfaeacea3d4

How to do it…

1. Go to your SharePoint site. We will need to create two lists.
2. Select + New and then List. This action will open a dialog with several list templates for you to select. Click on Blank list, input Clients as the Name, leave the Description field blank, and click on Create. This action will create a list with a default structure:

Figure 1.1: List creation procedure

3. To add and update columns, click on the gear icon in the top-right corner and select List settings. This action will open all the configuration options for this list, but we will be focusing on the Columns section.
4. First, click on the Title column to edit it. We are doing this for user interface reasons. This field lets you open the selected record quickly from the list view, so we will set it as the client’s name. Once it opens, rename the column name to Name and click OK.
5. To add the rest of the fields, click Create column and set the column name and type as seen in the following table:

Table 1.1: Clients list columns

6. When adding the Address column, specify the type of text to be Plain text to prevent formatting issues later when designing your app. We need to make this change because, otherwise, SharePoint will store this data in HTML to maintain the formatting and will make the text look different from the rest of the app.
7. Repeat steps 2 and 3 for the Incidents list. Rename the Title column to Incident and set the columns as seen in the following table:

   Column name	Column data type	Required
   Incident	Single line of text	Yes
   Customer Name	Lookup	Yes
   Date	Date and Time	Yes
   Priority	Choice	Yes
   Comments	Multiple lines of text	No

   Table 1.2: Incident list columns

   The Choice type means that it will use a list of items to choose from, and the Lookup type indicates that this column will link to another list that holds another set of data. In this case, we will use this column to relate the incidents to the clients.

8. To add the Customer Name column, select the Lookup type and from the Get information from dropdown, choose the Clients list we created before. Leave the rest of the options as the default.
9. For the Priority column, select the Choice type and replace the choices with High, Medium, and Low. Set the Default value as Low
10. Lastly, change the text type to Plain text for the Comments column.

Now that we have our lists in place, let’s see how this list and its relationships come together.

How it works…

After setting up our data source, we can now start entering some test data to use in our app.

1. Click on the gear icon in the top-right corner, select Site contents, and select the Clients list:

Figure 1.2: Site contents option

2. Now, let’s click on + New to add some random test data:
   • Name: Yennu Enterprises
   • Address: One Yennu road
   • Phone: +1 555 800 5555
   • Email: sales@yennu.com
3. Add as much data as you like. Repeat the same steps with the Incidents list by clicking on the gear icon and selecting the list from Site contents.
4. For Customer Name, you will see data loaded from the Clients list, and the Priority column will let you choose from the previously defined elements:
   • Incident: Failure in the programming of the executive elevator
   • Customer Name: Yennu Enterprises (link)
   • Date: 11/17/2020
   • Priority: High
   • Comments: The elevator returns itself to the last floor when idle.
5. Again, add as much data as you want. And now, we are moving forward to the next section, where we will build an app from this data structure.

Before designing interfaces, we must ask ourselves which requirements our application will solve. This analysis will help us decide which technology we will use, what infrastructure holds every piece of our solution, and even how our end-users will consume it.

Getting ready

With the help of the previous recipe, we have the data source section of our infrastructure solved. It’s time to leverage Power Apps to automate the creation of the building blocks of our application.

Power Apps deeply integrates with SharePoint as a tool to build solutions rapidly with its low-code principles. This integration allows the creation of a completely functional application in a few steps.

How to do it…

1. Go to the SharePoint site that has your lists. Click the gear icon in the top-right corner, select Site contents, and select the Incidents list.
2. On the list’s toolbar, select Integrate | Power Apps | Create an app. This action will open up a dialog asking for the name of your application:

Figure 1.3: Power Apps integration inside SharePoint

3. After a little while, a brand-new application gets created with the base functionalities: data manipulation, search, listing, and sorting. It’s now time to polish the application to have the desired results.
4. First, let’s edit the application title to be different than the list’s name. Go to Tree view, expand BrowseScreen1, and select the LblAppName1 label. Change the label’s value on the right pane by changing the Text value. Do the same for the rest of the screens.
5. If you followed the example list data, you might see that some of the incident’s text is not complete. To fix this, select the Title1 label from BrowseScreen1 and, in its properties, deselect Wrap. This change will add an ellipsis, making the user aware that there is more information:

Figure 1.4: Disabling wrap for long text

6. Next, let’s improve EditScreen1 to allow more space for the comments data card. At this moment, we won’t be using the attachments data card, so by expanding EditForm1 and selecting Attachments_DataCard1, we can uncheck its visible property on the properties pane.
7. Increase Comments_DataCard2’s Height value and then increase the DataCardValue10 control to match the new size, and finally, set the Mode property to Multiline to fix the text’s vertical alignment. Do the same for the Incident data card if you want it to have more space as well.
8. Finish up by changing the colors, fonts, and control alignment to match your style. Chapter 6, Improving User Experience, will cover some techniques to apply a style makeover to your application.

How it works…

Now that we have created an application from SharePoint data, we can take it for a test drive. Power Apps Studio gives you a preview functionality for testing. You can do it in two ways:

• Go back to BrowseScreen1 and then press the play button in the top right of the Studio interface. This action will execute the application so you can interact with it, just as if you were running it from your device of choice.

Figure 1.5: Power Apps Studio preview feature

• Press the Alt key (Option on a Mac) to test a particular control. For example, if you press Alt and click on a button, it will perform its OnSelect action. This way, you can test a specific control without leaving the design mode of the studio.

This application is now ready to perform incident tracking for your organization. You can now test it by creating new incidents or editing existing ones. The Power Apps template should have already taken care of the core functionality, so verify your specific requirements, such as maximum text length, user interface design changes, and the like. Making subtle user interface changes such as font names and sizes can improve the overall look of the application:

Figure 1.6: User interface changes for the incident tracking solution

Earlier, in the Creating an incident tracking solution – setting up the data source recipe, we configured our SharePoint data source. We will use the same steps to create our data source for this recipe.

Getting ready

Planning for this data source requires the creation of related columns to track expenses. As a template, we could use the following options:

• Projects: This list will hold project information, which will help us link the fees and the customer who owns the project. We will use the customer list created in the previous recipe for this connection.
• Expenses: This list will save the information related to the expense.

How to do it…

1. Go to the desired SharePoint site and create the Projects list by selecting + New and then List:

Figure 1.7: List creation process

2. Set the name to Projects and once the list gets created, click on the gear icon at the top right and select List settings. Add the following columns by clicking on the Create column link inside the Columns section:

   Column name	Column data type	Required
   Name	Single line of text	Yes
   Client	Lookup	Yes

   Table 1.3: Projects list columns

   Click on the gear icon at the top right and then Site contents to create the expenses list. From there, select + New | List from the toolbar. Set the name to Expenses and use the following columns:

   Column name	Column data type	Required
   Expense	Single line of text	Yes
   Date	Date	Yes
   Category	Choice	Yes
   Project Name	Lookup	No
   Amount	Currency	Yes
   Comments	Multiple lines of text	No

   Table 1.4: Expenses list columns

3. For the Category column, use these choices as an example: Travel, Transport, Supplies, and Meals. Add as much example data to the list as you like.
4. Click on the gear icon in the top-right corner, select Site contents, and select the Expenses list.
5. On the list’s toolbar, select Integrate | Power Apps | Customize forms. This action will automatically create an app based on the list structure. This time, it will build an app with only one form and one particular control called SharePointIntegration:

Figure 1.8: SharePointIntegration control inside Power Apps

6. Make relevant changes to your app, such as increasing the comments’ height, resizing the attachments’ control, and making style changes.
7. Save and publish your app.

How it works…

As you can see, the new application differs from the one created earlier because this one gets embedded inside the SharePoint list. It replaces the regular list’s data entry mechanism by displaying the Power App whenever you want to view, edit, or add new records:

Figure 1.9: SharePoint list Power App

This integration gets done by the SharePointIntegration control mentioned earlier. It acts as a bridge between SharePoint and Power Apps to catch the data events (view, create, and edit) while also allowing us to handle the save and cancel events:

Figure 1.10: SharePointIntegration actions

These actions are regular code blocks that get triggered depending on each event.

Embedding Power Apps inside a SharePoint list gives us the flexibility to control how the data gets registered, improve the data validation, and even allow connections to other services besides SharePoint, just to name a few examples.

There’s more…

Think outside the box when building embedded apps. They are not only there to improve data entry forms. You can create full-fledged solutions inside your lists. Please refer to the following example showcased on the Power Apps blog: https://powerapps.microsoft.com/en-us/blog/island-council-of-tenerife-organizes-community-events-using-the-power-platform

Embedding Power Apps in SharePoint lists is just the tip of the iceberg. There are many more scenarios where you can enrich your current platforms by integrating Power Apps: Microsoft Teams and SharePoint pages, to name a couple. Want to know more? Please refer to Chapter 7, Power Apps Everywhere, to view more recipes that extend the use of Power Apps.

Power Apps is the ideal choice when building enterprise solutions. These solutions are often needed to improve a particular process, especially when it comes to data handling. Sometimes, you will start from scratch, but most of the time, the data structure will already exist, just waiting for a robust and flexible application to handle it.

For these situations, there are some ready-made processes in the Microsoft ecosystem that allow the creation of applications from a particular set of data. We will discover these from Azure, SharePoint, and the Power Apps platform itself.

Getting ready

Azure is a platform that provides a wide range of cloud services for all kinds of scenarios, such as application development, data analysis, and cognitive services. When working with Azure, you will need to have an active subscription. To test the capabilities of this platform, you can apply for a free account by signing up here: https://azure.microsoft.com/en-us/free/

As this recipe requires starting from data, we will use an Azure SQL database. If you don’t have one already, please follow the steps of this quickstart to create one: https://docs.microsoft.com/en-us/azure/azure-sql/database/single-database-create-quickstart?tabs=azure-portal

How to do it…

To gather data from an existing Azure SQL database, take the following steps:

1. Go to the Azure portal, https://portal.azure.com, and from the main search, enter SQL databases and select the service from the list, as seen in the following screenshot:

Figure 1.11: Azure SQL databases

2. A list of databases will appear for you to pick. Select the one that has the data needed for your application. This action will open the configuration page, sometimes called a blade, with all the settings to configure the database.
3. On the left pane of the configuration page, you will find a section called Power Platform, in which you can start working with any of the services available:
   • Power BI, to connect and visualize the data from this database.
   • Power Apps, to use this database as one of the data sources of your application.
   • Power Automate, to automate processes using SQL server templates.
4. Select Power Apps and then Get started, as seen in the following screenshot:

Figure 1.12: Power Apps option in Azure

5. The Azure portal will open a Create an app form to gather the required settings for your app. If this form is disabled, it means that you don’t have an active Power Apps plan. You can apply for a trial by clicking on the Start trial link on the form’s header.
6. Enter the app name and the credentials to authenticate to the database in the SQL Authentication section. Finally, select a table from the list of tables in the database. The following is a sample form to create an app:

Figure 1.13: Create an app form

7. Click Create to start the app-building process. If the Power Apps portal doesn’t open, check whether your browser of choice has blocked the pop-up. In the following screenshot, you can see what happens in Microsoft Edge. You can click the link or select to always allow pop-ups from the Azure portal:

Figure 1.14: Pop-up blocking in Microsoft Edge

8. When the process finishes, you will see an application created from the table data with a browse screen and a detail screen:

Figure 1.15: App from Azure SQL database

Getting data from a SharePoint list is done as follows:

1. Go to your SharePoint site and open the list you want to use in your app. From the toolbar, select Integrate | Power Apps | Create an app. A new pane will open on the right, asking for the app’s name. Enter it and click Create.
2. The Power Apps portal will start building the application from the selected list. This time, the template used to generate the app will also include an edit screen:

Figure 1.16: App from SharePoint list

Creating apps from data using the Power Apps maker portal is done as follows:

1. Go to the Power Apps maker portal, https://make.powerapps.com, and from the left pane, select Create. Under the Start from section, you will see some of the most popular data sources in the Microsoft ecosystem and an option for More data sources. Selecting any of the choices will open a Connections page where you will be able to configure the service as follows:
   • SharePoint: You will be able to choose from the available sites and lists.
   • OneDrive for Business: A list of Excel files will appear to select as your data source.
   • Using any other option will prompt you to connect to that service. Depending on the service, it will let you configure more options regarding the application data source connectivity.
2. In the following screenshot, you can see OneDrive and SharePoint on the Connections page:

Figure 1.17: Connections page

3. After selecting a data source, Power Apps Studio will create an app based on the existing fields or columns.

How it works…

Depending on your selection, the application will have the required screens to handle the data source’s information. When you create an application from an existing data source, Power Apps generates a minimum of two screens:

• BrowseScreen, to list records and interact with actions such as sort and filter
• DetailScreen, to present a complete set of fields related to the selected record in BrowseScreen

A third screen, EditScreen, only appears if you have the permissions necessary to update the records.

For instance, if you connect to a SharePoint list only with read-only permission, you will only get BrowseScreen and DetailScreen. In a list with update permission levels such as Contribute or Edit, EditScreen will handle the creation and update of records, as seen in the following screenshot:

Figure 1.18: EditScreen on Power Apps

When working with Azure SQL databases, there is an additional requirement for EditScreen. From Power Apps, you can only update or delete records from tables with primary keys. If the table you select when creating the app from data doesn’t have a primary key defined, you will only get BrowseScreen and DetailScreen, as seen in the previous How to do it… section when using Azure SQL as our data source.

Keep in mind that there are other known issues and limitations when working with Azure SQL databases. For more information, please visit https://docs.microsoft.com/en-us/connectors/sql/#known-issues-and-limitations

Always refer to the connector’s documentation of your data source to learn more about possible issues or limitations that could compromise your solution: https://docs.microsoft.com/en-us/connectors/connector-reference/

There’s more…

The applications created in this chapter are fully functional for handling data but lack appeal in the user interface department. To enhance their design, please refer to Chapter 6, Improving User Experience, to see how to apply an application makeover.

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask questions to the author, and learn about new releases – follow the QR code below:

https://packt.link/lcncdserver