Power Platform Practice: Build a Shopping List App for your family

Managing a family’s groceries and other essentials can be challenging, especially if you’re trying to keep track of everyone’s needs and preferences. Enter Microsoft Power Platform, a suite of tools designed to make it easy for anyone without coding experience to create custom applications, automate workflows, and analyze data. In this beginner-friendly guide, we’ll show you how to harness the power of Power Platform to create a fun and practical family shopping list.

Creating a shopping list app using Power Apps, automating it with Power Automate, and analyzing your family’s shopping habits with Power BI will make grocery shopping more organized and efficient and gain valuable hands-on experience with Power Platform. This guide is perfect for those just learning Power Platform and looking for a fun and engaging project to practice with.

So, let’s dive in and start building your family’s ultimate shopping list app!

Section 1: Getting Started with Microsoft Power Platform Using a Developer Tenant

If you’re new to Microsoft Power Platform, don’t worry! This powerful suite of tools is designed to be user-friendly, and it’s perfect for beginners who want to create something fun and practical, like a family shopping list. In this section, we’ll help you start by creating a Microsoft Developer Tenant, which offers a free trial to access Power Platform. We’ll then guide you through familiarizing yourself with its interface and tools.

1.1 Sign Up for a Microsoft Developer Tenant

To access Microsoft Power Platform, you’ll need a Microsoft Developer Tenant, which provides a free trial to explore the platform. If you don’t already have one, follow these steps to create one:

  • Go to the Microsoft 365 Developer Program sign-up page: https://developer.microsoft.com/en-us/microsoft-365/dev-program
  • Click on “Join Now” and sign in with your existing Microsoft account, or create a new one if you don’t have one
  • Fill in the required information, such as your name, email address, and company name (you can use your name if you don’t have a company)
  • Complete the registration process and agree to the terms and conditions
  • After registration, you’ll receive an email with instructions to set up your Developer Tenant

1.2 Access Power Platform with Your Developer Tenant

Once you have a Developer Tenant, you can access Power Platform by following these steps:

  • Go to https://powerapps.microsoft.com/
  • Click “Sign in” in the top right corner and enter your Developer Tenant credentials.
  • You will be redirected to the Power Platform home page to access Power Apps, Power Automate, and Power BI.

1.3 Familiarize Yourself with the Interface and Tools

Now that you’ve logged into Power Platform explore its features and tools. Here’s a quick overview of the main components:

  • Power Apps: This tool allows you to create custom apps using a drag-and-drop interface, with no coding experience required. You can build canvas and model-driven apps and even custom portals.
  • Power Automate: Formerly known as Microsoft Flow, Power Automate is a tool for creating automated workflows between various apps and services. With Power Automate, you can set up triggers and actions to automate repetitive tasks and processes.
  • Power BI: This business analytics tool helps you visualize and share insights from your data. With Power BI, you can create interactive reports and dashboards to understand better and analyze your data.

Now that you have a basic understanding of Microsoft Power Platform and have accessed it through your Developer Tenant, you’re ready to start building your family shopping list app. In the next section, we’ll walk you through designing the app using Power Apps.

Section 2: Designing the Shopping List App using Power Apps

Now that you have access to Power Platform and are familiar with its interface and tools, it’s time to start building your family shopping list app using Power Apps. In this section, we’ll guide you through creating a new canvas app, designing the user interface, connecting the app to a data source, and writing formulas to manage the list.

2.1 Create a New Canvas App

Begin by creating a new canvas app in Power Apps:

  • Click “Create” on the left sidebar on the Power Apps home page.
  • Choose the “Blank App” option and “Blank Canvas App”.
  • Give your app a name (e.g., “Family Shopping List”) and select your preferred device format (Phone or Tablet). Choose a “Phone”, as this is what your mom and dad will take to the grocery store.
  • Click on “Create” to start building your app.

2.2 Connect the App to a Data Source

First, you must connect the app to a data source to store and manage the shopping list data. For this example, we’ll use an Excel file hosted on OneDrive, but you can also use other data sources like SharePoint, SQL Server, or Common Data Service.

  • Upload an Excel file with a table containing columns for “item name”, “quantity”, and category to your OneDrive account. You must format this as a table to pick it up in Power Apps.
  • In Power Apps, click “Data” (cylinder icon) in the left menu and select “Add data”.
  • Search for “OneDrive for Business” and “Connect”.
  • Navigate to the Excel file you uploaded and select the table containing your shopping list data.
  • Let Power Apps choose a unique identifier for you, as you will need to identify the record to delete and update later.

2.3 Design the User Interface

