Building a Power App with SharePoint: Connecting and Customizing the App for an HR Use Case

 [⬅️Previous Blog] Setting Up Your SharePoint List 

You're reading the last of the series, Blog 4 Building Your Power App

Now that you’ve set up your SharePoint List — the foundation for your app’s data — it’s time to bring your HR app to life using Microsoft Power Apps.

In this blog, we’ll walk step-by-step through how to:

• Connect your Power App to the SharePoint list,
• Customize the forms and layout,
• Configure how users interact with the app,
• And apply basic rules that enhance the functionality of your HR or other adopted solution

Whether you're a nonprofit looking to simplify HR tracking or a team supporting digital transformation with no-code tools, these Power Apps steps will help you build an easy-to-use app your staff can rely on.

By the end, you’ll have a working Power App connected to SharePoint, ready for testing.

Integrate the List into PowerApps 

1. Open PowerApps: Sign in to PowerApps via make.powerapps.com 
2. Ensure you are creating the app in the appropriate “Environment” on the top right corner, if you organization is using multiple for different purposes or departments 
3.  Create an App: Select "Create an app" and choose "Start with data.” 
4.  Choose “Connect external data” 
5.  Choose a data set to start Select “From SharePoint” 

 

 

There are 3 ways in which you can connect to the list.  

1. Enter the URL of your SharePoint site and select the list you created. 
2. Search the Name of the SharePoint Site the list was created within, then select the list name 
3. Enter the URL of the List site where it says Enter SharePoint URL, and click connect 

 

I will use option 3 and copy the URL link to my SharePoint list (the web address listed when you are on your SharePoint List site), and copy it into the “Enter SharePoint URL”  

 

 

Click Connect if you copied the URL using option 1 or 3 

Click Create App Once list is selected 

 

 

 

 6. Create the App: PowerApps will generate a default app with one screen that includes a container and two sub containers (listing the items in the list if you added one, and the body sub container has the fields in your list) 

7. Save the application (warning) Using the save button in the upper right corner and give your app a name. If you do not save right away, after the screen is idle for some time you will have to start over.  

 

 

 Ensure the auto save setting is on within Settings->General. Once you have clicked the save it will continue to auto save changes 

 

Customize the App 

1. Design the App: Use the PowerApps Studio to customize the layout and design of your app. 
2. Add Controls: Add controls such as text boxes, buttons, and galleries to display and interact with your data. 
3. Set Up Navigation: Configure navigation between screens using buttons and actions. 
4. Test the App: Test the app to ensure it functions as expected. 

Example Customizations 

Let’s take you through some example configurations based on theme of the HR Employee Ticketing App 

 

Here is the app, as finished from the steps above 

 

Please note the yellow warning icon is Power Apps warning for the search feature, and that the formula might not work correctly with large data. If you are planning to have over 500 records, there is still a way to use this app and an alternative search function if needed. Follow these articles for more information.  

 

Understand delegation in a canvas app - Power Apps | Microsoft Learn 

Connect to SharePoint from a canvas app - Power Apps | Microsoft Learn 

 

Deleting Controls 

For this app I do not want employees to be able to delete records, so I will remove the delete icon and delete confirm dialog container that was auto created. (see highlights in picture above)  

1. Right Click on “DeleteIconButton” then click “Delete” on the Pop-up dialog  

 

 

 

Add a Display Icon 

When the employees sign in, I want their profile picture (if uploaded into the directory) to show on the right-hand side  

1. Select the Table Name Container, as I want it to be inserted at the top  
2. Click Insert on the top of the screen 
3. Search for Avatar (or find Display, and scroll), the image well then insert at the top 

 

 

 

 

Removing fields from PowerApps View 

Sometimes, there may be a list or other data that you may not need to be shown in the Power App. Below shows what you can do to remove those (only from the App). 

1. Click on the component that is bringing in the data, in this example it is a Form in the MainContainer 
2.  Then scroll down to the field you want to remove, by simply right clicking on the field i.e., “Priority Level” and click Delete 

 Second Option to Remove Fields 

  There is also the option to hover over the area, and the distinct options will show, choose “Fields” 

 

 

 

Third Option to Remove Fields 

Lastly, you can also use the Properties panel on the right side of the screen. This Property Panel is where many other items can be controlled, like size of text, height, and spacing of columns.  

To remove the field In Properties select Edit Fields -> Find Field to remove from app -> Right Click -> Click on the ellipses->Select Remove 

 

--->

--->

 

 

 

Tip: Please note that you can also use this view of the fields properties to drag fields in the order of which you would like (not just the move up and move down arrows shown). 

In this example, I removed fields that only HR Administrators will use to manage HR cases that come through the application. This way we have employee facing fields and HR only fields.  

 

Editing Galleries 

Layout 

If you are using a Gallery within your application, you can change the layout that is automatically added.  

1. Click on the gallery 
2. In the Properties pane, find the Layout subsection. Click on the drop-down arrow to change to the layout you would like 
   1. If your data includes images, you can choose the option that shows the results with an image icon 

 

-->

 For this application I will keep the Title, subtitle, and body option 

 

Gallery Items  

If you also want to edit the items shown in the gallery, you can click on the Title, subtitle, or body and change the text Formula used. Performing this will update it for all the items shown in the gallery. 

 

 

--->

 

1. Click on the item in the gallery, or find the Gallery in the left-hand menu, and select Title, subtitle, or body 
2. Once selected the formula bar on the top of the screen, should change to the text property 
3. Update the formula to ThisItem.’DataColumnName’ 
   1. The updates I have made were from First Name, Last Name, and blank to: 
      • ThisItem.Created
      • ThisItem.Description 
      • ThisItem.'HR Category'.Value 

 

Searching in Galleries 

