{"id":1398,"date":"2024-12-21T15:09:00","date_gmt":"2024-12-21T20:09:00","guid":{"rendered":"https:\/\/automatethemundane.com\/index.php\/2024\/12\/21\/cards-for-power-apps\/"},"modified":"2024-12-21T15:09:00","modified_gmt":"2024-12-21T20:09:00","slug":"cards-for-power-apps","status":"publish","type":"post","link":"https:\/\/automatethemundane.com\/index.php\/2024\/12\/21\/cards-for-power-apps\/","title":{"rendered":"Cards for Power Apps"},"content":{"rendered":"\n

I really like to use cards when sending notifications to users Adaptive Cards<\/a>, however, making complex cards can sometimes be unwieldy with a large card. Additionally, ensuring user output from a card is complex at times. This is where cards for power apps Cards for Power Apps overview - Power Apps | Microsoft Learn<\/a> comes into play. Cards for Power apps provide a \u201csimple\u201d canvas app interface, allowing users to take full advantage of PowerFX and multiple Datasources. To demonstrate how this all works, I am going to build a card and flow based on a Microsoft Planner board. It will go out each day and get tasks I am assigned, send me a teams message with the card, and allow me to update the task from the card, or navigate to the task and update it. <\/p>\n\n\n

 <\/p>\n\n\n

The end product will look as follows:\n\n<\/p>\n\n\n

\"\"\/<\/figure>\n\n\n

With the ability to click into each item and see any tasks from that selection. <\/p>\n\n\n

\"\"\/<\/figure>\n\n\n

 <\/p>\n\n\n

\"\"\/<\/figure>\n\n\n

 <\/p>\n\n\n

\"\"\/<\/figure>\n\n\n

 <\/p>\n\n\n

Building the Card<\/h1>\n\n\n

From a solution, select new card\n<\/p>\n\n\n

\"\"\/<\/figure>\n\n\n

Give the card a good name and description<\/p>\n\n\n

\"\"\/<\/figure>\n\n\n

This will give us the core of the card and what it needs to start\n\n<\/p>\n\n\n

\"\"\/<\/figure>\n\n\n

💡 If you have ever built an adaptive card in the past you can select JSON in the upper right to see how the card is being created<\/p>\n\n\n

The Tree view on the left hand pane looks just like the canvas app design studio with one minor difference. \n\n<\/p>\n\n\n

\"\"\/<\/figure>\n\n\n

Within each page will be a body and an Actions sections. The body is where the core of the card will go, and the Actions is where buttons can be placed (though they can also be in the body). <\/p>\n\n\n

💡 You will be tempted to delete the two default text labels, however the card designer is a bit finicky and keeping them in there will help for the time being <\/p>\n\n\n

Variables<\/h2>\n\n\n

Before getting to work on the card design, the data structure needs to be defined. If we were connecting this to Dataverse we could easily connect this to a Dataverse table(s) and get rolling. But since we are connecting to Planner we need to have the data \u201cfed\u201d to the card via a Power Automate Flow. To get the data into the card we will make a series of variables. From the left hand pane, select variables and create three variables. <\/p>\n\n\n

\"\"\/<\/figure>\n\n\n
    \n
  1. colPlannerNoDates\n
      \n
    1. Type - Collection<\/li>\n\n\n
    2. Columns\n
        \n
      1. PlanName - Text<\/li>\n\n\n
      2. TaskName - Text<\/li>\n<\/ol>\n<\/li>\n\n\n
      3. Purpose - Collect all tasks that are missing<\/li>\n<\/ol>\n\n\n
        \"\"\/<\/figure>\n<\/li>\n\n\n\n
      4. colPlannerHasDates\n
          \n
        1. Type - Collection<\/li>\n\n\n
        2. Columns\n
            \n
          1. PlanName - Text<\/li>\n\n\n
          2. TaskName - Text<\/li>\n\n\n
          3. DueDate -Text<\/li>\n\n\n
          4. PastDue - Boolean<\/li>\n<\/ol>\n<\/li>\n\n\n
          5. Purpose - Collection for all tasks that have a date\n
            \"\"\/<\/figure>\n<\/li>\n<\/ol>\n<\/li>\n\n\n\n
          6. varSelection \n
              \n
            1. Type - Text<\/li>\n\n\n
            2. Purpose - Used to control the visibility and filters of the collections on screens. <\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n

               <\/p>\n\n\n

              \"\"\/<\/figure>\n\n\n

              Pages<\/h2>\n\n\n

              Main <\/h3>\n\n\n

              On each card, I like to add a header to announce to the user the purpose of the card. Add a container, two columns, and two text boxes<\/p>\n\n\n

              \"\"\/<\/figure>\n\n\n

              Set the container style to emphasis. <\/p>\n\n\n

              Within the first text box add the following text<\/p>\n\n\n

              " 📆 Daily Task Reminder " & Text(Now(),DateTimeFormat.ShortDate)<\/code><\/pre>\n\n\n
               <\/p>\n\n\n
              Within the second text box add the following <\/p>\n\n\n
              "🔔"<\/code><\/pre>\n\n\n
               <\/p>\n\n\n
               <\/p>\n\n\n
              \"\"\/<\/figure>\n\n\n
               <\/p>\n\n\n
              💡 I find the use of emojis within cards to be extremely useful. I have done images in the past, but find emojis work \u201cbetter\u201d<\/p>\n\n\n
              Below the container is a column set with three columns. Each column contains two text fields and a button set with one button. <\/p>\n\n\n
              \"\"\/<\/figure>\n\n\n
                \n
              1. Past Due Column\n
                  \n
                1. Style - attention<\/li>\n\n\n
                2. Width - Stretch<\/li>\n\n\n
                3. Header Text\n
                  "Past Due"<\/code><\/pre>\n\n\n
                   <\/p>\n<\/li>\n\n\n
                4. Value Text Box\n
                  CountRows(Filter(colPlannerHasDates,PastDue = true))<\/code><\/pre>\n\n\n
                   <\/p>\n<\/li>\n\n\n
                5. Button Set\n
                    \n
                  1. Button Verb\n
                    Navigate(hasdates);Set(varSelection, "past")<\/code><\/pre>\n\n\n
                     <\/p>\n<\/li>\n\n\n
                  2. Title\n
                    "View"<\/code><\/pre>\n\n\n
                     <\/p>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n\n\n\n
                  3. Today Column\n
                      \n
                    1. Style - warning<\/li>\n\n\n
                    2. Width - Stretch<\/li>\n\n\n
                    3. Header Text\n
                      "Due Today"<\/code><\/pre>\n\n\n
                       <\/p>\n<\/li>\n\n\n
                    4. Value Text Box\n
                      CountRows(Filter(colPlannerHasDates,PastDue = false))<\/code><\/pre>\n\n\n
                       <\/p>\n<\/li>\n\n\n
                    5. Button Set\n
                        \n
                      1. Button Verb\n
                        Navigate(hasdates);Set(varSelection, "today")<\/code><\/pre>\n\n\n
                         <\/p>\n<\/li>\n\n\n
                      2. Title\n
                        "View"<\/code><\/pre>\n\n\n
                         <\/p>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n\n\n\n
                      3. No Dates Column\n
                          \n
                        1. Style - accent<\/li>\n\n\n
                        2. Width - Stretch<\/li>\n\n\n
                        3. Header Text\n
                          "Missing Dates"<\/code><\/pre>\n\n\n
                           <\/p>\n<\/li>\n\n\n
                        4. Value Text Box\n
                          CountRows(colPlannerNoDates)<\/code><\/pre>\n\n\n
                           <\/p>\n<\/li>\n\n\n
                        5. Button Set\n
                            \n
                          1. Button Verb\n
                            Navigate(missingDates)<\/code><\/pre>\n\n\n
                             <\/p>\n<\/li>\n\n\n
                          2. Title\n
                            "View"<\/code><\/pre>\n\n\n
                             <\/p>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            Has Dates<\/h3>\n\n\n
                            The has dates page will follow the same format as the first; the container at the top and the columns and the text. <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            The header text will be as follows <\/p>\n\n\n
                            " 📆 Daily Task Reminder - " & If(varSelection = "today", "Due Today","Past Due")<\/code><\/pre>\n\n\n
                             <\/p>\n\n\n
                            The header icon will be <\/p>\n\n\n
                            "🕔"<\/code><\/pre>\n\n\n
                             <\/p>\n\n\n
                             <\/p>\n\n\n
                            To view the actual data, a table is added. Within the table three columns and two rows are used. <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            Each row will contain a text box. The first row will serve as the header for the table. For the second row set the data as follows.<\/p>\n\n\n
                            If(varSelection= "today", Filter(colPlannerHasDates,PastDue = false),Filter(colPlannerHasDates,PastDue = true))<\/code><\/pre>\n\n\n
                             <\/p>\n\n\n
                            This will create a row for each item in the collection when data is present. <\/p>\n\n\n
                            To display the data simply use PowerFX in each text box<\/p>\n\n\n
                            \n
                            \n
                            ThisItem.PlanName<\/code><\/pre>\n\n\n
                             <\/p>\n\n<\/div>\n\n\n
                            \n
                            ThisItem.TaskName<\/code><\/pre>\n\n\n
                             <\/p>\n\n<\/div>\n\n\n
                            \n
                            ThisItem.DueDate<\/code><\/pre>\n\n\n
                             <\/p>\n\n<\/div>\n\n<\/div>\n\n\n
                            Finally, in the Actions section, add a single button that will return the user to the main screen. <\/p>\n\n\n
                            Navigate(main);Set(varSelection,"")<\/code><\/pre>\n\n\n
                             <\/p>\n\n\n
                            Missing Dates<\/h3>\n\n\n
                            The missing dates page will follow the same style as the has dates page. However, there will be no date column added to the table. <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            The data for the second row will be the collection with no dates<\/p>\n\n\n
                            colPlannerNoDates<\/code><\/pre>\n\n\n
                             <\/p>\n\n\n
                             <\/p>\n\n\n
                            Power Automate Flow<\/h1>\n\n\n
                            This flow will trigger everyday and uses the Lists my tasks from the Planner Connector<\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            Then to ensure that we only get tasks that are in progress or not started add a filter array.<\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                             <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            @not(notequals(@{item()?['percentComplete']},"100"))<\/code><\/pre>\n\n\n
                             <\/p>\n\n\n
                             <\/p>\n\n\n
                            Two array variables are then created <\/p>\n\n\n
                             <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            Then for each loop will be added using the body of the filter array<\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            The first step within the loop will be to reach out and get the plan name using the graph endpoint<\/p>\n\n\n
                            💡 This has to be done because when listing \u201cMy Tasks\u201d, only the ID of the plan is given and not the name. <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                             <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            Then a condition that check for missing dates is added\n\n<\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                             <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            If the condition is false the array varMissingDatesTasks is appended<\/p>\n\n\n
                             <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            If it is true, a condition will be added to check if it is past due. <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            If true the array variable varTasksHasDates will be appended to<\/p>\n\n\n
                             <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            string(formatDateTime(item()?['dueDateTime'], 'yyyy-MM-dd'))<\/code><\/pre>\n\n\n
                             <\/p>\n\n\n
                             <\/p>\n\n\n
                            If it is false, a third and final condition will be added to check if the date of the task is today. <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            Then the array varTasksHasDates will be appended again except the Past Due Column will be false. <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                             <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            After the loop, a generate card action is added. In the action, the card created earlier is selected and the two arrays are added as inputs. <\/p>\n\n\n
                             <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                             <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            Then a final action is added that will post the card to the user in a chat<\/p>\n\n\n
                             <\/p>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                            \"\"\/<\/figure>\n\n\n
                             <\/p>\n\n\n
                             <\/p>\n\n","protected":false},"excerpt":{"rendered":"
                            I really like to use cards when sending notifications to users Adaptive Cards, however, making complex cards can sometimes be unwieldy with a large card. Additionally, ensuring user output from a card is complex at times. This is where cards for power apps Cards for Power Apps overview – Power Apps | Microsoft Learn comes […]<\/p>\n","protected":false},"author":1,"featured_media":1383,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[51,53,30,52],"tags":[],"class_list":["post-1398","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cards","category-planner","category-power-automate","category-solutions","entry","has-media"],"jetpack_featured_media_url":"https:\/\/automatethemundane.com\/wp-content\/uploads\/2024\/12\/photo-1532630174493-69e1fe9fead2-scaled.jpg","_links":{"self":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/1398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/comments?post=1398"}],"version-history":[{"count":0,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/1398\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/media\/1383"}],"wp:attachment":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/media?parent=1398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/categories?post=1398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/tags?post=1398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}