Adaptív kártyák sablonnyelve

A templating lehetővé teszi az adatok elkülönítését az adaptív kártyán lévő elrendezéstől . A sablonnyelv a sablon létrehozásához használt szintaxis.

Kérjük, olvassa el ezt az adaptív kártya sablonozás áttekintéséhez

Fontos

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

Keményen dolgoztunk a templating bevezetésén, és végre a célegyenesben vagyunk! A kiadás végső szakaszában néhány kisebb, a meglévő funkciókat befolyásoló változtatást kellett végrehajtanunk.

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

A kötés szintaxisa a következőre {...} változott: ${...}
- Például: "text": "Hello {name}" válik "text": "Hello ${name}"

Adatkötés

A sablon írása olyan egyszerű, mintha a kártya "nem statikus" tartalmát "kötési kifejezésekre" cseréli.

Statikus kártya adatterhelés

{
   "type": "TextBlock",
   "text": "Matt"
}

Sablon terhelése

{
   "type": "TextBlock",
   "text": "${firstName}"
}

A kötési kifejezések szinte bárhol elhelyezhetők, ahol a statikus tartalom elhelyezhető
A kötés szintaxisa a következővel ${}kezdődik és végződik: . Például ${myProperty}
Egy objektumhierarchia alobjektumaihoz a Dot-notation használatával férhet hozzá. Például ${myParent.myChild}
A kecses nullkezelés biztosítja, hogy ne kapjon kivételeket, ha null tulajdonsághoz fér hozzá egy objektumgráfban
Az Indexelő szintaxissal kulcs vagy tömb elemei alapján kérdezheti le a tulajdonságokat. Például ${myArray[0]}

Az adatok megadása

Most, hogy már rendelkezik egy sablonnal, meg kell adnia azokat az adatokat, amelyek teljessé teszik azt. Ehhez két lehetősége van:

A lehetőség: Beágyazott a sablon hasznos adatai között. A AdaptiveCard sablon payloadba közvetlenül megadhatja az adatokat. Ehhez egyszerűen adjon hozzá egy $data attribútumot a gyökérobjektumhoz AdaptiveCard .
B lehetőség: Különálló adatobjektumként. Ezzel a beállítással két külön objektumot adhat meg a Templating SDK-nak futásidőben: a template és a data. Ez lesz a gyakoribb megközelítés, mivel általában létrehoz egy sablont, és később dinamikus adatokat szeretne szolgáltatni.

Opció A: Beágyazott adatok

{
    "type": "AdaptiveCard",
    "$data": {
        "employee": {
            "name": "Matt",
            "manager": { "name": "Thomas" },
            "peers": [{
                "name": "Andrew" 
            }, { 
                "name": "Lei"
            }, { 
                "name": "Mary Anne"
            }, { 
                "name": "Adam"
            }]
        }
    },
    "body": [
        {
            "type": "TextBlock",
            "text": "Hi ${employee.name}! Here's a bit about your org..."
        },
        {
            "type": "TextBlock",
            "text": "Your manager is: ${employee.manager.name}"
        },
        {
            "type": "TextBlock",
            "text": "3 of your peers are: ${employee.peers[0].name}, ${employee.peers[1].name}, ${employee.peers[2].name}"
        }
    ]
}

B. lehetőség: A sablon elválasztása az adatoktól

Másik lehetőségként (ami valószínűbb is), egy újrahasználható kártyasablont fog létrehozni anélkül, hogy az adatokat beillesztené. Ez a sablon tárolható fájlként, és hozzáadható a forrásvezérlőhöz.

EmployeeCardTemplate.json

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "text": "Hi ${employee.name}! Here's a bit about your org..."
        },
        {
            "type": "TextBlock",
            "text": "Your manager is: ${employee.manager.name}"
        },
        {
            "type": "TextBlock",
            "text": "3 of your peers are: ${employee.peers[0].name}, ${employee.peers[1].name}, ${employee.peers[2].name}"
        }
    ]
}

Ezután töltse be, és adja meg az adatokat futásidőben a Templating SDK-k segítségével.

JavaScript-példa

Az adaptivecards-templating csomag használata.

var template = new ACData.Template({ 
    // EmployeeCardTemplate goes here
});

// Specify data at runtime
var card = template.expand({
    $root: {
        "employee": {
            "name": "Matt",
            "manager": { "name": "Thomas" },
            "peers": [{
                "name": "Andrew" 
            }, { 
                "name": "Lei"
            }, { 
                "name": "Mary Anne"
            }, { 
                "name": "Adam"
            }]
        }
    }
});

// Now you have an AdaptiveCard ready to render!

Tervezői támogatás

Az adaptív kártyatervező frissült a templating támogatásához.

Próbálja ki a következő helyen: https://adaptivecards.microsoft.com/designer

Mintaadat-szerkesztő – Itt adja meg a mintaadatokat az adathoz kötött kártya megtekintéséhez az "Előnézeti módban" állapotban. A panelen található egy kis gomb, amely feltölti az adatstruktúrát a meglévő mintaadatokból.
Előnézeti mód – Az eszköztár gombra kattintva válthat a szerkesztési felület és a mintaadat-előnézeti felület között
Minta megnyitása – kattintson erre a gombra a különböző mintapayloadok megnyitásához