Once your gallery display items have been updated, you have a search field that now may also be updated depending on how the users will search entries. This example below will only go over searching text values.   

1. Click on the Gallery Name in the Screens left hand menu 
2. The Items property should pop up with the search equation used.  
3. Change the search values – to do this remove or add items after the SearchInput1.Text Value (that is if your icon is labeled as such) see image below

Search([@'Import HR Employee App'], SearchInput1.Text, field_1,'Description') 

“Import HR Employee App – is the Datasource 

“SearchInput1” - is the search box where items users will type/search 

“Field_1” or ‘Description’ - are the fields chosen to search from this specific data source 

Change the items after “SearchInput1.Text,” separating each by a comma.  

 

 

Adding a Screen/Form 

We are now going to create a form that the user will use to submit a case to the HR team. 

1. Click New Screen  
2. Choose Blank option 
3.  Rename screen by click on the “...” ellipses, choose Rename  
4. Click Insert -> Search Form -> Select Form or Edit Form 
5. Choose Data Source A screen will appear to allow you to select your data source, which will be the same as the gallery in this option and managed by the HR team through the SharePoint List. 
   • Below is an image of the Form inserted 
6.  Remove fields The form that is inserted will bring in fields automatically, utilize the steps in the “Removing fields from PowerApps View” to remove the fields that the employee should not see or fill out 
7. Adding Fields Lets add fields that may not be auto added during creation. Utilizing the Properties Pane-> Edit Fields-> Add Field 
   1. It is here you can multi-select fields for your form 
8. Default Mode – change the default mode from edit to new in the properties pane
9. Properties the right pane shows that you perform a variety of changes
   • Edit Fields 
   • Change amount of columns
   • Display field name – change whether the layout is vertically on top or to the side of the field
   • Size/Position - change the sizing of the form and position
   • Color – edit the color
   • Border – add a border to the outside of the form 
10. Pulling In User Data For this app I want the user information to automatically pull in from the user profile, to prevent type errors. Ensure that you have connected the “Office365Users” data source for user profiles to pull into the app. Below are the formulas I have used: 
    • First Name = First(Split(User().FullName, " ")).Value
    • Last Name = Last(Split(User().FullName, " ")).Value
    • Email Address = User().Email
    • Employee ID = Office365Users.MyProfileV2().id 
11. Viewable only Fields
    • If there is a need for any of your form fields to be viewable only, in the Properties Pane when the DataCard Value for that field is selected, change the DisplayMode to:
      1. DisplayMode.View
      2. Note you first must unlock the card to make changes 

1. 1.  

 

Adding Controls  

Let us now add a cancel and save button for employees to be able to submit the form or clear the form. 

1. Click Insert-> Select Button (For this step, I will perform twice to insert two buttons) 
2. Drag the button to the preferred location on the screen 
   • Tip Rename the buttons in the Tree View; this helps when looking at the screen left navigation and knowing which button is which 
3.  Edit the display name for the user using the properties pane 
   • If your properties pane does not show click on the icon in the top navigation next to the editing icon, see image below 
   •  Icon – there is also the ability to change the icon, select which icon makes the most sense for the action you would like the button to perform. The “Layout” property also allows you to have only the icon show, or both icon and text 
4.  Button Formulas
   1. Cancel/Clear the formula for the “OnSelect” Property of the button, and type “ResetForm(NameofFormUsedinTreeView)’ For this app it will be ResetForm(EmployeeFormScreen) 
      •  If you have a screen you would like to send the user back to, after clicking cancel add; Navigate(MainScreen1) --> Final formula combined would be ResetForm(EmployeeForm);Navigate(MainScreen1) 
   2. Save – Onselect – SubmitForm(EmployeeForm) 
5. Successfully Submitting a Form  
   • Click on your Form in the Tree View “EmployeeForm” in this app 
   • Find the OnSuccess property 
   • Type ResetForm(EmployeeForm);Navigate(MainScreen1) in the formula bar 
6. Exit Button For this app I have also added an Exit Button to the Gallery Screen, and added an icon 
   • OnSelect fx = Exit() 
   • Navigate to the App in the left-hand Tree View and look at the options in Properties Menu on the right-hand side, that says Confirm Exit 
     1. Turn off if you would like the system to confirm before the user exits 
     2. Confirm exit message – type in a message you would want the user to see 

 

  --->

 

Step 4: Save and Publish the App 

Although saving, and the auto save setting was explored, in the event this was not utilized let's save and publish! 

1. Save the App: Select the Save icon in the upper-right corner and give your app a name. 
2. Publish: the app to make it available to your organization. 
3. Share the App: Share the app with your team members and assign appropriate permissions. 

Conclusion 

Creating a Power App from a SharePoint list is a powerful way to leverage your existing data and create custom applications that meet your organization's needs. By following the steps outlined in this guide, you can build an app that improves efficiency, enhances collaboration, and provides valuable insights. Start exploring the possibilities of PowerApps and SharePoint today! 

 

Additional Resources 

Add and configure controls in canvas apps - Power Apps | Microsoft Learn 

Understand delegation in a canvas app - Power Apps | Microsoft Learn 

Connect to SharePoint from a canvas app - Power Apps | Microsoft Learn 

Congratulations!

You’ve now walked through the full process of building a Power App that connects directly to your SharePoint List. From selecting the correct data source to customizing fields, adding logic, and polishing your interface — your app is now functional and ready to test with real users.

Before you go live, make sure to:

• Review your SharePoint permissions so employees only see their own data,
• Confirm Power App users only have “Can use” access and not edit privileges,
• And walk through your app to catch any last usability tweaks.

 

📚 Explore the Series

Series Introduction

An Overview of the SharePoint/PowerApps Combination

Setting Up Your SharePoint List

Building Your Power App