Related Service

SharePoint Development

Know more about SharePoint Development

Learn More

Power Apps – Canvas Apps (Part 1)

Published: Aug 26, 2020

After a bunch of wonderful announcements in recent Ignite 2019, Microsoft provides rigorous innovations and update releases in their products and solutions. Organizations have huge amounts of data lying in different database servers, stored in drives as documents and as hard-core paper documents in their file closets. Often manual processes increase the pile of paper documents and thus leads to the slower business processes in huge organizations or the organizations which are geographically distributed. Microsoft has provided a platform – Power Platform to help you to easily manipulate, surface, automate and analyze data lying under different data sources.

What is Power Platform?

In this digital age, world is extremely reliant on data – companies are creating data and are increasing continually, but without the insight on data, it will be useless for them. They need a tool to analyze or process such data to gain an insight on data. From the past, you can see that these data analysis, apps development and setup an automation processes are handled by IT/Development teams. This would require an additional people who first analyze your current situation, understand your needs to see as an end user and outline a requirement for development teams. This apps development is costly, time-consuming and would cause internal delays.

The Power Platform is very exciting as it is an association of the four Microsoft products: Power BI, Power Automate, Power Apps and Power Virtual Agents. Aim of the Power Platform is to provide you a power to build custom apps as per your business needs. A secure and cloud-based storage is provided by the most underlying data source – Common Data Service for your data. You can build your custom applications to connect with your data stored in Common Data Service or any Online/On-premise data sources. You can use data from Office 365, Dynamics 365 as well as any third-party apps and other Microsoft SharePoint services.

Power Platform provides you an ability to develop your apps without writing any code and saves your time and money being spent on custom applications development. The Power Platform is new, and Microsoft will provide regular updates to make them mature. Microsoft will bring their services closer together and Power Platform will be a key player to connect all services like Dynamic 365, Azure and Microsoft 365.

Power Platform contains following applications

  • Power BI – to show and analyze your data.
  • Power Virtual Agents – smartly interact with data.
  • Power Apps – act and modify data.
  • Power Automate – automate data.

Power Platform

Let’s explore the Power Apps in more detail with the series of this blog.

Power Apps

Power Apps is defined as a suite of apps, services, connectors and data platform. It provides an extensive application development environment to build apps as per your business needs. Various Online and on premises data sources are provided to connect with your business data to build your custom business apps.

Apps built using Power Apps have responsive design and therefore seamlessly runs on browser as well as in mobile – tablet devices. Your manual business processes are transformed into automated processes through these apps.

Power Apps targets both business and professional developers. It provides a platform where non-techie can create apps without writing any code and professional developers can write a code to programmatically interact with data and metadata, to build complex business logic and to create custom connectors.

Building apps using Power Apps helps from professional developers to business analysts to develop apps with more intuitive tool that don’t need code, works faster with a data platform that connects various data sources together. You can build highly tailored and sophisticated applications without using any conventional app development approaches gives more flexibility and freedom.

Apps can be developed using Power Apps Studio client application or directly from browser. However, browser version is highly popular and faster to use in development of apps. There are several templates already available to start building apps.

Power App Templates

There are two types of apps: Canvas apps and Model-driven apps.

Canvas apps

To fabricate the user interface and experience in your desired way, the Canvas apps entertains that liberty to you. You can set look and feel of apps the way you want it. You can link over 200 connectors and 100 templates in your app. The Canvas apps can be created for web, mobile and tablet applications.

You can drag and drop elements which you require to create your canvas app. You can pull data from multiple data sources and combine into one app.

You can start to build your app from one of the following ways:

  • From a SharePoint list

SharePoint list

  • From a Power BI dashboard

Power BI dashboard

Power Apps Studio

Model-driven apps

Model-driven apps are relatively new to Power Apps. You can create an app without code and with simple or complex business logic. Model-driven apps runs either as a standalone app or as a back-end app for canvas app. In this app, you can create your own data model as per your requirement, and with unified client interface to look similar in mobile, tablet and web. If you are familiar with Dynamics 365, then you already have used model-driven app without knowing it. Dynamics 365 is designed to store data in CDS. You can create entities for your app in CDS while developing it.

You can start to create your app from Power Apps Studio:

Model-driven apps

Canvas app vs. Model-driven app

Upon reading about both apps, you find both apps quite similar but that’s not a whole truth. Though both have same components to their design, the main difference is over user control. You have full privileges on each single aspect of your app whilst creating it

In Model-driven app, your entered data will control your app. The output of app will be decided by the input you add. The layout and overall design will be affected than the Canvas app. If you need flexibility, choose Canvas app, or you are more concern about structure, choose Model-driven app.

Canvas Apps

Let’s see a small demo with Power Apps, Power BI and Power Automate. We have prepared a Canvas app to collect Student Data from users and store in SharePoint list. There is an automated approval process which sends details to administrator, once user submit the information. After the approval of administrator, details will be stored into a SharePoint list. One Power BI report is prepared where all the details will be reflected to analyse the data.

