Herätteet Flow:lla ja adaptiivisilla korteilla Teamsiin

Microsoft Flow -palveluun julkaistiin maaliskuussa (2019) uusi toiminto, jolla voi lähettää adaptiivisia kortteja Microsoft Teams kanavalle. Toiminnon avulla voidaan määrittää tiimi ja kanava mihin adaptiivinen kortti lähetetään sekä määrittää adaptiivisen kortin sisältö ja hyödyntää Flow:n dynaamista tietoa kortin sisällössä.

Adaptiivinen kortti – mikäs se on?

Adaptiiviset kortit (Adaptive Cards) ovat yksinkertainen tapa luoda yhteinäisiä ja monipuolisia sisältöjä yhtenäisellä tavalla eri sovelluksissa. Kortti kuvataan yksinkertaisella JSON-objektilla, joka kuvaa kortin sisällön ja rakenteen. Isäntäsovellus, kuten esimerkiksi Microsoft Teams, huolehtii kortin ulkoasusta ja kortti näyttää tutulta loppukäyttäjälle.

Kortti voi sisältää tekstiä, kuvaa, ääntä ja videosisältöä. Kortin rakennetta voidaan määritellä sarakkeiden, luetteloiden ja kuvasarjojen avulla. Kortilla voi olla myös kenttiä käyttäjän syötteille ja yleisimmät syötetyypit, kuten teksti, lukuarvot, päivämäärät ja valinnat, ovat tuettuja. Korttiin voidaan tarvittaessa määrittää toiminnallisuuksia, jotka näkyvät käyttäjällä painikkeina. Tällä hetkellä toiminnoissa on tuettu URL-osoitteen avaaminen selaimeen, syötteiden lähettäminen ja kortin laajentaminen toisella korttisisällöllä.

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "size": "Medium",
                    "weight": "Bolder",
                    "text": "Example Card"
                },
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "Image",
                                    "style": "Person",
                                    "url": "https://pbs.twimg.com/profile_images/744046415517720580/Thq2F505_bigger.jpg",
                                    "size": "Small"
                                }
                            ],
                            "width": "auto"
                        },
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "weight": "Bolder",
                                    "text": "Matti Paukkonen",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "spacing": "None",
                                    "text": "@mpaukkon",
                                    "isSubtle": true,
                                    "wrap": true
                                }
                            ],
                            "width": "stretch"
                        }
                    ]
                }
            ]
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Content of an example card.",
                    "wrap": true
                },
                {
                    "type": "FactSet",
                    "spacing": "None",
                    "facts": [
                        {
                            "title": "Title",
                            "value": "Project Plan"
                        },
                        {
                            "title": "Task",
                            "value": "Reviw"
                        },
                        {
                            "title": "Assigned to:",
                            "value": "Matti Paukkonen"
                        },
                        {
                            "title": "Due",
                            "value": "20.3.2019"
                        }
                    ]
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "View Document",
            "url": "http://adaptivecards.io"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

Esimerkki kortti JSON-formaatissa

Esimerkkikortti Designerissa

Dokumentaatio, korttiskeema, esimerkkejä ja korttien suunnittelusovellus, Designer, löytyvät täältä https://adaptivecards.io/. Designerin avulla voi visuaalisesti rakentaa oman korttitemplaatin, jota voi hyödyntää omissa sovelluksissa ja Flow:ssa.

Flow-toiminto adaptiivisille korteille

Post Adaptive Card -toiminto

Microsoft Flow -toiminnossa tarvitaan tarvittavat määritykset ovat tiimin id, kanavan id ja viesti (Message). Viestisisältö on adaptiivinen kortti JSON-formaatissa, jonka saa todella näppärästi Designer-suunnittelusovelluksesta. Dynaamista sisältöä on mahdollista käyttää, kuten muutenkin Flow:ssa, mutta expression-formaattia joutuu käyttämään, jos JSON-muotoiltu korttisisältö on lisätty suoraan Viesti-kenttään.

Esimerkkikortti Microsoft Teamsissa

Teamifying with Adaptive Cards

Kirjoitin tammikuussa blogin aiheella: “SharePointin muistutukset Flow:lla Teamsiin“, jossa kuvasin kuinka SharePointin muistutukset voidaan lähettää kanavaan Microsoft Teamsissa.

Nyt adaptiivisilla korteilla voin päivittää kyseisen Flow:n versioon 2.0. Flow:sta tarvitaan poistaa Post Message -toiminto ja lisätä Post Adaptive Card -toiminto silmukkaan, jossa listalta/kirjastosta palautuneet kohteet käsitellään. Muutoksen jälkeen jokaisen muistutettavan listakohteen tiedot lähetetään adaptiivisena kortti Teamsiin. Kortin toiminnot ovat korttikohtaisia ja tässä tapauksessa halusin korttiin linkin, joka avaa käsiteltävän dokumentin suoraan kortista.

Post Adaptive Card -toiminsto

Flow:n suorituksen jälkeen adaptiivinen kortti on näkyvissä Teams-kanavalla.

SharePointin muistutus adaptiivisella kortilla

Yhteenveto

Adaptiviiset kortit ovat loistava tapa tuoda parempaa käyttökokemusta ja tehdä herätteistä toiminnallisia. Ja koska voit käyttää Flow:ta korttien lähettämiseen, voit tehdä helposti kevyitä integraatioita Teamsiin. Ideoita, joita aion toteuttaa lähiaikoina

  • Heräte uusista tehtävistä Plannerissa
  • Palautteen näyttäminen julkisesti Microsoft Forms -lomakkeelta

Mitä opin?

Adaptiiviset kortit eivät (ainakaan vielä) tuo samoja ominaisuuksian kuin Flow:n hyväksyntätoiminnallisuuksien Outlookissa näytettävät kortit (Actionable message cards). HTTP POST -sanomia ei voi käyttää parametrien välittämiseen, esimerkiksi toiselle Flow:lle. Toivottavasti tämä kehittyy.

Ja kuten aina, muista pitää huolta välimerkeistä (“.,:;[{}]”), kun rakennat JSON-sanomia Flow:ssa.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: