Microsoft Power Apps tutorial for beginners – Build an app in Power Apps

Are you a beginner in Power Apps? This is a step-by-step tutorial on how to build an app in Power Apps. Also, we will see the below topics:

  • Build an app from the SharePoint list in Power Apps
  • Build an app from an excel in Power Apps
  • Publish the app
  • Share the Power Apps app with another user
  • Share an app with a group in Power Apps
  • Export and import an app in Power Apps

Build an app from a SharePoint list in Power Apps

In this section, we will see how to create a canvas app using a SharePoint list in Power Apps. For example, we have a SharePoint list based on ‘Hotel Guest Registration’ containing the below columns:

ColumnType
First NameSingle line of text
Last NameSingle line of text
Street AddressMultiple lines of text
CitySingle line of text
StateSingle line of text
EmailSingle line of text
ContactNumber
Check-in DateDate and Time
Check-out DateDate and Time
Room TypeChoice (Single, Double, Suite)
Free Shuttle ServiceYes/No
Build a Sample App in Power Apps from SharePoint list
Build a Sample App in Power Apps from the SharePoint list

Now we will create an app on Power Apps where we will insert the data via Power App form. After submitting the form, the data will be stored in the SharePoint list.

Let’s create the app on Power Apps and the following steps are:

  • Sign in to the Power Apps.
  • Click on +Create > Blank app > Blank canvas app > Create.
Power Apps build an app from SharePoint list
Power Apps build an app from the SharePoint list
  • Give a name to the App and select a format i.e. Tablet. Then click on create.
Power Apps build app from SharePoint list
Power Apps build apps from the SharePoint list

We can see a blank canvas app will appear like below where we can add screens, functions, forms, buttons, etc.

Build a Sample App in Power Apps using SharePoint list
Build a Sample App in Power Apps using the SharePoint list

Now, we will connect the app to the SharePoint list. It will store the data from Power Apps to list.

To add the data, the following steps are:

  • Click on the Data icon(on the left panel).
  • Select SharePoint under the connector.
  • Select the SharePoint site.
  • Choose your recent SharePoint site.
  • Choose a SharePoint list(i.e. Hotel Guest Registration)
  • Connect.
Build an app using SharePoint list on Power Apps

Then it will open a blank open screen, where we will an image and use this screen as a welcome screen.

To do this, the following steps are:

  • On the right panel, go to the ‘Background image‘ under the properties.
  • Select ‘Add an image file‘ from the drop-down list.
  • Add an image from your local system as per your requirement.
  • Select the ‘Image position‘ as Fill.
Power Apps build an app using SharePoint list
Power Apps build an app using the SharePoint list

On this screen, we will add a label, and expand it to fit the screen. customize the label properties such as:

  • Text – Welcome To The Mark Hotel
  • Font – Georgia
  • Font size – 30
  • Font weight – Semi bold
  • Font style – Underline
  • Text Alignment – Center
Power Apps set label properties
Power Apps set label properties

Next, we will add another screen (main screen) where the user will insert the data. To add a screen, click on ‘New screen‘ under the ‘Insert’ tab. Select Blank. It will create a blank screen on the canvas.

On this blank screen, add a form where we can add the fields that comes from the SharePoint list.

Under the Forms tab, select edit. Expand the form as per the screen. Select the data source from the drop-down, under the form’s properties.

It will retrieve all the fields from the list. Let’s customize the fields and remove unnecessary fields. Go to edit fields, click on the ‘More action‘, and remove.

Power Apps edit forms
Power Apps edit forms

Set the columns as 2 and give a background color to the screen. Now, we will add a label on this screen and set the properties such as:

  • Text– Guest Registration Form
  • Font– Georgia
  • Font size– 30
  • Text alignment– Align center
  • Color– Set background color to the label
Power Apps label properties
Power Apps label properties

Next, we will add another screen to the app i.e. success screen. It will show a success message once the form is submitted.

Power Apps success page
Power Apps success page

Select the label message and set the text as ‘The form successfully submitted‘ on the properties.

Power Apps customize the success page
Power Apps customize the success page

On this screen, add an icon that will back to the welcome page. Select the screen (under the tree view) > go to the ‘Icons‘ tab > select the Back icon.

Build an app using SharePoint list Power Apps
Build an app using SharePoint list Power Apps

