Build Your First Canvas Power Apps Tutorial [Hands-On Course]

Introduction

This tutorial will guide you through the process of building your first canvas application using Power Apps. With a hands-on approach, you'll learn how to create, edit, and manage data-driven applications. By the end of this tutorial, you’ll have a functional app that demonstrates the core capabilities of Power Apps, including connecting to data sources, creating user interfaces, and implementing features like filtering and data entry.

Chapter 1: Getting Started with Power Apps

• Create a Connection to SQL Server

  • Go to Power Apps.
  • Navigate to Data and then Connections.
  • Create a new SQL Server connection using the following details:
    • Type: SQL Server
    • Authentication Type: SQL Server Authentication
    • Server: pragmaticworks.database.windows.net
    • Database: Demo
    • Username: DemoUser
    • Password: DemoPW123 (case sensitive)
    • Gateway: None selected

• Understanding Power Apps Features

  • Power Apps allows you to create applications that can run on various devices, including phones, tablets, and PCs.
  • The platform supports a wide range of data connectors (over 300), enabling integration with various data sources.

Chapter 2: Building the Application

• Creating Your First App

  • Start by selecting Create and then choose Canvas app from blank.
  • Select the app format (tablet or phone) based on your preference.

• Designing the User Interface

  • Utilize the drag-and-drop features of Power Apps to add controls such as buttons, text inputs, and galleries.
  • For instance, to add a gallery for displaying patient information:
    • Insert a Gallery control and set its Items property to connect to your database.

• Adding Functionality

  • Implement basic functions such as filtering and searching data:
    • To filter data based on user input, use:

      Filter('[dbo].[NursingWellCheck]', PatientID = Gallery1.Selected.PatientID)
      

    • To enable searching across multiple fields, use the Search function:

      Search('[dbo].[NursingPatient]', TextInput1.Text, "FirstName", "LastName")
      

Chapter 3: Data Entry and Management

• Creating Forms for Data Entry

  • Insert an Edit Form to allow users to input and edit data.
  • Connect the form to your data source and configure its fields using the Edit Fields option.

• Submit Data

  • Add a Submit button with the following code in the OnSelect property:

    SubmitForm(Form1); Notify("Record saved successfully", NotificationType.Success)
    

• Editing Existing Records

  • Include an Edit button in each row of your gallery that navigates to the edit form with the selected record.
  • Use the following code in the button's OnSelect property:

    Navigate(EditScreen, ScreenTransition.Cover); EditForm(Form1)
    

• Deleting Records

  • Add a Delete button beside each record and implement the following code:

    Remove('[dbo].[NursingWellCheck]', ThisItem)
    

Chapter 4: Enhancements and Final Touches

• Styling Your App

  • Use variables to manage colors and styles consistently throughout your app:

    Set(varBackgroundColor, RGBA(232, 244, 220, 1));
    Set(varHeaderColor, RGBA(53, 91, 14, 1));
    

• Testing Your App

  • Preview your app frequently to ensure all functionalities work as expected.
  • Check for any errors and debug issues by using the Monitor tool in Power Apps.

Conclusion

Congratulations! You have successfully built a functional canvas application using Power Apps. You learned how to connect to a SQL Server database, create a user-friendly interface, implement data entry forms, and manage user interactions. As you continue to explore Power Apps, consider integrating more complex functionalities, such as using Power Automate for workflows or enhancing your app's design for improved user experience. Keep practicing, and happy app building!