Power Apps Desktop Canvas App
The business requirements for this project required complex Power FX logic to create two separate assignment rotation galleries per county, one for priority one assignments and another for priority two assignments for supervisors (the end-users) to standardized and automate case assignments. In addition, users needed a way to skip specialists and manually change the order of the rotation without assigning or skipping should the situation call for it. Moreover, the app features a method of adding new specialists to the app, making them inactive, adding or removing them from the rotation which removes them from the rotation gallery, and viewing their real time skip and assignment data. This solution was created in a Dataverse for Teams environment for security simplification and licensing cost minimization. Rather than utilizing the native capabilities of Dataverse, pre-existing Microsoft Lists were leveraged as the data source.
My Role
Based on an idea proposed by a colleague, I led the design and end‑to‑end development.
Data Model
- Relationships
- Specialist > One-to-Many > Referrals
- Specialists > One-to-Many > Skips
- Supervisors > One-to-Many > Specialists
- Supervisors > One-to-Many > Referrals
County Rotations Screen
Referral Management Screen
Filter Pane Power FX Logic
Specialist Dashboard Screen
Power FX for Assign Logic
After the assignment form is successfully submitted, the specialist’s rotation sequence number is updated automatically. First, the Power FX logic counts all the specialist’s assignments and patches that value to the ‘Referrals Assigned’ field. (Note: Because the assignment form was already submitted, this count includes the newly created assignment). Next, the formula fetches the highest existing ‘P1 Rotation Sequence Number’ for specialists of the same county (as the selected gallery item) and adds one to it. This updated figure is then patched to the specialist’s record, ensuring the newly assigned specialist rotates to the end of the rotation gallery. Since the gallery is sorted in descending order by the sequence number, the specialist who just received an assignment goes to the bottom of the list. The same basic logic applies to skipping. The only difference is the ‘Referrals Assigned’ field isn’t patched. Instead, a new record is created on the related Skips table.
Power FX for Skip Logic
After entering a skip reason and confirming, a new record is patched to the Skip Table with the worker’s name, the reason for the skip, and the current date and time represented by the Power FX function “Now()” in the “Date/Time of Skip” field. Next, a local variable leveraged in the visible property of a skip confirmation popup container is set to false to hide it. Finally, the specialist table is patched with the highest sequence number in the applicable county added by 1.
Power Fx for Manual Rotation Change Logic
Users can click arrows in the gallery to manually move items up or down in the rotation. The applicable controls are highlighted below. The associated logic is described in the Power Fx formula below.
Director Dashboard (Embedded Power Bi Tile)
Tutorials & Support Screen
In addition to core functionality, the app also has a mechanism for problem reports and suggestions.
Challenges
Some of the biggest challenges with this solution were more design related than logic related. I wanted this app to look bespoke and less like what one traditionally associates with Power Apps design.
Glassmorphism is achieved by using an RGBA value of RGBA(0,0,0,.3) for a semitransparent background. Then, use a very light blue (almost white) border to simulate the edges of glass. This is the easiest way to do it without the HTML Text control. Here are the two methods shown for comparison with the HTML Text method on the left and the simplified method on the right.
"<div style='
width:" & Container58_2.Width & "px;
height:" & Container58_2.Height & "px;
background:rgba(100,100,100,0.5);
backdrop-filter:blur(3px);
border-radius:0px;
'>
</div>"Gradients are another design trend that can be the difference between an app that looks dated and one that looks modern. And to my continued surprise, Power Apps does NOT have a method of applying gradients to controls directly. Once again, I utilized the HTML text control to apply gradients. Using a linear gradient via the HTML control introduces a splash of color from my theme, a plum purple color in this case, to the navigation menu.
"<div style='
margin:0;
padding:0;
background: linear-gradient(
180deg,
rgb(68, 68, 68) 0%,
rgb(68, 68, 68) 70%,
rgb(75, 70, 80) 100%
);
width:" & 'Navigation Component'.Width & "px;
height:" & 'Navigation Component'.Height & "px;
'></div>
"
One of the trickier design problems I ran into involved controlling the Y property of the action popup on the referral management screen. The popup couldn’t live inside the gallery template, because that would cause it to appear once per row which wouldn’t work for my design. It needed to sit at the screen level, above the gallery, so it could overlay the selected item properly.
At first, I tried setting the popup’s Y position to the selected gallery item. That turned out to be a dead end because gallery items don’t have unique Y coordinates. Every row is just a repeated template, so the selected item’s Y value is always 0, which pushed the popup to the top of the screen.
Once I worked around that limitation, I still had another challenge: preventing the popup from getting clipped off the bottom of the screen when the selected item was near the end of the gallery. To solve that, I needed a way to dynamically offset the popup’s Y position based on where the selected item sits within the gallery. That offset ensures the popup stays fully visible, even when the user selects one of the last few rows.
The filtering logic makes the formula look far more complicated than it actually is, so here’s a modified version with a placeholder that represents where the Items property of a gallery would go to make this work with any gallery.
Results