Create a Canvas app

  • Login to SharePoint site and create one SharePoint list as below:

Create one SharePoint list

  • There is a “PowerApps” option in command bar. Select “Create an app” option.

Create an app

  • Left pane will be opened to ask for name of app. Pass the name and click on “Create” button to create new app in Power Apps. The app will be opened in App Studio.

Create new app in Power Apps

  • App will have several screens already created, based on the list like Browse Screen, Details screen and Edit Screen. Add/Edit form will have validations on fields that are supported by SharePoint OOTB validations on columns.
  • Click on “EditScreen1” from tree view, to open a form in editor. You can find fields for all columns from SharePoint list.

EditScreen1

  • Click on triangle icon from top bar on far most right to preview the app.

Preview the app

  • You will find below screens and functionality already created by Studio in app:
    • Show all items from list on browse screen.
    • Search items based on “Title” column from SharePoint list.

Search items Based on Title

  • Show Item detail screen.

Show Item detail screen

  • Add/Edit form in screen.

Edit form in screen

Create a flow in Power Automate

Now let’s create a flow for approval process and attach it with app.

  • Go to “EditScreen1” and click on “Action” → click on “Power Automate” → click on “Create a new flow”.

Create a new flow

  • Power Automate screen will be open in new tab where there are many templates provided by Microsoft available or you can create your custom flow as per your requirement.

Power Automate screen

  • Choose “Send Approval and follow up via email” template and create a flow.

Send Approval and follow up via email

  • A flow will be look like as below:

A flow details

  • Click on “Edit” to open a flow in edit mode. You can see flow with default approval process is already created, where it will send an email to approver. Once approver approves/rejects your request, it will acknowledge it to requestor.

Default flow

This is the default flow created from the template. Let’s make few changes in it.

  • Click on “Start an approval” to expand that action. Add Name, English, Mathematics and Science details by selecting from Dynamic Content pane as shown in below image:

Start an approval

  • In a “Condition” action’s “Yes” part, add “Create item” action to create a new item in “Student Data” SharePoint list. Pass appropriate site name, list name, and student details as shown in below image:

Condition Action

  • Save the changes in flow.

Let’s connect this flow to Power Apps i.e when user submits the form in app, details will be sent to approver for approval process and once it’s approved by approver, it will be stored in SharePoint list.

  • Open app in Power Apps studio → open Power Automate and you will see the flow created earlier.

Flow created earlier

  • Click on “Submit” button and add formula to connect flow with submit button event.
    There are few parameters: email address of approver, email address of user (who filled the form), fields: name; English; Mathematics; Science required to pass these values in flow.
  • Write the below formula on “Submit” button event:
If(EditForm1.Mode=FormMode.Edit,
 
SubmitForm(EditForm1)
+
Navigate(BrowseScreen1,ScreenTransition.Fade),
'PowerApps:Sendapprovalandfollowupviaemail'.Run("<approver user email id>", User().Email,DataCardValue5.Text,DataCardValue6.Text,DataCardValue7.Text,DataCardValue8.Text)
+
Navigate(BrowseScreen1,ScreenTransition.Fade))

Note: This formula will check if form is in edit mode, it will save changes in list and for new item, it will send it for approval process and then will save it in list after approval process.

Formula

 

  • You can test your app by running in preview mode.
  • Save the app and publish it.
  • Approver user will get below mail during approval process. Student details will be saved once user approves the request and requestor will acknowledge email.

Approval process

 

Without coding and in very few steps, you can create a Power App and approval system connected with it. Formulas used in Power Apps are very similar to excel and Power BI report formulas that are quite easy to use.

Note: Please follow the best practices in naming conventions for the elements used in Power Apps. To show you the default functionalities – capabilities of Power Apps and Power Platform, we haven’t followed that in our demo.

Create a Power BI report

We have also prepared a Power BI report connected with SharePoint list to generate various charts. It’s very easy to analyse data where you can access real-time data in Power BI report.

Power BI report

Go through this blog to generate a Power BI report using a SharePoint list and integrating the Power BI report in your SharePoint Online

Conclusion

Via this blog, one is aware of the power of this MS product. Based on one’s requirement, one can opt for the Power Apps type. If there is requirement for some good GUI experience for an app, to carry out some automate processes and to summarize the captured data which is available through many of the out of the box connectors, a Canvas app is good choice to go. Also, one can achieve this requirement by following this blog. In our next blog, we are coming with the Model-driven apps. So, stay tuned!!!

More Blogs on Power BI, Power Automate:
AI Builder for Power Automate
Power Apps + Microsoft Bots = Power Bots
Power Virtual Agents

 

Comments

  • Leave a message...

Related Articles

Power Apps – Portals (Part 3)

Sep 15, 2020

HIPAA Compliance Healthcare Software Development

Sep 9, 2020

Power Apps – Model Driven Apps (Part 2)

Sep 7, 2020