Fejlett kötés

Kötési hatókörök

Van néhány fenntartott kulcsszó a különböző kötési hatókörök eléréséhez.

{
    "${<property>}": "Implicitly binds to `$data.<property>`",
    "$data": "The current data object",
    "$root": "The root data object. Useful when iterating to escape to parent object",
    "$index": "The current index when iterating"
}

Adatkörnyezet hozzárendelése elemekhez

Ha bármely elemhez "adatkörnyezetet" szeretne hozzárendelni, adjon hozzá egy $data attribútumot az elemhez.

{
    "type": "Container",
    "$data": "${mySubObject}",
    "items": [
        {
            "type": "TextBlock",
            "text": "This TextBlock is now scoped directly to 'mySubObject': ${mySubObjectProperty}"
        },
        {
            "type": "TextBlock",
            "text": "To break-out and access the root data, use: ${$root}"
        }
    ]
}

Ismétlődő elemek a tömbben

Ha egy adaptív kártyaelem tulajdonsága $dataegy tömbhöz van kötve, akkor maga az elem ismétlődik a tömb minden eleméhez.
A tulajdonságértékekben használt kötési kifejezések (${myProperty}) hatóköre a tömbön belüli egyes elemekre terjed ki.
Ha egy karakterlánc tömbhöz kapcsolódik, az egyes karakterlánc elemek eléréséhez használja ${$data}. Például "text": "${$data}"

Az alábbi TextBlock például háromszor ismétlődik, mivel a $data egy tömb. Figyelje meg, hogy a text tulajdonság hogyan van kötve egy name adott objektum tulajdonságához a tömbön belül.

{
    "type": "Container",
    "items": [
        {
            "type": "TextBlock",
            "$data": [
                { "name": "Matt" }, 
                { "name": "David" }, 
                { "name": "Thomas" }
            ],
            "text": "${name}"
        }
    ]
}

Ennek eredménye:

{
    "type": "Container",
    "items": [ 
        {
            "type": "TextBlock",
            "text": "Matt"
        },
        {
            "type": "TextBlock",
            "text": "David"
        }
        {
            "type": "TextBlock",
            "text": "Thomas"
        }
    ]
}

Beépített függvények

Sablon nyelv nem lehet teljes a segédfüggvények gazdag készlete nélkül. Az Adaptive Card Templating az Adaptív Kifejezésnyelvre (AEL) épül, amely nyílt szabvány a különböző platformokon kiértékelhető kifejezések deklarálására. És ez a "Logic Apps" megfelelő szuperhalmaza, így hasonló szintaxist használhat, mint a Power Automate stb.

Ez csak a beépített függvények kis mintavételezése.

Tekintse meg az adaptív kifejezésnyelv előre összeállított függvényeinek teljes listáját.

Feltételes kiértékelés

ha(kifejezés, igazÉrték, hamisÉrték)

if Példa

{
    "type": "TextBlock",
    "color": "${if(priceChange >= 0, 'good', 'attention')}"
}

JSON elemzése

json(jsonString) – JSON-sztring elemzése

json Példa

Ez egy Azure DevOps-válasz, amelyben a message tulajdonság egy JSON-szerializált sztring. A sztringen belüli értékek eléréséhez a függvényt json a sablonban kell használnunk.

Adat

{
    "id": "1291525457129548",
    "status": 4,
    "author": "Matt Hidinger",
    "message": "{\"type\":\"Deployment\",\"buildId\":\"9542982\",\"releaseId\":\"129\",\"buildNumber\":\"20180504.3\",\"releaseName\":\"Release-104\",\"repoProvider\":\"GitHub\"}",
    "start_time": "2018-05-04T18:05:33.3087147Z",
    "end_time": "2018-05-04T18:05:33.3087147Z"
}

Usage

{
    "type": "TextBlock",
    "text": "${json(message).releaseName}"
}

Eredmény:

{
    "type": "TextBlock",
    "text": "Release-104"
}

Egyéni függvények

Az egyéni függvények api-kkal támogatottak a Templating SDK-kban.

Feltételes elrendezés a `$when`

Ha egy feltétel teljesülése esetén egy teljes elemet szeretne elvetni, használja a tulajdonságot $when . Ha $when értéke false, az elem nem jelenik meg a felhasználó számára.

{
    "type": "AdaptiveCard",
    "$data": {
        "price": "35"
    },
    "body": [
        {
            "type": "TextBlock",
            "$when": "${price > 30}",
            "text": "This thing is pricy!",
            "color": "attention",
        },
         {
            "type": "TextBlock",
            "$when": "${price <= 30}",
            "text": "Dang, this thing is cheap!",
            "color": "good"
        }
    ]
}

Sablonok írása

Jelenleg nem támogatott a sablon "részeinek" közös írása. De dolgozunk a lehetőségek feltárásán, és reméljük, hogy hamarosan többet is megosztunk. Bármilyen gondolatot szívesen fogadunk!

Példák

Tallózzon a frissített Minták lapon , és fedezze fel az új sablonalapú kártyákat.

Last updated on 2025-12-18