Power Platform – Power Apps – Exploring Canvas App for beginners – Demo

Hi All,

LIFE IS BEAUTIFUL 🙂 Today with Power Apps and Canvas Apps 🙂

In following previous articles, we discussed bit regarding Power Platform, Power Apps.

• PowerApps – What is PowerApps for beginners?
• SharePoint Online – Customization and Developing application on SharePoint using client site scripting and Office 365 services such as Power BI, Power Apps, MS Flow – Part 1
• SharePoint Online – Customization and Developing application on SharePoint using client site scripting and Office 365 services such as Power BI, Power Apps, MS Flow – Part 2
• SharePoint Online – Customization and Developing application on SharePoint using client site scripting and Office 365 services such as Power BI, Power Apps, MS Flow – Part 3

Today we will discuss in depth Canvas Apps and will discuss one real life scenario and demo. Lets begin the FUN 🙂

Introduction / What are the Canvas Apps? :

• Microsoft Power Apps provides Canvas to design and build apps. Such apps are called Canvas Apps
• Beauty of these apps are we do not need to write single line of code 🙂
• The users who have experience in PowerPoint design, these apps are very easy to implement. They are very similar to like designing PowerPoint slide 🙂
• These apps can be easily embedded in SharePoint, Teams, PowerBI. We will have upcoming articles for each of these scenarios.
• Canvas App are not responsive by design. We have two format either “Portrait” of “Landscape” orientation
• These Apps can be created where more focus on UI, simple functionality to implement like inserting item into SharePoint list or some other data source. There are around more that 2oo OOB data sources available
• In these kind of Apps, we can pull data from multiple data-sources like SharePoint, Office 365, Dynamic 365, SQL Databases and so on.
• In our demo we are using two data sources – Office 365 and SharePoint

Simple Canvas App implementation? Lets create simple Canvas App which will execute the Power Automate which will insert details into SharePoint list.

We will divide this article in multiple parts. In today article we will discuss simple designing of the App and connecting to Office365Users data source.

In next articles we will discuss Power Automate and creating item in SharePoint.

Use Case: One of the our customer want to control the “Teams Creation” so we have to implement custom form. We choose the option Power Apps form.

Lets begin the fun, simple Power App Form. Following are the detailed steps:

• Log in to Power Apps as

• We will be redirected to form “make.powerapps.com” as shown in below figure 2 with default environment.
• Choose the option “Canvas app from blank” option

• Once we have clicked, we have next options to set the “App name” and “Format” either “Tablet” or “Phone“
• Once required fields are filled, click on “Create” button, empty Canvas form will open as shown in below Fig4

• Now we will design a form. When we create blank app default element is “Screen” as shown in below Fig.

• On this element we inserts other elements like labels, text boxes, drop-downs, combo boxes and so on as

• With using all these controls we designed following “Teams Creation Form” form

• Once we have form design is in place, lets connect to data source – Office365USers. So that in “Teams Owners” control we could find the users.

Inserting Date Sources:

• From left side / menu of the form click on “Data sources” option and insert “Office365Users” data source as shown in below fig.

• Once we have data source available, we could connect this data source to our combo box as shown in below Fig
• Select the control and and from properties select “Data source as shown in below fig

• Here, we need to changed the formula for Items property of combo box, so that we can search users from our tenant as

Office365Users.SearchUser({searchTerm:cmbusers.SearchText}).Mail 

• Once we are ready, we can see the preview of the form either by pressing “F5” or clicking on “RUN” button from top-side right corner as shown in below fig

• In preview mode, we can search our tenant users in combo-box as

We will stop here, this article is getting long 🙂

What Next ? : In upcoming articles as mentioned above we will connect to SharePoint online data source through Power Automate and create the new item in SharePoint list.

References:

• System requirements, limits, and configuration values for canvas apps
• Screen control in Power Apps

Thanks for reading 🙂 Stay tuned for more Power Platform FUN 🙂 If you think worth reading please like, share this article. SHARING IS CARING 🙂

HAVE A SAFE LIFE 🙂 TAKE CARE 🙂