Now, it’s time to add functionalities to the app. On the success screen, select the back icon. Set the function on ‘OnSelect’ as ‘ Navigate(‘Welcome Screen’); ‘.

How to build an app on Power Apps
How to build an app on Power Apps

Similarly, on Welcome Page, add an icon that will navigate to the Main screen (Second screen). Go to Icons, Click on the ‘Next‘ icon. It will appear on the welcome screen.

To change the icon’s color, select the icon, and then go to color and select an appropriate color as per the background.

Power Apps navigate screen
Power Apps navigate the screen

Add functionality to the icon. Select the icon, and set the function on ‘OnSelect‘ as ‘ Navigate(‘Main Screen’); ‘.

Power Apps build an app from list
Power Apps build an app from the list

Move to the Main screen, and add a button to submit the data under the Insert tab. Set the name as ‘Submit‘ under the button’s properties. Select the button, and set the function on ‘OnSelect‘ as ‘ SubmitForm(Form1); ‘.

Build a Sample App using Power Apps
Build a Sample App using Power Apps

Select, the Form under the main screen (on tree view) and set the function as:

  • DataSource – ‘Hotel Guest Registration’
  • DefaultMode – New
  • OnSuccess – Navigate(‘Success Screen’);

It will navigate to the success screen once the data got submitted.

Create an app using SharePoint list on Power Apps
Create an app using the SharePoint list on Power Apps

Now our app is ready. Let’s save this app and test this. To save the app, go to the file tab > Save.

Save an app on Power Apps
Save an app on Power Apps

Then it will ask to publish the current version of the app. Click on Publish to publish the app.

Now back to the Apps page of the Power Apps. Select the app that you have created, and click on the Play button.

Create a canvas app on Power Apps
Create a canvas app on Power Apps

It will open the app on another tab. Click on the next icon on the welcome page. Then insert sample data on the form. Submit that form.

Power apps create a canvas app
Power apps create a canvas app

Once the form is submitted, we can see the data is stored in the SharePoint list.

Create a canvas app using SharePoint list
Create a canvas app using the SharePoint list

This is how to build a canvas app using the SharePoint list on Power Apps.

Read Power Apps Navigate Function

Share an app on Power Apps

Here we will see how to share an app from one user to another. On Power Apps, we can easily share an app with other users or colleagues.

For this, the following steps are:

On Power Apps, go to Apps. Select an app (Ex- Guest Registration App) > click on Share from the above options.

Share an app on Power Apps
Share an app on Power Apps

Add the user’s name and click on share. Now, it will share the app with the specified user and the user can operate the app.

How to Share an app on Power Apps
How to Share an app on Power Apps

Power Apps allows the user to share the app with multiple users at the same time. This is how to share an app on Power Apps.

Read Power Apps WeekNum and ISOWeekNum Function with Examples

Share an app with the entire organization

Here we will see how to share an app with a group or entire organization on Power Apps. To do this, the following steps are:

  • On Power Apps > go to ‘Apps’ (on the left panel)
  • Select an app > Share, or select More commands (…) > Share.
Share an app with entire organization on Power Apps
Share an app with the entire organization on Power Apps
  • Enter ‘Everyone’ in the sharing panel to allow the entire organization to run the app (but they can not edit or share it).
Power App share an app with a group
Power App shares an app with a group
  • Click on Share.
  • Select the ‘Send an email invitation to new users‘ check box, if you want to make it easier for people to find the shared app.
Share an app on Power Apps with entire organization
Share an app on Power Apps with the entire organization

This is how to share an app with the entire organization on Power Apps.

Read PowerApps tips and tricks

Create an App using excel sheets in Power Apps

Similarly, here we will see how to create an app using an excel sheet on Power Apps. For example, we have created an excel sheet having some columns such as:

Column NameType
First NameText
Last NameText
AddressText
ContactNumber
DateDate

Note – Make sure to format it as a table.

Create a canvas app using excel sheet
Create a canvas app using an excel sheet

Now we will create an app on Power Apps where we will insert the data via Power App form. After submitting the form, the data will be stored in the excel sheet.

Note- Here we will follow similar steps of how to create an app using SharePoint on Power Apps.

Let’s create the app on Power Apps and the following steps are:

  • Sign in to the Power Apps.
  • Click on +Create > Blank app > Blank canvas app > Create.
  • Give a name to the App(i.e. Registration Form) and select a format i.e. Tablet. Then click on create.

