Power Apps Cards - How to Make Planning Poker
Tags: powerapps, powerplatform, lowcode, adaptivecards
Published: 2023-08-07 06:00:07

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wu5ggainio9k6ctomhd1.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://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwwdvpjj42ccidb9ugqd.png)
[https://adaptivecards.io/designer/](https://adaptivecards.io/designer/)
[https://dev.teams.microsoft.com/cards](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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jty6ssoer51fa444bz97.png)
_Full list [here](https://learn.microsoft.com/en-us/power-apps/cards/make-a-card/power-fx/intro-to-pfx)_

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2sgo73hlu50446llinr7.png)

~~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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zc0yp59ghy6w0fr6025w.png)

---

## Lets Make the App/Card

![poker app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbejxckpya979e6ijnhh.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t461wnmk6tfno9kee77p.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yryfk07fj2memyb03fjl.png)
_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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsc19y2185l7k14tb7v5.png)

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
        ,
            ""
        )
    }
)    
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2xurzfxeobswjysqb7f.png)

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"
    }
)
```

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

```
LookUp(Tasks,'Round'=textInput2).Controller=User().name
```

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

![card designer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2a07170cxytwr716lny1.png)

---

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](https://github.com/wyattdave/Power-Platform/tree/main/Power%20App%20Artifacts)

**Further Reading**

- https://learn.microsoft.com/en-us/power-apps/cards/overview
- https://www.youtube.com/watch?v=5uR6QCqDG7k