Creating a user-friendly, modern app in PowerApps doesn’t have to feel overwhelming. Whether you’re new to PowerApps or you’re looking to refine your skills, this series will walk you through building a responsive Capital Expenditure (CapEx) Authorization app. We’ll keep things simple, efficient, and practical for real-world use in your business processes.

In this post, we’ll explore everything covered in Part 1 of the series, where we tackle designing an app for submitting, managing, and approving CapEx requests. The best part? No long-winded guesswork; it’s all hands-on, step-by-step guidance.

Curious to see what this app looks like in action? Check out the video below for a full walkthrough!

Why Build a Modern CapEx App?

Managing Capital Expenditure approvals can be tedious and time-consuming. By building a responsive app with PowerApps, you can streamline this process while providing an intuitive experience for end users. Whether it’s handling data inputs, managing files, or tracking multi-stage approvals, a CapEx app saves time and reduces room for error.

Here’s what makes this app unique:

• Fully responsive layout for seamless use across devices.
• Dynamic features, like search and multi-dropdown filters.
• Reusable components to simplify future updates and maintenance.
• Efficient workflows, including multi-stage approval tracking.

You’ll future-proof your app while keeping users happy with an effortless experience.

Setting Up the Responsive Layout

The first step is designing a layout that works across different devices without creating unnecessary headaches.

Using the Header and Footer

We started with a dynamic header and footer that adapts to the screen size. By using PowerApps’ responsive design capabilities, elements automatically stack and adjust their size. This means less work setting up screen layouts.

Here’s what our header looks like:

• A logo aligned to the left.
• A title displayed centrally, using variables for consistent colors across the app.

Dynamic design ensures all components stay visually tight, no matter the screen size. Plus, if your client wants a color change, you only need to adjust it once by modifying the variable!

Adding Filters and Search

Filters and search options make the app user-friendly right from the main screen. These include:

• Text input for search (e.g., project descriptions).
• Classic combo boxes for filtering by region, business purpose, and other custom data fields.
• A handy reset button to clear selections and search terms.

For ease, combo boxes are tied to SharePoint list data, allowing dropdown options to populate dynamically.

Pro Tip: Emoji Hint Text

Want to make your app more engaging? You can add emojis to input fields as hint text. For instance, adding a 🔍 emoji before “Search by description” gives your app a polished, modern feel.

Dynamic Main Gallery

Once the input and filters are set up, we move to the main gallery, where users view existing CapEx entries. The gallery layout is designed with references to container dimensions, so updates to one element are reflected across the screen.

Each entry includes:

• Title of the request.
• Status (e.g., Pending, Approved).
• Project start date.
• Region.

Everything stacks cleanly without manual adjustments. PowerApps’ responsive settings handle alignment and spacing, saving time.

Filtering Data in the Gallery

Filtering in PowerApps combines search terms with multiple dropdown inputs. Here’s how it works:

• Search input filters by the project description.
• Dropdowns filter additional fields like report class or region.
• Multiple filters are combined with logical “AND” statements, ensuring results align with all selected criteria.

If you’re new to filtering in PowerApps, don’t worry. The code is straightforward, and we’ve got reusable snippets you can copy to get started.

Building Multi-Purpose Screens

Efficiency is key when managing form inputs. Instead of creating multiple screens for new submissions, edits, and views, this app uses a single screen that dynamically adjusts based on a form mode variable.

Here’s how it works:

• When users click “New Request,” the form mode switches to new.
• For existing requests, form mode is edit.
• Viewing without changes applies a view mode.

This setup simplifies navigation and form reuse, making your app easier to maintain.

Adding Buttons for Actions

New and reset buttons are simple yet powerful.

• The New Request button assigns the form mode to “new” and navigates users to the submission screen.
• The Reset button clears inputs while restoring filters to default positions, keeping the app tidy.

Responsive Containers for Text and Logos

Using responsive containers in PowerApps makes layout management a breeze. Each container adjusts based on screen size, stacking elements neatly.

For instance:

• An image logo automatically resizes using formulas like parent.height * 0.75.
• Text adjusts its alignment to fit flexibly around surrounding elements.

This eliminates the need for manual adjustments when moving between devices like tablets, desktops, and phones.

Approval Workflow and Attachments

Handling approvals in a CapEx app is critical. In later videos, we’ll dive deeper into multi-stage workflows, but here’s what the process includes:

• Tracking who approved each stage and when.
• Logging comments specific to each approval step.
• Showing the approval process visually for better clarity.

Attachments are simple to manage, allowing users to upload supporting documents straight to SharePoint.

What’s Next?

We’ve only scratched the surface of this modern CapEx app. What’s coming in the next episodes?

• Advanced tab setups for detailed data inputs.
• Submission workflows that feel seamless and intuitive.
• Multi-stage approval processes that handle different teams and priorities.
• A closer look at expense tracking with Excel-like grids, making calculations easy.

Whether you’re building your first app or refining a more complex project, this series will guide you step by step.

Final Thoughts

Creating business apps in PowerApps doesn’t need to be intimidating. By focusing on responsive designs, reusable code, and user-friendly workflows, you can build apps that work for everyone.

What features would you love to see next in this series? Drop a comment or share your thoughts! And don’t forget to hit subscribe for future tutorials. Keeping your app-building journey smooth, efficient, and fun is what it’s all about.

Here’s to mastering PowerApps like a pro—one project at a time!