DEV Community

Cover image for Power Apps Cards - How to Make Planning Poker
david wyatt
david wyatt

Posted on • Updated on

Power Apps Cards - How to Make Planning Poker

In December 2022 Power Apps Cards launched, creating Canvas Apps that can be embedded in Teams channels/meetings. But since then it has gone quiet, with not much on an update front, so I thought I would take a look and see what I can make.

My idea was a Planning Poker app, so that during refinement meetings the app can be posted in the meeting and everyone can add their points.

planning poker gif

Before I start on the guide, I thought I would share the key things I found out about Power App Cards:

It's an Adaptive Card not an App
I had this dream that Power Apps Cards would be a little app running in teams, it's not, it's an Adaptive card. Just compare the design studios of Adaptive Cards and Power App Cards:

adaptive card designers
https://adaptivecards.io/designer/
https://dev.teams.microsoft.com/cards

The only additional functionality is the use of Connectors. It looks like the Adaptive card is loaded through Teams Power App, which refreshes the data connections.

Limited Components
As you can see the components are just Adaptive card components, so you don't have the following:

  • Gallery (Though components do have a Repeat for Every parameter which adds similar functionality)
  • Datatable (Same as above)
  • ComboBox
  • Timer
  • Checkbox
  • Radio
  • Toggle
  • Html
  • Icons
  • Pen
  • Video
  • Add media

(just to name a few)

On top of that there is no X/Y and Width/Height parameters for any, so no positioning, and there is no OnChange triggers.

Power FX light
The card uses Power FX like Canvas apps, but its very limited, check out a small snapshot of what is not compatible.

power fx card compatibility
Full list here

Only Dataverse
Even though in a demo video I saw it had all the connections, at the moment it only has Dataverse.

only dataverse connectors

What's really annoying though is it can't read custom tables, so you are stuck with out of the box ones. Update it turns out you can use custom tables, they just take a while to appear in the data source list after being created.

Doesn't Appear in meeting chat
I wanted to have the app appear in the chat sidebar of a meeting, but currently it only opens when in a main chat window.

ALM
From the Card you cant export, but you can add it to a solution and then export between environments.

add card to solution


Lets Make the App/Card

poker app

So the Planning App needs the following key requirements:

  • Record everyone's name and points
  • Allows everyone to see the results
  • One person has the rights to show results (before everyone sees name of participants but not their points)

Data
For everyone to see the data we need to store it somewhere (there is persistent variables but they are only for the user). We can only use Dataverse and we can't use custom tables 😣 so I used the Task table and added the following fields:

  • Dev name - name of dev pointing
  • Round - unique reference for the scoring round
  • Score - points used (should so be called Points but oh well)
  • Controller - name of user who can show points
  • Complete - if the round is complete (set by Controller)

task table

Components
The Card has the following key components (not including all display images and labels):

  • Input - Round Id
  • Button - Refresh
  • Dropdown - Points (0,1,2,3,5,8,13,21)
  • Label - Controller of Round (visible only if round in Dataverse)
  • Column set with 2 columns (Repeat for Every set to filtered Dataverse Table)
  • Column 1 label - Dev name from Dataverse
  • Column 2 label - Points from Dataverse
  • Button - Complete round (visible only if user = Controller)
  • Button - Submit points

Workflow
The process is:

Add Round Id and press refresh. Why the refresh button, well there is no OnChange trigger on the Round input and the card is not volatile (i.e. if we update a filter value it does not change the data). So the button press refresh's the data set, well no, as the Power FX Refresh() function is one of those not available, so how do we refresh. Well luckily there is a workaround, Set variables. If we store the Round id in a persistent variable and set the input to it as a default, when we Set the variable it refreshes the data 😎

variable
Key all out, tick the 'When sending this card, this value can be customized'. Its designed for Power Automate passing variables, but we need it as else we error when loading (as the Round Id input is empty it passes a null to the filter)

parameters

Next the user adds their points for the round (Dropdown), then presses the Submit button with below code triggered:

Collect(Tasks,{
    'Dev name':User().name,
    'Score':dropDown1,
    'Round':textInput2,
    'Controller':If(
            CountRows(
                Filter(Tasks,'Round'=textInput2)
            )=0
        ,
            User().name
        ,
            ""
        )
    }
)    
Enter fullscreen mode Exit fullscreen mode

We cant use Patch to create new records (dam Power FX light) so it's a Collect. The Controller role is given to the user who creates the first round entry (but they have to submit points to create the first entry).

The users entry should now appear in the Column with Dev name item, to see others the user will have to press that refresh button (no timer component for background refreshes 😣).

If the user is the Controller, when they are happy everyone has submitted their points they press the Show button to reveal everyone's points.

For this to work we need at logic for the visibility of each users points and to set what the Show button press does.

First we have to add condition to the Points in the Column 2. We set the isVisible parameter on the Column to below.

visible condition

Then on the Show press we set the round to complete, with verb set to Power FX code below:

Patch(Tasks,
    LookUp(Tasks,'Round'=textInput2)
,   
    {
        Complete:"yes"
    }
)
Enter fullscreen mode Exit fullscreen mode

And to only show the button for the controller we add below for the button isVisible:

LookUp(Tasks,'Round'=textInput2).Controller=User().name
Enter fullscreen mode Exit fullscreen mode

You can also add additional Column sets to make it look nicer, images, title and additional label showing who the Controller is.

card designer


Overall I have mixed feelings, I love the idea of the Power App Card, but I'm not sure about Microsoft's implantation, in most cases either an Adaptive card or Canvas app would be the better solution. The early life limitations also make it even less useful (Only Dataverse connector).

I would have loved to have seen a fully-fledged widget approach, with the app having almost full capability and be a perfect companion for teams to collaborate during meetings (imagine custom polls etc). It will also be interesting to see how Loops evolves, as it may steal a lot of Power Apps Cards use cases, but I'm excited to see how it continues to develop.


A download of the card can be found here

Further Reading

Top comments (4)

Collapse
 
maximmatth profile image
MaximMatth • Edited

Super interesting to see someone diving into Power Apps Cards. I've been playing around with Power Apps for a while, but haven't really gotten into the Cards aspect as much as I'd like. The Planning Poker app idea sounds like a great use case for these Cards, especially for Agile teams that use Teams for communication.
Have you considered incorporating any gamification aspects into your Planning Poker app? A point system or something like that could make the refinement meetings more engaging. Speaking of games and points, you might find it interesting to check out some gaming strategies on λ°”μΉ΄λΌμ‚¬μ΄νŠΈ. This website has insights that might even inspire you to add some extra features to your app.

Collapse
 
wyattdave profile image
david wyatt

Thank you, I was the same, I couldn't get into them as never seemed a good use case. In the end a Canvas App could do the same for the poker app, but it's given me the drive to consider it more now I have built with it

Collapse
 
balagmadhu profile image
Bala Madhusoodhanan

@wyattdave Cant wait to try this !!

Collapse
 
tesafroiser profile image
Tera Froiser • Edited

Go to Power Apps and select the "Create a new app" option. Select the application type according to your team's goals. Personally, I found Best Jackpot City Casino Games, Casinos Approved by my friend. Overall, Power Apps provides flexible tools for creating apps, including things like poker scheduling, that you can customize to suit your team's needs. But I personally didn't like it.