Project Manager Tool (Kanban Board)

I rebuilt a popular project management webapp inside Power Apps for fun. I wanted to demonstrate the UI and UX potential of the platform and challenge myself to emulate as much of the usability of the original as possible.

One of my favourite aspects of this app was not the vibrant UI or detailed interface but the handling of pop-up or modal windows. There are many of these small dialogs within the user journey, be they for creating new boards, adding users or selecting options. Once visible, they need to be cleared for the journey to progress.

One issue commonly encountered in Power Apps development is the clearing of modal windows requiring an additional click from the user. This could be them having to click a close button, or having an invisible mask element underneath the window that closes the window when clicked.

The problem with these approaches is, the user doesn’t expect them, as they are used to modern OSs and websites that allow them to interact with other controls, implicitly closing a modal window that may have been on display prior. For example, a user will not expect an expanded dropdown to prevent interaction of another control on the page.

Obviously, Power Apps form inputs do not require additional clicks to close, but user-built dialogs and popups do. There is no native way to close them when interacting with other objects – code to disable their visibility, via variables, must be placed on other elements.

This app does not avoid that, but adds a novel approach to maintaining this. Instead of using variables to control visibility of modal windows, their visibility is dependent on records in a collection. So instead of:

UpdateContext({varShowUserProfile:true})

We instead call:

Collect(colVisibility, { Value:"User Profile" })

And set our window’s visibility to:

"User Profile" in colVisibility.Value

Now when we wish to close any windows, we can simply clear our visibility collection. We don’t need to switch off any variables. This saves us the time of having to update all code when adding a new window, and variable.