UI

PowerApps Modern & Minimalistic Design Tip #1 – Box Shadows

/ Geetha Sivasailam / 19 Comments

Do you want to add drop shadows to elements in your PowerApps without using images?

PowerApps does not provide an OOB property to set shadows for elements or controls but you can use the HTML text control to add html with custom styles to implement the desired shadow effect.

SVGs are another great way to generate custom icons, images, shadow effects, animations and much more. I love going the SVG route for animation effects and complex visuals as such. In this post we will walk through a simple html-css trick for adding effects to your app elements without the need for images.

Continue reading →

Fancy & Functional multi-step form indicators and breadcrumbs in PowerApps – Part 1

/ Geetha Sivasailam / 7 Comments

According to the Endowed Progress Effect (which is a phenomenon integrated into designing any UX process based on how the human brain makes decisions) we’re more likely to complete an action if there’s an illusion of progress and an effective visual aid of contextual information for landing pages. The best examples I can think of are –

  1. Multi-step forms that break up a long intimidating form into smaller sections and provides the user a sense of accomplishment as they proceed from step to step.
  2. Breadcrumb navigation to improve findability for users especially in apps with a lot of screens.

How do we incorporate those fancy, stylish and yet functional multi-step form indicators seen on websites in PowerApps using the OOB controls without custom scripts?

This is a two part series post with the first being multi-step form indicators in PowerApps and the second part of the series will walk through creating breadcrumb navigation from scratch. 

Continue reading →

Fancy & Functional multi-step form indicators and breadcrumbs in PowerApps – Part 2

/ Geetha Sivasailam / 1 Comment

In the first part of this series we walked through creating multi-step form indicators in PowerApps. This post will help build a simple secondary navigation scheme using breadcrumbs to indicate the location of a user within the app’s hierarchy. They come in handy when apps have several nested screens and an effective visual aid is needed from a user’s perspective for contextual information around primary app screens.

Brian Dang has a terrific video on a fully functional back button system that breadcrumbs your way back based on your clicks. It’s multi-functional and can also be used for building an undo system. This post is an inspiration from his work. Thanks to Mr. Dang for the useful design pattern!

Below is the sample breadcrumb navigation we’ll be creating. I also uploaded a sample PowerApp to the PowerApps Community Gallery with the below breadcrumb design pattern and multi-step form indicator templates. Feel to free to reuse and/or provide feedback. I’d love to know if it helped enhance your PowerApps user experience.

Continue reading →