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:

Column	Type
First Name	Single line of text
Last Name	Single line of text
Street Address	Multiple lines of text
City	Single line of text
State	Single line of text
Email	Single line of text
Contact	Number
Check-in Date	Date and Time
Check-out Date	Date and Time
Room Type	Choice (Single, Double, Suite)
Free Shuttle Service	Yes/No

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.

• Give a name to the App and select a format i.e. Tablet. Then click on create.

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

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.

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.

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

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.

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

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

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

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.

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’); ‘.

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.

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

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); ‘.

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.

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

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.

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.

Once the form is submitted, we can see the data is stored in 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.

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.

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.

• Enter ‘Everyone’ in the sharing panel to allow the entire organization to run the app (but they can not edit or share it).

• 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.

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 Name	Type
First Name	Text
Last Name	Text
Address	Text
Contact	Number
Date	Date

Note – Make sure to format it as a table.

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.

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');

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); 

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');

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:

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

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.

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.

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.

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

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

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:

• Power Apps in SharePoint
• Power Apps Radio Button
• Power Apps Data Table
• Power Apps SharePoint Button
• PowerApps Example – Create a Bank Account Statement
• Create Login Page in PowerApps using SharePoint List
• How to create a custom calendar in PowerApps
• PowerApps Chart Control
• How to build multilingual apps in PowerApps

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