With your new canvas app open, design the user interface by adding the following elements:

  • Add “Text Input” fields so you can add a new shopping list item: To this, click “+” and drag and drop 3 “Text input” controls onto the canvas for entering the item name, quantity, and category (e.g., fruits, vegetables, dairy, etc.).
  • Rename each text box to something meaningful like “txtCategory”, “txtItemName”, and “txtQuantity”.
  • Submit button: Add a “Button” control to the canvas, and label it “Add to List” or something similar. This button will be used to add items to the shopping list.
  • Update button: Add a “Button” control to the canvas, and label it “Update”. This button will be used to update a shopping list item when you select it on the gallery.
  • Delete button: Add a “Button” control to the canvas, and label it “Delete”. This button will remove an item from the list when you select it on the gallery.
  • Shopping list gallery: Add a “Gallery” control to display the list of items.
  • Click one of the rows in the Gallery and select the Table you just set up. (This binds the list to your Excel Spreadsheet).
  • For this demo, accept the default layout. Still, it’s worth noting that you can customize the gallery layout and template to display item names, quantities, categories, and other relevant information.
  • Click “Save” on your Power App.

2.4 Write Formulas to set up some variables

When you select items in the gallery, you must update the text boxes to perform an update back into the Excel spreadsheet. To do this, you must bind the text box to a variable and have that variable change when you click on an item.

This sounds more complicated than it is, so for now, do this:

  • Select the tree view control on the left-hand menu and select “App.”
  • Then select “OnStart” in the events pull-down and add this formula to the OnStart”:
Set(varItemName, "Sausages");
Set(varItemQty, "0");
Set(varItemCategory, "Meat");
  • Now you need to set the Default value of your three input text boxes by selecting the text box and choosing “Advanced” in the properties window.
  • Find the “Default” property under “Data” and type in the corresponding variable name, e.g. “varItemName”.
  • Do this for all three boxes.
  • Finally, click a row in the Gallery and make sure “OnSelect” is selected. Enter a formula that updates the variable to the currently selected item; for example:
Set(varItemName, Gallery1.Selected.ItemName);
Set(varItemCategory, Gallery1.Selected.Category);
Set(varItemQty, Gallery1.Selected.Quantity)

2.5 Write Formulas for Managing the List

Now that the user interface is set up and connected to a data source, you’ll need to write formulas to add, update, and delete items in the list:

Note: You will need to replace the values such as DataSourceName and the text controls to whatever you’ve called them in your Power App

  • For the “Add to List” button, set the “OnSelect” property to a formula that adds the new item to the data source, like this:
Patch(DataSourceName, Defaults(DataSourceName), {ItemName: TextInput_ItemName.Text, Quantity: Value(TextInput_Quantity.Text), Category: TextInput_Category.Text})
  • To update an item in the list, add an “Update” button to the gallery template and set its “OnSelect” property to a formula that updates the selected item in the data source, like this:
Patch(DataSourceName, GalleryName.Selected, {ItemName: TextInput_ItemName.Text, Quantity: Value(TextInput_Quantity.Text), Category: TextInput_Category.Text})
  • To delete an item from the list, add a “Delete” button to the gallery template and set its “OnSelect” property to a formula that removes the selected item from the data source, like this:
Remove(DataSourceName, GalleryName.Selected)

With these formulas in place, your family shopping list app is now fully functional. In the next section, we’ll show you how to automate the shopping list using Power Automate.

I know this won’t win any design awards, but your final app should look as “stunning” as this one 😀

Section 3: Automating the Shopping List with Power Automate

Now that you have a functional shopping list app, you can enhance its capabilities by automating various tasks using Power Automate. In this section, we’ll guide you through creating a new flow that triggers actions based on events in your app, such as sending notifications or reminders when items are added or removed from the list.

3.1 Create a New Flow

Begin by creating a new flow from Power Apps Studio:

  • Click the Power Automate icon on the left-hand menu.
  • Click on “Create new flow”.
  • Find the “Click a button in Power Apps to send an email” template.
  • Give the Flow a name such as “SendEmailForNewItem”.
  • Click “Next”
  • Click “Create Flow”
  • Find the new flow on the left-hand menu and click the there dots “…”.
  • Select “Edit”.
  • Familiarise yourself with the Flow.
  • Click “Save”.

3.2 Now let’s wire up the Flow when you click “Add.”

  • Now we have the new Flow; you must wire it to the “add” button. To do that, add another line to your “OnSelect” event as follows:
Patch(shoplist, Defaults(shoplist), {ItemName: txtItemName.Text, Quantity: Value(txtQuantity.Text), Category: txtCategory.Text});

SendEmailForNewItem.Run("[email protected]", "New Shopping List Item", "Yoohoo, there's a new item");

That’s it! You’ve now hooked up Power Automate into Power Apps! Please give it a test and goto Outlook and look in “sent items” for the account you’re logged into Power Apps with!

Section 4: Analyzing Shopping Habits using Power BI

With your family shopping list app now functional and automated, you can take it a step further by analyzing your family’s shopping habits using Power BI. In this section, we’ll guide you through importing the data from your shopping list app, creating visualizations and reports, and sharing these insights with your family members for better decision-making.

4.1 Import the Data from the Shopping List App

