Adaptív kártyák sablonozása

Örömmel osztjuk meg az új eszközök előnézetét, amelyek segítenek adaptív kártyák létrehozásában, újrafelhasználásában és megosztásában .

Fontos

Kompatibilitástörő változások a 2020. májusi kiadásra jelölt változatban

A templating kiadási jelölt tartalmaz néhány kisebb kompatibilitástörő módosítást, amelyekről tudnia kell, ha a régebbi csomagokat használja. Részletekért lásd alább.

Megtörő változások 2020 májusától

  1. A kötés szintaxisa a következőre {...}${...}változott: .
    • Például: "text": "Hello {name}" válik "text": "Hello ${name}"
  2. A JavaScript API már nem tartalmaz objektumot EvaluationContext . Egyszerűen adja át az adatokat a expand függvénynek. A részletekért tekintse meg az SDK oldalát .
  3. A .NET API át lett tervezve, hogy jobban megfeleljen a JavaScript API-nak. A részletekért tekintse meg az SDK oldalát .

Hogyan segíthet a sablonozás?

A templating lehetővé teszi az adatok elkülönítését az adaptív kártyán lévő elrendezéstől .

Segít egyszer megtervezni egy kártyát, majd valós adatokkal feltölteni

Jelenleg lehetetlen létrehozni egy kártyát az Adaptív Kártyatervezővel és a JSON-t használva dinamikus tartalommal feltölteni az adathalmazt. Ennek eléréséhez egyéni kódot kell írnia egy JSON-sztring létrehozásához, vagy az Objektummodell SDK-k használatával létre kell készítenie egy OM-t, amely a kártyáját jelöli, és szerializálni kell a JSON-ra. Mindkét esetben a Tervező egy egyszeri, egyirányú művelet, és nem teszi egyszerűvé a kártya dizájn későbbi módosítását, miután kóddá alakították.

Kisebbé teszi a vezetéken keresztüli átvitelt

Képzeljen el egy világot, ahol egy sablon és az adatok közvetlenül az ügyfélen kombinálhatók. Ez azt jelenti, hogy ha ugyanazt a sablont többször is használja, vagy új adatokkal szeretné frissíteni, csak új adatokat kell küldenie az eszközre, és újra és újra használhatja ugyanazt a sablont.

Segít létrehozni egy nagyszerű megjelenésű kártyát csak az Ön által megadott adatokból

Úgy gondoljuk, hogy az Adaptív kártyák nagyszerűek, de mi van, ha nem kell adaptív kártyát írnia mindenhez, amit meg szeretne jeleníteni egy felhasználónak? Egy (alább ismertetett) sablonszolgáltatással olyan világot hozhatunk létre, ahol mindenki bármilyen típusú adathoz hozzá tud járulni, felderíteni és megosztani sablonokat.

Ossza meg a saját projektjeiben, a szervezetében vagy a teljes interneten.

Az AI és más szolgáltatások javíthatják a felhasználói élményt

Az adatok tartalomtól való elválasztása lehetőséget nyújt a mesterséges intelligenciának és más szolgáltatásoknak arra, hogy következtetéseket vonjanak le az általunk látott kártyák adatai alapján, növelve ezzel a felhasználói hatékonyságot, vagy segítve minket a dolgok megtalálásában.

Mi az adaptív kártyák sablonozása?

3 fő összetevőből áll:

  1. A sablonnyelv a sablonkészítéshez használt szintaxis. A Tervező lehetővé teszi a sablonok előzetes megtekintését a tervezéskor a "mintaadatok" beleszámításával.
  2. A Templating SDK-k minden támogatott adaptív kártyaplatformon léteznek. Ezek az SDK-k lehetővé teszik egy sablon feltöltését valós adatokkal, a háttérrendszeren vagy közvetlenül az ügyfélen.
  3. A Sablonszolgáltatás egy megvalósíthatósági ellenőrző szolgáltatás, amely lehetővé teszi, hogy bárki megtalálja, hozzájáruljon és megossza egy jól ismert sablonkészletet.

Sablon nyelve

A sablonnyelv az adaptív kártyasablonok létrehozásához használt szintaxis.

Megjegyzés:

Kövesse az alábbi példával együtt egy új lap megnyitásával

https://adaptivecards.io/designer

Az Előnézet mód gombra kattintva válthat a tervező mód és az előnézeti mód között.

Tervező képernyőképe

Az újonnan frissített Tervező támogatja a sablonok készítését és a mintaadatok megadását a kártya tervezéskor történő előzetes megtekintéséhez.

