Designing the New Request Button and Form

The new request feature is all about creating a form that integrates seamlessly into your app with modern design elements. Here’s how it works:

1. Modern Buttons in Action These buttons come with built-in icons, reducing the extra work of managing containers and alignment. You can place an icon before or after the button text, and you’ve got plenty of styles to choose from. It’s a small change, but it simplifies the design process significantly.
2. Dynamic Forms with Multiple Modes To keep things efficient, we use the same form for both new requests and editing existing ones. A simple form mode variable (like varFormMode) dictates whether the form is in “new” or “edit” mode. This approach eliminates the need to recreate forms for each use case. Bonus: It’s easier to maintain as your app grows.
3. Transitions and Responsiveness The app leverages responsive containers to adapt to different layouts. While the app discussed is designed for desktop use, responsive containers make it possible to transition to a mobile-friendly design if needed. If your app needs to be mobile-ready, always ask that question during the requirements-gathering phase.

Tabbed Forms and Their Power

Modern tabs allow you to group and display form sections dynamically. For instance, in “edit” mode, you might show tabs for request details, expense details, attachments, and approvals. In “new” mode, you might only show the request details tab. These tabs simplify navigation and make it easier for users to focus on what’s relevant.

What’s the key to making this work? It’s all in how you manage the tab properties. By tying the visibility of each tab to the form mode, you can ensure users only see what they need based on the action they’re performing.

Designing for Usability: The Finish Line Matters

Good design isn’t just about how things look; it’s about how they feel. Here’s what we implemented to improve usability:

• Submit and Cancel Buttons With every form, there are two critical actions: submit and cancel. When users hit “cancel,” the app clears out any changes, resets the form, and navigates them back to the home screen. Submit does exactly what you’d expect: pushes the data to your database and confirms success with smooth navigation back to the main app.
• Feedback for Clickable Items When users hover over items in the gallery, the mouse pointer changes to a clickable icon. It’s a small but effective way to guide users through the app. This visual indicator was achieved by overlaying buttons on gallery items and linking them dynamically to data.

Good News, Bad News: The State of Modern Controls

Let’s get one thing clear: modern controls are a work in progress. They offer a sleeker look and feel, but they’re not without their challenges. Here’s what we learned this week.

What Works Well

1. Easy-to-Use Date Picker No more frustration with extra clicks! Now, users can select a date and have it applied immediately, saving time and reducing friction. You can also customize the date format, offering either a short or more detailed style.
2. Built-In Icons With icons baked into modern buttons, you no longer need to use containers or do manual calculations. It’s a time-saver for developers and makes the app cleaner overall.
3. Tabs That Adapt Grouping by sections with tabs improves navigation for complex apps. It just feels more organized, and users can interact with the app more efficiently.

What Needs Work

1. Display Mode Glitches While modern buttons offer flexibility, there’s still a bug with disabling a button based on changes to a form. Even when no changes are detected, the submit button might remain active. For now, this may require reverting to classic controls in specific scenarios.
2. Preview Mode Oddities Because modern controls are still in preview, occasional quirks can disrupt the user experience. Rollback options are available, but they require a little extra planning.
3. Responsiveness Needs More Attention While the app is designed for desktop users, converting it to a mobile-friendly version is possible with containers. If mobile use is part of your requirements, it’s best to start with responsiveness in mind from day one.

Takeaways and What’s Next

Modern controls are the future of PowerApps, but they’re not without their growing pains. In this session, we explored how to make the most of these tools while staying mindful of their limitations. For developers, the ability to reuse forms, dynamically update tabs, and streamline button functionality is a game-changer (yes, we used that word, but it’s true!).

Coming up next in this series, we’ll dive into creating Excel-like grid functionality, where users can add or delete rows directly in the app. We’ll also explore modern pop-ups for confirmation workflows and tackle the approvals process. Don’t forget to subscribe so you don’t miss it.

Until next time, keep experimenting, keep innovating, and most of all, keep creating PowerApps that make life easier for your users. Got questions or want to see a mobile adaptation? Drop a comment below. Happy coding!