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 Open PowerApps: Sign in to PowerApps via make.powerapps.com 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 Create an App: Select "Create an app" and choose "Start with data.” Choose “Connect external data” Choose a data set to start Select “From SharePoint” There are 3 ways in which you can connect to the list. Enter the URL of your SharePoint site and select the list you created. Search the Name of the SharePoint Site the list was created within, then select the list name 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 Design the App: Use the PowerApps Studio to customize the layout and design of your app. Add Controls: Add controls such as text boxes, buttons, and galleries to display and interact with your data. Set Up Navigation: Configure navigation between screens using buttons and actions. 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) 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 Select the Table Name Container, as I want it to be inserted at the top Click Insert on the top of the screen 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). Click on the component that is bringing in the data, in this example it is a Form in the MainContainer 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. Click on the gallery In the Properties pane, find the Layout subsection. Click on the drop-down arrow to change to the layout you would like 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. ---> Click on the item in the gallery, or find the Gallery in the left-hand menu, and select Title, subtitle, or body Once selected the formula bar on the top of the screen, should change to the text property Update the formula to ThisItem.’DataColumnName’ 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. Click on the Gallery Name in the Screens left hand menu The Items property should pop up with the search equation used. 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. Click New Screen Choose Blank option Rename screen by click on the “...” ellipses, choose Rename Click Insert -> Search Form -> Select Form or Edit Form 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 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 Adding Fields Lets add fields that may not be auto added during creation. Utilizing the Properties Pane-> Edit Fields-> Add Field It is here you can multi-select fields for your form Default Mode – change the default mode from edit to new in the properties pane 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 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 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: DisplayMode.View Note you first must unlock the card to make changes Adding Controls Let us now add a cancel and save button for employees to be able to submit the form or clear the form. Click Insert-> Select Button (For this step, I will perform twice to insert two buttons) 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 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 Button Formulas 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) Save – Onselect – SubmitForm(EmployeeForm) 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 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 Turn off if you would like the system to confirm before the user exits 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! Save the App: Select the Save icon in the upper-right corner and give your app a name. Publish: the app to make it available to your organization. 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 AppUtilizing Data: Creating Power BI Reports with SharePoint for Nonprofits
The Value of Power BI and SharePoint for Nonprofits Nonprofits handle a variety of data: donor contributions, volunteer schedules, program outcomes, and more. Integrating SharePoint with Power BI provides a seamless way to organize and visualize this data, enabling organizations to: Make Data-Driven Decisions: Turn numbers into insights that guide strategic planning. Enhance Transparency: Present stakeholders with clear, visually appealing reports. Save Time: Automate processes that would otherwise require hours of manual effort. Reduce Costs: Leverage tools you may already have access to through Microsoft 365, minimizing additional expenses. Practical Example: Tracking Volunteer Hours Imagine you run a nonprofit that relies heavily on volunteers. SharePoint can serve as the central repository where team leaders log hours worked. Using Power BI, you can pull this data, analyze trends, and present a dashboard summarizing key metrics, such as: Total hours contributed by all volunteers. Top-performing teams or individuals. Monthly or seasonal variations in volunteer activity. Such a dashboard can help you celebrate achievements, identify gaps, and optimize volunteer engagement strategies. Steps to Integrate SharePoint with Power BI Organize Your Data in SharePoint Start by storing your data in a SharePoint list or document library. For example, create a SharePoint list titled "Donor Contributions" with columns for donor names, amounts, dates, and campaign names. Ensure the data is clean and well-organized to simplify the reporting process. Open Power BI and Connect to SharePoint Follow these steps to connect Power BI to your SharePoint data: Launch Power BI Desktop. Select Get Data, then choose SharePoint Online List. Enter the URL of your SharePoint site and authenticate using your Microsoft 365 account. Preview the data and select the list or library you want to use. Transform and Clean Data Use Power BI’s Query Editor to clean and transform your data. For example: Remove duplicate rows. Format date columns for consistency. Create calculated columns if needed (e.g., total donations by donor). Create Visualizations With your data ready, you can start building visuals such as: Bar charts to compare donations by campaign. Line graphs showing trends in volunteer participation over time. Maps to visualize regional donor distributions. Publish and Share Once your report is complete, publish it to the Power BI service. You can embed the report directly into your SharePoint site or share it as a link with stakeholders. This ensures everyone stays informed and aligned. Tips for Optimizing Data Sources Regular Updates: Ensure your SharePoint lists are updated regularly to reflect the most accurate data in your Power BI reports. Use Filters: Apply filters in Power BI to focus on specific campaigns, time periods, or metrics. Automate Refresh: Schedule automatic data refreshes in the Power BI service to keep reports current. Why Nonprofits Should Leverage This Integration Integrating SharePoint with Power BI doesn’t just help your nonprofit visualize data; it empowers your team to act with confidence. For example: Executive directors can use dashboards to monitor organizational performance. Fundraising teams can identify top donors and strategize future campaigns. Program managers can measure the impact of their initiatives with real-time data. All this becomes achievable without breaking the bank, thanks to the cost-effectiveness of Microsoft’s ecosystem. Conclusion: From Data to Impact In the world of nonprofits, every dollar and every decision matters. By using SharePoint to organize your data and Power BI to visualize it, you can streamline operations, enhance transparency, and amplify your impact. With a little effort and creativity, these tools can become the cornerstone of your data strategy, helping you achieve your mission more effectively than ever before. Ready to get started? Dive into your SharePoint site today and start building the reports that will transform your nonprofit’s future.Create an Internal Support Ticket Hub with Microsoft Lists, Forms & Power Automate
Setting Up the Support Ticket Portal First, we will set up the support ticket portal. This is where ticket requests will populate, be triaged, assigned and managed. It's a central location where the support team members can keep track of their tasks as well as keep the client informed through automated notifications upon status changes. Let's get started! 1. Create the Microsoft List: Navigate to Microsoft Lists from the Microsoft365.com App launcher in the upper left. Select the “+ New list” and choose the “Issue Tracker" template. Fill out the list information (name, description*, color*, icon*, and associate it with a team or save to your lists) and select create to make your form (*optional). In this case, associating the list with a team is required as it is needed for notification purposes later on in the tutorial. Review the list items from the template and customize the list to what your organization needs. Include columns that capture essential details such as issue description, priority level, assigned to, and status. Ensure the list is set up to store all necessary information for managing support tickets. There will be items you need captured from the person submitting the form as well as items to triage, assign, and track the status of the case. 2. Creating the Support Ticket Form In the list menu, select the "Forms" tab to create a new form. Customize the form by removing or unchecking questions that are designed for the support team, leaving only the questions needed from the person submitting the ticket. For example, you’d remove the Priority, Status and Assigned To fields from the form because those items are not determined by the submitter, but by the internal staff triaging the case. Ensure the form captures essential details such as the issue description, associated files, and contact information. 3. Enabling Notifications and Assigning Tickets In the form settings, select the toggle next to "Notify me" so that whenever a new item (support ticket) is submitted, you are immediately notified. This ensures that you don't miss an urgent request. Preview your form Check for changes or adjustments you’d like to make. If everything is good, congratulations! You’ve made your support ticket form! 4. The Workflow Process: Now that your form and list are created you can test out your new form and ticket portal. Grab the link to your new form by selecting the forms button again in the menu. Select the link sign to copy the link. Let's test things out. Fill out the form with information as if you are an employee submitting a ticket about an issue. Refresh and check your Microsoft List to make sure the form responses were automatically added. Triage the case. In the Microsoft List, double click on the form submission list item. Here, the support admin will triage the case by assigning it to a member of the support team, updating the status of the ticket to "In Progress" and assigning it a priority status. When a ticket is assigned, the assigned staff member receives a notification, ensuring they are aware of their new task. If they need to get in contact with the employee that submitted the case, they are able to come to the list item, and check for contact/email details in the email column. Team members can update the status of the ticket to "In Progress" when they start working on it and then to "Completed" once the issue is resolved. These status updates help track the progress of each ticket and ensure timely resolution. Congratulations! You have an internal support ticket portal and form. To further enhance the transparency and efficiency of your internal support ticket system, you can implement additional notifications to keep the requester informed about the status of their ticket. By setting up automated notifications in Power Automate for when a ticket is marked as "In Progress" and "Completed," you ensure that the requester is always aware of the current status of their issue. This not only improves communication but also boosts confidence in the support process, as employees feel assured that their concerns are being actively addressed and resolved. 5. Automating Notifications with Power Automate Create a Flow: From the Microsoft365.com app launcher, open Power Automate. Click "+ Create" and select "Automated Cloud Flow". Choose a flow name and set the trigger to "When an item or file is modified". Configure the Flow: On the canvas, select the trigger to enter the required data. The site address your Microsoft List is attached to and the list or library name. Next, we must add a trigger condition in order for the flow to only trigger when the status column has been changed. In the settings tab add the following trigger condition NOt(equals(triggerOutputs()?['body/Status'], triggerOutputs()?['body/PreviousStatus'])) Return to the canvas to create a new action. Select the + sign under your trigger. In the search menu, search for the condition action. For the value of the condition, we want to choose the Status Value from the dynamic field (the lightning bolt). We want to make sure the condition states “Status Value is equal to In progress”. (Capitalization matters here so make sure the capitalization of “In progress” matches the way it is spelled on your Microsoft List”. In the "True" column of your condition we will add a new action. Select “Send an email (V2) Inside of your action select, “Switch to Advanced Mode” to be able to enter dynamic fields or fields directly associated with your form submission. In the "To" field, select the lightning bolt for a dynamic entry. And select the “Issue logged by Email”. This will add the email address of the form sender to the “To” field and who the notifications will be sent to. In the Subject field type and appropriate title such as “Support Ticket Status Update”. In the Body field type a message to the requester. For example, "Hello, you are receiving this message to notify you that your support ticket for" (dynamically insert the name of the issue) “has been changed to “In Progress”. At this point, the flow now sends notifications for when the status column has been modified to “In Progress. Now, let's do the same and send a notification for when the status has been changed to “Completed”. In the False column, we are going to add another condition. The values for the condition will be the same except where it once said, “In Progress” it will say “Completed”. You want the statement to read “Status value is equal to Completed”. In the true column add the same action for sending an email and fill out the details accordingly. Save and test your flow. Test and Deploy: Test the flow to ensure it works as expected. Select Test and choose Manually. This specific flow is triggered when the status column has been modified to “In Progress” or “Completed”. Test both separately to make sure both works. You will see green check marks and receive a notification to the email you provided earlier when filling out the form with sample data. In this example, I tested the flow by updating the status to “In Progress” so in this case I have green check marks along the left side because that follows the first conditions. The green check marks will follow the right-side path if I choose to test the “Completed” status. Here is a copy of the email that was sent to the inbox. Once satisfied, deploy the flow to automate the notification process, enhancing communication and satisfaction. Conclusion By leveraging Microsoft Lists and Forms, you can create a robust internal support ticket system that streamlines the process of submitting, triaging, and resolving support requests. The integration with Power Automate further enhances this system by automating notifications, ensuring that all parties are kept informed throughout the process. This setup not only improves efficiency but also boosts employee satisfaction by providing a transparent and responsive support system.