To start analyzing your shopping habits, you’ll need to import the data from your shopping list app into Power BI:

  • Go to the Power BI home page (https://powerbi.microsoft.com/)
  • Click on “Get Data” in the left sidebar
  • Choose the “Files” option and then select “OneDrive for Business” (or the appropriate data source for your app)
  • Navigate to the Excel file you used for your shopping list app and select the table containing your shopping list data
  • Click on “Connect” to import the data into Power BI

4.2 Create Visualizations and Reports

Once your data is imported, you can create various visualizations and reports to gain insights into your family’s shopping habits. For example, you can create pie charts, bar charts, or line graphs to visualize the most frequently purchased items, monthly spending, or item category distribution. Here are some steps to create a simple visualization:

  • In Power BI, click on “Reports” in the left sidebar
  • Click on the blank canvas to create a new report
  • Add visualizations by selecting different chart types from the “Visualizations” pane
  • Drag and drop the relevant data fields from the “Fields” pane onto the chart (e.g., item name, quantity, category)
  • Customize the chart’s appearance, layout, and filters as needed

4.3 Share the Reports with Family Members

After creating your visualizations and reports, you can share them with your family members to help make better shopping decisions:

  • In Power BI, click on “Share” in the top menu
  • Enter the email addresses of your family members and add an optional message
  • Set the appropriate permissions for viewing and editing the report
  • Click on “Send” to share the report with your family

By analyzing and sharing insights from your family’s shopping habits, you can make more informed decisions about what to buy, save money, and reduce waste. Your family shopping list app is now functional, automated, and data-driven!

In the next section, we’ll show you how to share and collaborate with your family on the shopping list app.

Section 5: Sharing and Collaborating on the Shopping List App

Now that your family shopping list app is fully functional, automated, and enhanced with data-driven insights, it’s time to share it with your family members and collaborate on managing it. This section will show you how to share the app, assign roles, and collaborate in real time.

5.1 Share the App with Family Members

To share your shopping list app with your family members, follow these steps:

  • In Power Apps, open your family shopping list app
  • Click on “Share” in the top-right corner of the screen
  • In the “Share this app” window, enter the email addresses of your family members
  • Optionally, you can add a personal message to the invitation
  • Click on “Share” to send the app invitation to your family members

5.2 Assign Roles and Permissions

When sharing your app, you can assign different roles and permissions to your family members, such as view-only access or the ability to edit and manage the app. To assign roles and permissions, follow these steps:

  • In the “Share this app” window, click on the “Advanced” tab
  • For each family member, assign a role and permissions using the dropdown menu (e.g., “Can edit” or “Can view”)
  • Click on “Save” to apply the changes

5.3 Collaborate in Real-Time

With your shopping list app now shared and roles assigned, your family can collaborate in real-time to manage the shopping list:

  • Family members can add, update, or remove items from the list using the app’s interface
  • Notifications and reminders will be sent automatically based on the actions taken in the app, keeping everyone informed about the latest changes.
  • Family members can view and interact with the Power BI reports to gain insights into shopping habits and make better decisions.

By sharing and collaborating on the family shopping list app, you can streamline the shopping process, keep everyone informed, and make grocery shopping a more organized and efficient experience for the whole family.

Congratulations on building your family shopping list app using Microsoft Power Platform! You’ve created a practical and fun solution for managing your family’s groceries and gained valuable experience with Power Apps, Power Automate, and Power BI. Keep exploring and experimenting with Power Platform to develop even more innovative and personalized applications for your family, work, or personal projects.

Section 6: Tips for Optimizing and Expanding Your Family Shopping List App

Now that your family shopping list app is complete and shared with your family members, you might wonder how to optimise further and expand its capabilities. In this section, we’ll provide some tips and suggestions for enhancing and integrating the app with other tools and services.

6.1 Optimize the App for Performance and Usability

To ensure a smooth user experience, consider optimizing your app’s performance and usability:

  • Minimize data load times by using delegation, filtering, and proper indexing of your data source
  • Design your app with a clear and intuitive layout, keeping in mind different screen sizes and orientations
  • Test your app’s performance on various devices to ensure optimal responsiveness and load times

6.2 Integrate with Other Tools and Services

You can expand your app’s capabilities by integrating it with other tools and services:

  • Integrate with productivity apps like Microsoft To-Do to create task lists based on your shopping list

6.3 Add Additional Features

Enhance your app by adding new features or customizing existing ones:

  • Implement a budget tracker to monitor and manage your grocery spending
  • Add a “favorites” or “frequent items” feature for quick access to items your family buys regularly
  • Include a barcode scanner to quickly add items to your shopping list by scanning product barcodes

6.4 Encourage Feedback and Collaboration

Involve your family members in the app development process by encouraging feedback and collaboration:

  • Ask for feedback on the app’s design, features, and usability to identify areas for improvement
  • Collaborate with your family to come up with new ideas for features and enhancements
  • Share your app with friends or online communities to gather feedback and suggestions from a broader audience

Optimizing, expanding, and continuously improving your family shopping list app will enhance its functionality and deepen your understanding of Microsoft Power Platform and its capabilities. Keep exploring and experimenting to unlock the full potential of Power Apps, Power Automate, and Power BI in creating innovative solutions for everyday challenges.

Join 11,000+ in the Collab365 Academy

Master Microsoft 365, Power Apps, Power Automate, Power BI, SharePoint with Exclusive Access to 450+ Hours of Expert Training and a Wealth of Resources!