Creating Your First PowerApps Application

Loading

Creating Your First PowerApps Application

Introduction to PowerApps

PowerApps is the new platform by Microsoft where a citizen developer can also create an app based on business requirements without going deep into the programming or web development courses or understandings. PowerApps is a platform which allow users to create an app for Mobile, Tablet, Laptop, Desktop with Low Code model. This PowerApps can be connected to N numbers of data sources such as SharePoint lists, SharePoint Library, SQL Server Database Tables, Excel etc. PowerApps can even connect to On Premises data such as On Premises SQL database using On Prem connectors.

Apps built with PowerApps can manage the business requirement, business workflows using Power Automates. We can also create PowerApps responsive design so that one app can run into Mobile, Laptop, Tablet or Desktop screen without losing the UI experience of the users.

The pro developer can also create some complex PowerApps using some external data sources by building some custom connectors and more.

Creating your first PowerApps

Step 1

To create the PowerApps application, navigate to https://make.powerapps.com/ and click on Create from the left navigation menu

Creating your first PowerApps application

Step 2

Select data source which we need to connect to the PowerApps

Creating your first PowerApps application

Here we have multiple options to create our first PowerApps.

Blank App
If you are not sure at the moment like which data source you will need or you need multiple data source to connect or you have to design your custom form for specific data source, then choose this Blank App option. This will create a blank canvas app and then you can start designing your UI by dragging and dropping the controls from the control bar to canvas screen
Dataverse
If you are planning to customize or perform data operations on Dataverse entity, then in that case you can directly select this Dataverse connectors while creating an app. Once you have selected this, and hit create button, it will then ask you to select specific entities from the current environment. It may not give you anything if you do not have permission to access the Dataverse environment.
SharePoint
If you are planning to design a custom form and perform data operations into SharePoint list, then in that case you can directly select this SharePoint option. Once selected, this will ask to select the SharePoint site and then ask to select SharePoint list to which this PowerApps is required to be connected. Once connection is done, you might see some readymade screens available for the given SharePoint list.
Excel
If you are planning to customize or perform data operations on excel tables, then in that case you can directly select this Excel connectors while creating an app. Once you have selected this, and hit create button, it will then ask you to specify the location of Excel file and then it will ask you to select specific table from the excel sheet. So, while selecting Excel, we must have to have table defined into the Excel file which we will be selecting.
SQL
This will create an app with SQL database table as a data source. Here, if you have your SQL database in Azure, then we can make use of SQL connectors, if our SQL database is in on premises, then we will need to install and configure the on-premises gateway to access the table from on-premises SQL database.
Image
For example, you have a form design image sent by your designer and now you need to design that same form in PowerApps then we can select his option and once we select this option, it will then ask us to upload that image and once we create the application, it will try to create controls based on the given image. This feature is still in preview, so it may or may not work properly.
Figma
If you have designed your form in Figma then you can directly create that figma form into PowerApps screen. you just have to connect your figma account and select the form and then it will create a screen design similar to your figma design. This is also in preview mode, so it may or may not work properly.

Missing the option that you want? Not to worry, you can always click on “More create options” and you can see a list of allot of options and data sources available to you.

Creating your first PowerApps application

Just authenticate and start building your apps.

Creating App from Blank

To create your apps from blank, click on “Blank App”

Creating your first PowerApps application

Now, you will be having further classification on which type of app you want to create. The options are below.

Creating your first PowerApps application

Blank canvas app: In this app type, you have to design the screens from scratch and then import/connect your data sources and play with them
Blank app based on Dataverse: In this, you have to select any table from the Dataverse and create the app based on that.
Power Pages website: This is something new from Microsoft. Initially it was called as PowerApps Portal but now Microsoft has renamed it to Power Pages. This will be a website which can be access using Authenticated or Anonymous users.

Let’s go with “Blank canvas app” for now. Click on Create button

Creating your first PowerApps application

Now you have to provide/select some basic information.

Enter the name of your app, in our case it is “C# Corner PowerApps”
Select the layout for the apps. If you want this app to run primarily on Tablet, then select Tablet else, Mobile.
Final step is click on “Create” to create the app.

It will start provisioning your app and display “Getting things ready” screen

Creating your first PowerApps application

Once your app is provisioned, you will see below canvas screen.

Creating your first PowerApps application

Let’s breakdown the screen components and see what these are.

Menu bar, from here you can add new screen, insert any media, select themes, colors etc. Other options are self-explanatory
Property selector: from here you can select all the available properties and events related to the current selected control
Function/Formula bar: Here you can specify your formula/function. We will be writing entire code logic into these formula bar.
Here we have an option to Undo, Redo, Save, Error checking, Publish the app, comments before publishing or saving.
This tree view helps us to add the components into our canvas app such as PowerApps, Data sources, Media etc.
This is property pane; this will display the properties of the currently selected controls. This might now show all the properties, so we may have to click on “Advance” to see more properties and for events we have to click on “property selector” option
Canvas Area: This is the actual canvas area where you will be designing your PowerApps. All the screens added, controls added will be appear here.
You can control your apps settings from the settings menu
Information about your current screen such as current active screen name, zoom level will be displayed over here.

Let’s add some controls

Click on “Insert” menu on the menu bar and click on “Text Label” to add text label into your canvas screen.

Creating your first PowerApps application

Similarly, you can add, text boxes, gallery, forms, etc.

Saving Your App

Once you are done editing/designing your app, you need to save it. To save the PowerApps, click on “Save” icon on the top right corner of the screen

Creating your first PowerApps application

Once you click on save button, the app will be saved and the save button will be now grayed out. This will enable again as soon as you do some edits on the screen.

If you need to add some comments on what changes you have done so far, you can click on the Comment icon before save button, and it will pop up the comment box.

Creating your first PowerApps application

And here you can add your comments or mention some users using @ sign.

Playing with your app

Once you have developed some screens and controls, and you need to play with the app to see how others will see, you can always click on the Play button available into the top right corner of the screen

Creating your first PowerApps application

And your app will launch in Play mode, and you can now play with your app.

Publishing your app

If you need your app to be available for someone else, or you need to embed the app to SharePoint or PowerBI report, you must publish your app first.

To publish your app, you just need to click the Publish button available on the top right corner of the screen

Creating your first PowerApps application

Once you click the publish button, it will ask you the confirmation and when you hit the “Publish this version” button, it will now publish your app and create a published version on the PowerApps web portal.

Creating your first PowerApps application

Summary

So, we in this way we can create our first PowerApps Canvas application from scratch. If you have any questions or suggestion, you can reach me in comments section.