Now, we will connect the app to the Excel sheet. It will store the data from Power Apps to excel.

To add the data, the following steps are:

  • Click on the Data icon(on the left panel).
  • Select Excel Online (Business) under the connector.
  • Choose a location.
  • Choose your document library where the excel file is saved.
  • Choose the file > table.
  • Connect.

Now we will create an app having 3 screens i.e. Welcome screen, the Main Form screen, and a Success screen.

Click on the New screen. Add two screens i.e. blank and success.

Add screens to the Power Apps
Add screens to the Power Apps

Welcome Screen

  • After connecting the data, we will rename the default screen as ‘Welcome screen‘ and add a background color.
  • Add a label to this screen and set the properties such as text, font, and font size.
  • Add a ‘Next’ icon to the screen, so that when the user clicks on the icon it will redirect to the next screen.
  • Select the next icon and set the function as below:
OnSelect = Navigate('Main Form Page');
Build an app using excel
Build an app using excel

Main Form Screen

Now select the Main Form Screen under the tree view. Here we will add the data fields from the excel sheet.

  • On this blank screen, add a form where we can add the fields that comes from the SharePoint list. Click on the Forms tab > Edit. Expand the form as per the screen.
  • On the right panel, go to properties > data source > select the table.
  • It will retrieve all the fields from the excel sheet. Customize the properties such as columns as 2, and default mode as New. Set another function to the form as:
OnSuccess = Navigate('Success Page');
  • Next, add a label to this screen and give a text as ‘Registration Form‘. Set the background color, text color, font, and font size in the label’s properties.
  • Add a button to the screen for submitting the data. Click on the Button under the insert tab. Give a text to the button. Set the function as:
OnSelect = SubmitForm(Form1); 
Power apps create a canvas app using excel sheet
Power apps create a canvas app using an excel sheet

Note- We have created the date column as date data type but when it fetches to Power Apps it is formatted as text input. From the recent research, as per the developer, the statement is ‘consider switching to SharePoint which handles Dates very well’.

That means you can create a SharePoint list using the excel sheet and then use the SharePoint list to create the app.

Read PowerApps nested gallery control example

Success Screen

Here we will add a Back icon that will navigate to the welcome page when the user clicks on that icon and function as:

OnSelect = Navigate('Welcome Page');
build an app in powerapps from excel sheet
Build an app in power apps from an excel sheet

Now our app is ready. Let’s save the app and publish it. Click on the Play button to run the app and add data like the below:

Create a canvas app from Excel in PowerApps
Create a canvas app from Excel in PowerApps

Click on submit button. We can see the data gote stored in the excel sheet like below:

PowerApps Create a canvas app from Excel
PowerApps Create a canvas app from Excel

This is how to create a canvas app from Excel in Power Apps.

Read SharePoint PowerApps Example – Get bank branch details based on State

Save the app on Power Apps

Here we will how to save the app and publish the current version on Power Apps.

After completing the creation of an app, go to the File tab > save. It will save the app If the app has ever been saved.

save and publish the app on Power Apps
save and publish the app on Power Apps

If you haven’t previously saved the app, selecting Save from the File menu will lead you to Save as. Choose ‘The cloud‘ as the location, give it a name, and then click Save.

Power Apps Save an app on cloud
Power Apps Save an app on the cloud

This is how to save the Power Apps app.

Publish the Power Apps App

Now, let us see how to publish the Power Apps app, so that other users can see and use the app.

To publish the app, the following steps are:

  • On Power Apps studio, go to file > save > Publish.
Publish the app on Power Apps
Publish the app on Power Apps

Then again click on Publish this version to make the program available to all users with whom it is shared.

Power Apps publish the apps
Power Apps publish the apps

Also, we can see all the versions of the app, on Power Apps > Apps > Select your app > Details > Versions.

Power Apps how to publish the apps
Power Apps how to publish the apps

Note- The Live version is made available to anyone who has access to the app. Only those users with edit permissions for an app have access to the most recent version

This is how to publish the app and see the version of the app on Power Apps.

You may also like the following Power Apps tutorials:

Conclusion

From this Power Apps tutorial, we have discussed the below topics such as:

  • Create a Power Apps app from the SharePoint list
  • Create an app from an Excel sheet in Power Apps
  • Share an app to another user from Power Apps
  • Share an app with the entire organization on Power Apps
  • Save the app on Power Apps
  • Publish the Power Apps app
>