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.

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
Power Platform - Power Apps
Fig1:Power Platform – Power Apps
  • 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
Power Platform - Power Apps - Creating blank canvas app
Fig2: Power Platform – Power Apps – Creating blank canvas app
  • 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
Power Platform - Power Apps - Creating blank canvas app - Specifying App Name and choosing the layout for the form
Fig3: Power Platform – Power Apps – Creating blank canvas app – Specifying App Name and choosing the layout for the form
Power Platform - Power Apps - Blank canvas app
Fig4: Power Platform – Power Apps – Blank canvas app
  • Now we will design a form. When we create blank app default element is “Screen” as shown in below Fig.
Power Platform - Power Apps - Blank canvas app - Screen element
Fig5: Power Platform – Power Apps – Blank canvas app – Screen element – here I have renamed the “Screen1” to “sitecreationdemo”
  • On this element we inserts other elements like labels, text boxes, drop-downs, combo boxes and so on as
Power Platform - Power Apps - Blank canvas app - Screen element - Other elements / components which we can add on Screen element
Fig6: Power Platform – Power Apps – Blank canvas app – Screen element – Other elements / components which we can add on Screen element
Power Platform - Power Apps - Blank canvas app - Screen element - Other elements / components which we can add on Screen element
Fig7: Power Platform – Power Apps – Blank canvas app – Screen element – Other elements / components which we can add on Screen element
  • With using all these controls we designed following “Teams Creation Form” form
Power Platform - Power Apps - Teams creation canvas app
Fig8: Power Platform – Power Apps – Teams creation canvas app
  • 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.
Power Platform - Power Apps - Inserting Data Source - Office365Users
Fig9: Power Platform – Power Apps – Inserting Data Source – Office365Users
  • 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
Power Platform - Power Apps - Connecting Data Source to combo box - Office365Users
Fig10: Power Platform – Power Apps – Connecting Data Source to combo box – Office365Users
  • 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
Power Platform - Power Apps - Opening Preview Mode
Fig11: Power Platform – Power Apps – Opening Preview Mode
  • In preview mode, we can search our tenant users in combo-box as
Power Platform - Power Apps - Preview Mode - Searching Users
Fig12: Power Platform – Power Apps – Preview Mode – Searching Users

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:

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 πŸ™‚

This site uses Akismet to reduce spam. Learn how your comment data is processed.