Modern Power App in One Hour

Have you tried out the modern controls and screens in Power Apps? I’m thrilled to share with you a recap of our latest Power Hour session, where we embarked on a thrilling challenge: building a fully functional Power App canvas app in just one hour. Yes, you heard that right – an hour! This session was all about leveraging the new modern controls and screen templates to streamline the app development process. Let’s dive into how it was done.

The Challenge

The idea was to push the boundaries of what’s possible with Power Apps by creating an app within an hour. Traditionally, building Power Apps, even with its no-code approach, can be time-consuming. However, with the introduction of modern controls and templates, the development process has become significantly more efficient. Our goal was to showcase these capabilities by building a “Purchase Request” app.

Getting Started with a Modern Power App

I kicked off by creating a blank canvas app, opting not to use a pre-existing template. This gave the flexibility to fully customize the app according to the requirements. The app was based on a SharePoint list that we had previously used in a Power Hour session, which contained various purchase requests:

Keep in mind that although this is a purchase request app, it can easily be any kind of request / form app that you’d like, such as travel requests, employee onboarding, check requests, maintenance requests, vacation requests, etc.

Building the Modern Power App

The development process was straightforward, thanks to the modern controls. I started by adding our data source (a SharePoint list) and then proceeded to build the app’s screens using the new screen templates.

  1. The first screen was a welcome screen
  2. Next was a list screen that displayed all purchase requests using the new modern table control
  3. Third, a form screen for submitting new requests and viewing existing ones

Here is a glimpse of the welcome screen template, which is extremely useful and saves so much time:

Modern Controls and Templates

The modern Power App controls, such as the new table and form controls, were game-changers. They allowed us to quickly add and configure features, such as displaying a list of items and creating forms for data entry. The templates also came with built-in functionalities like navigation and submitting forms, which saves a lot of time.

Navigation and Functionality

I ensured that the app was intuitive to use by setting up navigation between screens. Users could easily create a new purchase request from the welcome screen, view all requests, and edit or view individual requests. I also demonstrated how to use variables and the Office 365 Users connection to display the user’s information, making the app even more user-friendly and dynamic. When building the list screen, I mentioned that there is a Power Apps modern toolbar control that can be added for extra functionality. Here is the blog and video where I taught this:

Power Apps Toolbar Control: Efficiency for Canvas Apps

Reflections and Takeaways: Building an app in an hour was an exhilarating experience that highlighted the power of modern Power Apps controls and templates. It showed that with the right tools and a clear goal, developing functional apps can be both fast and fun.

Resources

My post: Power Apps Toolbar Control: Efficiency for Canvas Apps

Microsoft’s: Modern controls and properties documentation

New to Power Apps? My Power Apps Basics course is self-paced and FREE!

Ready to dive into the advanced concepts beyond basics? Here is my comprehensive, Power Apps Advanced course, only $65 as part of our Ultimate plan.

2 comments

  • Such a great video – thanks Laura! I did encounter an issue when adding the toolbar on the Purchase Request List screen. I added it in ScreenContainer2 > HeaderContainer2. Set HeadContainer2 to a Vertical direction, but the toolbar wouldn’t appear underneath the Header. I’m not sure if this was something I was doing wrong or a bug.

    • Yes, containers are super tricky. For the Header container, it looks like I set the following:
      Direction: Vertical
      Horizontal overflow: hide
      Vertical overflow: scroll
      Wrap: on

      Let me know if that helps, please.

Leave a Reply