Illessze be az alábbi példát a Kártya Payload Szerkesztő paneljére:

EmployeeCardTemplate.json

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "ColumnSet",
            "style": "accent",
            "bleed": true,
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${photo}",
                            "altText": "Profile picture",
                            "size": "Small",
                            "style": "Person"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Hi ${name}!",
                            "size": "Medium"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Here's a bit about your org...",
                            "spacing": "None"
                        }
                    ]
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "Your manager is: **${manager.name}**"
        },
        {
            "type": "TextBlock",
            "text": "Your peers are:"
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "$data": "${peers}",
                    "title": "${name}",
                    "value": "${title}"
                }
            ]
        }
    ]
}

Ezután illessze be az alábbi JSON-adatokat a Mintaadat-szerkesztőbe.

A mintaadatok segítségével pontosan láthatja, hogyan fog megjelenni a kártya futásidőben a tényleges adatok átadásakor.

EmployeeData

{
    "name": "Matt",
    "photo": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
    "manager": {
        "name": "Thomas",
        "title": "PM Lead"
    },
    "peers": [
        {
            "name": "Lei",
            "title": "Sr Program Manager"
        },
        {
            "name": "Andrew",
            "title": "Program Manager II"
        },
        {
            "name": "Mary Anne",
            "title": "Program Manager"
        }
    ]
}

Kattintson az Előnézet mód gombra. A kártya renderelésének a fent megadott mintaadatoknak megfelelően kell megjelennie. Nyugodtan finomhangolhatja a mintaadatokat, és valós időben tekintheti meg a kártyafrissítést.

Gratulálunk, most készítetted el az első adaptív kártyasablonodat! A következő lépésben megtudhatja, hogyan töltheti fel a sablont valós adatokkal.

További információ a sablon nyelvéről

SDK-támogatás

A templating SDK-k lehetővé teszik egy sablon valós adatokkal való feltöltését.

Megjegyzés:

Jelenleg a .NET-hez és a NodeJS-hez is elérhetőek a templating SDK-k. Idővel az összes fennmaradó adaptív kártyaplatformhoz ( iOS, Android, UWP stb.) ideiglenes SDK-kat fogunk kiadni.

Plattform Csomag Felszerel Dokumentáció
JavaScript npm telepítése npm install adaptivecards-templating Dokumentáció
.NET Nuget telepítése dotnet add package AdaptiveCards.Templating Dokumentáció

JavaScript-példa

Az alábbi JavaScript azt az általános mintát mutatja be, amely egy sablon adatokkal való feltöltésére szolgál.

var template = new ACData.Template({ 
    // Card Template JSON
});

var card = template.expand({
    $root: {
        // Data Fields
    }
});

// Now you have an AdaptiveCard ready to render!

C# példa

Az alábbi C# a sablon adatokkal való feltöltéséhez használt általános mintát mutatja.

var template = new AdaptiveCards.Templating.AdaptiveCardTemplate(cardJson);
   
var card = template.Expand(new {Key="Value"});

// Now you have an AdaptiveCard ready to render!

További információ a templating SDK-król

Sablonszolgáltatás

Az Adaptív kártyák sablonszolgáltatás egy megvalósíthatósági ellenőrző szolgáltatás, amely lehetővé teszi, hogy bárki megtalálja, hozzájáruljon és megossza egy jól ismert sablonkészletet.

Ez akkor hasznos, ha meg szeretne jeleníteni néhány adatot, de nem szeretne foglalkozni azzal, hogy egyéni adaptív kártyát írjon hozzá.

A sablon lekérésére szolgáló API elég előremutató, de a szolgáltatás valójában sokkal több lehetőséget kínál, beleértve az adatok elemzését és egy olyan sablon megtalálását, amely működhet Önnek.

HTTP GET https://templates.adaptivecards.io/graph.microsoft.com/Profile.json

Minden sablon egy GitHub-adattárban tárolt sima JSON-fájl, így bárki más nyílt forráskódú kódhoz hasonlóan közreműködhet bennük.

További információ a kártyasablon szolgáltatásról

Mi a következő lépés, és hogyan küldhet visszajelzést?

A sablonozással és a prezentáció adatokról való szétválasztásával sokkal közelebb kerülünk küldetésünkhöz: "az alkalmazások és szolgáltatások közötti standardizált tartalomcserével rendelkező ökoszisztéma". Sokat tudunk nyújtani ezen a területen, ezért érdemes figyelemmel követni bennünket, és ossza meg velünk a tapasztalatait a GitHubon!

  • Last updated on