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.
One of its versions, canvas Power Apps, allows the creation of pixel-perfect implementations of user interfaces. As its name suggests, it brings a variety of tools to build any imaginable design into your applications. Whether it's a critical business application or a mobile tracking system, canvas apps gives you all the tools required to design your app.
During this chapter, we will discover how to create a sample of real-life applications that will give you an insight into different approaches when building canvas applications: standalone and embedded Power Apps. 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 Power App from existing data
Discovering best practices when building canvas apps
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 the main goal: to build a solution that solves a specific need.
One of the things that you need to consider is the maintainability of your app. Whether you are in charge of fixing bugs or adding new features in the future, using best practices is always a good idea. No matter the technology you are using, well-documented code is easier to maintain.
Even though Power Apps is a low-code platform, you need to consider certain things before you start 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.
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 it's 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 app building and maintaining process.
Here are a few examples of this:
- Having a great-looking app using many controls to build its user interface but hurting 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.
This concept describes a set of rules to regulate the application building 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 on application start 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 building process and even its performance. For example, when using Dataverse or a relational database, there is a significant difference when querying data if you use a data source view 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 improving performance. This improvement relays on the data source engine as it is the one that executes the data processing instead of the Power App.
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/
Creating an incident tracking solution – Setting up the data source
Tracking processes is always an accustomed request from 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.
This recipe will set up the required fields in a SharePoint list to be our data source. We will also apply some settings to this list to make it as performant as it should be.
Explanation and overview
For this recipe, we will use SharePoint as a data source, so we will start by creating a list. The actual list creation process is pretty straightforward, but that leaves us with plenty of time for planning.
SharePoint Online performance considerations
When working with SharePoint Online, you need to keep in mind 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 and will make the list unresponsive.
These are a few recommendations to keep your lists performant:
- Set an index for the columns you wish to filter. Always keep this in mind beforehand since you cannot change it if you have already exceeded the threshold.
- Prepare views for lists that might carry a large number of items by segments. Examples can be categories, years, and departments.
- Build your views with no more than 12 people, lookup, and managed metadata columns to avoid performance issues.
For reference on this subject, check out the following links:
Before diving into developing solutions with Power Apps, you are going to need a Microsoft 365 subscription. Please refer to the Preface section of this book about suggestions on getting a playground to build your apps.
How to do it…
- Go to the SharePoint site that is going to hold the two lists. Throughout the book, we will use a fake organization called AMPI Currents, which has this site: https://ampicurrents.sharepoint.com/sites/Trackers
- Select + New and then List, which will ask for a list name and description. Please input
Clientsand leave the Description field blank. This action will create a list with a default structure:
- Click on the gear icon on the top-right corner and select List settings to add and update the columns. This option will open all the configuration options available for a list, but we will be focusing on the Columns section.
- 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, just rename the column name to
Nameand then click OK.
- To add the rest of the fields, click Create column and then set the column name and type as seen in the following table:
- Repeat steps 2 and 3 for the Incidents list. Rename the Title column to
Incidentand set the columns seen in the following table:
Choice means that it will use a provided list of items to choose from, and Lookup means 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.
- Add the Customer Name column. Select the Lookup type and then, in the Get information from dropdown, select the Clients list we created before. Leave the rest of the options as default.
- For the Priority column, select the Choice type and replace the list of choices with High, Medium, and Low. Set the Default value as Low.
- Lastly, when adding the Comments 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.
Now that we have our lists in place, let's see how this list and its relationships come together.
How it works…
Click on the gear icon in the top-right corner, select Site contents, and select the Clients list:
Now, let's click on + New to add some random test data:
One Yennu road
+1 555 800 5555
- Email: [email protected]
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:
Failure in the programming of the executive elevator
- Customer Name:
The elevator returns itself to the last floor when idle.
Again, add as much data as you want, and now we are moving forward to the next section, where we will build a Power App from this data structure.
Creating an incident tracking solution – Building the user interface
Before designing interfaces, we need to ask ourselves what needs our application will solve. This analysis will help us decide which technology we will use, what infrastructure is holding every piece of our solution, and even how our end users will consume it.
Explanation and overview
We know the technology, and, 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 integrates deeply inside 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…
- Go to the SharePoint site that has your lists. Click the gear icon on the top-right corner, select Site contents, and select the Incidents list.
- On the list's toolbar, select Power Apps and then Create an app. This action will open up a dialog asking you the name of your application:
- After a little while, a brand-new application gets created with the base functionalities: records manipulation, search, listing, and sorting. It's now time to polish our application to have the desired results.
- First, let's edit our application title to match our application name and not the list. Go to Tree view, expand BrowseScreen1, and select the LblAppName1 label. On the right pane, change the value of the label by changing the Text value. Do the same for the rest of the screens.
- If you followed our 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:
- Next, let's fix 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.
- Increase Comments_DataCard2's Height value and then increase the DataCardValue10 control to match the new size, and finally, set the Mode property to
Multilineto fix the text's vertical alignment. Do the same for the Incident data card if you want it to have more space as well.
- Finish up by changing the colors, fonts, and control alignment to match your style. In Chapter 6, Improving User Experience, we will cover some techniques to apply a style makeover to your application.
How it works…
Now that we have created our app from SharePoint data, we can take it for a test drive. The Power Apps Studio gives you a preview functionality for testing while you are developing it. You can do it in two ways:
- Go back to BrowseScreen1 and then press the play button on the top right of the Studio interface. This action will execute the application to interact with it, just as if you were running it from your device of choice.
- Press the Alt key (Option on a Mac) to test a particular control. For example, if I press Alt and then click on a button, it will perform its
OnSelectaction. This way, you can test a specific control without leaving the design mode of the studio.
Never rely on these testing methods to deploy an application to production. Power Apps Studio gives you a responsive simulator to test your app based on a low resolution. While it serves you well for functionality testing, it's no match for real device testing. You need to check your app on the user medium of consumption. Examples include SharePoint, Teams, and mobile devices.
This application will allow you to have an incident tracking system for your organization. You can now test it by creating new incidents or editing existing ones. The Power Apps template should have taken care of the core functionality already, 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:
Embedding an expense tracking list with SharePoint list Power Apps
Earlier, in the Creating an incident tracking solution – setting up the data source recipe, we discussed how to design our SharePoint data source. We will use the same steps to create our data source for this recipe.
Explanation and overview
How to do it…
- Go to the desired SharePoint site and create the projects lists by selecting + New and then List:
- 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:
- To create the expenses list, click on the gear icon at the top right, and then Site contents. From there, select + New | List from the toolbar. Repeat step 1 with the following columns:
For the Category column, use these choices as an example: Travel, Transport, Supplies, and Meals. Add as much data as you like.
- Click on the gear icon on the top-right corner, select Site contents, and then select the Expenses list.
- On the list's toolbar, select Power Apps and then 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:
- Make relevant changes to your app, such as increasing the comments' height, resizing the attachments' control, and making style changes.
- Save and publish your app.
How it works…
As you can see, the new application differs from the one that we 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:
This integration gets done by the SharePointIntegration control we 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:
Embedding Power Apps inside a SharePoint list gives us the flexibility to control how the data gets entered, improve the data validation, and even allow connections to other services besides SharePoint, just to name a few examples.
Think outside the box when building embedded Power 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: 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.
Creating a Power App from existing data
Power Apps is the ideal choice when it comes to building solutions for the enterprise. These solutions are often needed to improve a particular process when it comes to data handling. Sometimes, you will start from scratch, but most of the time, the data structure will already exist but in need of 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 processes from Azure, SharePoint, and the Power Apps platform itself.
Azure is a platform that provides a wide range of cloud services for all kinds of scenarios, for example, application development, data analysis, and cognitive services. To work 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 that we start from data, we will need to have an Azure SQL database provisioned. 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:
- Go to the Azure portal, https://portal.azure.com, and from the main search, enter
SQL databasesand select the service from the list, as seen in the following screenshot:
- 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 the blade, with all the settings to configure the database.
- 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 Automate, to automate processes using SQL server templates
Power Apps, to use this database as one of the data sources of your application
- Select Power Apps and then Get started, as seen in the following screenshot:
- The Azure portal will open a Create an app form that will 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 one by clicking on the Start trial link on the form's header.
- 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:
- 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 popup. In the following screenshot, you can see what happens in Microsoft Edge; you can click the link or select to always allow popups from the Azure portal:
- When the process finishes, you will see an application created from the table data with a browse screen and a detail screen:
- Go to your SharePoint site and open the list you want to use in your app. From the toolbar, select Power Apps | Create an app. On the right, a new pane will open, asking you the name of the app. Enter it and click Create.
- 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:
- Go to the Power Apps portal, https://make.powerapps.com, and from the left pane, select Create. Under the Start from data section, you will see some of the most popular data sources in the Microsoft ecosystem and an option of Other 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 create a connection to that service and, depending on the service, will let you configure more options regarding the application data source connectivity.
In the following screenshot, you can see OneDrive and SharePoint on the Connections page:
- After selecting a data source, the 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 only appears if you have the requirements necessary to update the records, EditScreen.
For instance, if you connect to a SharePoint list in which you only have read-only permission, you will only get BrowseScreen and DetailScreen. On a list with update permissions levels such as Contribute or Edit, the EditScreen will handle the creation and update of records, as seen in the following screenshot:
When working with Azure SQL databases, there is an additional requirement for EditScreen. From Power Apps, you can only update tables with primary keys, including the deletion of records. 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. Visit https://docs.microsoft.com/en-us/connectors/sql/#known-issues-and-limitations for more information.
Please refer to the connector documentation of your data source of choice to learn more about possible issues or limitations that could compromise your solution: https://docs.microsoft.com/en-us/connectors/connector-reference/
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.