Sdílet prostřednictvím

Adaptivní šablonování karet

S radostí sdílíme verzi Preview nových nástrojů, které vám pomůžou vytvářet, opakovaně používat a sdílet adaptivní karty.

Důležité

Zásadní změny v Release Candidatu z května 2020

Kandidát pro vydání šablony obsahuje některé menší zásadní změny, o nichž byste měli vědět, pokud používáte starší balíčky. Podrobnosti najdete níže.

Zásadní změny k květnu 2020

  1. Syntaxe vazby se změnila z {...} na ${...}.
    • Příklad: "text": "Hello {name}" se stane "text": "Hello ${name}"
  2. Rozhraní JAVAScript API již neobsahuje EvaluationContext objekt. Jednoduše předejte data funkci expand . Úplné podrobnosti najdete na stránce sady SDK .
  3. Rozhraní .NET API bylo přepracované tak, aby lépe odpovídalo rozhraní JAVAScript API. Úplné podrobnosti najdete na stránce sady SDK .

Jak vám může pomoct šablonování

Šablonování umožňuje oddělení dat od rozložení v adaptivní kartě.

Pomáhá navrhnout kartu jednou a pak ji naplnit skutečnými daty.

V současné době není možné vytvořit kartu pomocí Návrháře adaptivních karet a použít tento JSON k naplnění datové části dynamickým obsahem. Abyste toho dosáhli, musíte napsat vlastní kód pro sestavení řetězce JSON nebo pomocí sad SDK objektového modelu sestavit OM představující vaši kartu a serializovat ho do formátu JSON. V obou případech je Návrhář jednorázovou operací a neumožňuje později snadno upravit návrh karty, jakmile ho převedete na kód.

Zmenšuje přenosy přes drát.

Představte si svět, kde se šablona a data dají kombinovat přímo na klientovi. To znamená, že pokud používáte stejnou šablonu vícekrát nebo ji chcete aktualizovat novými daty, stačí odeslat nová data do zařízení a může znovu použít stejnou šablonu.

Pomůže vám vytvořit skvělou pohlednou kartu jenom z dat, která zadáte.

Myslíme si, že adaptivní karty jsou skvělé, ale co když jste nemuseli psát adaptivní kartu pro všechno, co chcete uživateli zobrazit? Pomocí služby šablon (popsané níže) můžeme vytvořit svět, do kterého můžou všichni přispívat, objevovat a sdílet šablony s jakýmkoli typem dat.

Sdílejte ve svých vlastních projektech, ve své organizaci nebo s celým internetem.

Umělá inteligence a další služby by mohly zlepšit uživatelské prostředí.

Když oddělíte data od obsahu, otevřou se dveře pro umělou inteligenci a další služby, které dokážou uvažovat nad daty na kartách, které vidíme, a mohou zlepšit produktivitu uživatelů nebo nám pomoci něco najít.

Co je šablonování adaptivních karet?

Skládá se ze 3 hlavních komponent:

  1. Jazyk šablony je syntaxe použitá k vytvoření šablony. Návrhář vám dokonce umožňuje zobrazit náhled šablon v době návrhu zahrnutím "ukázkových dat".
  2. Šablonovací sada SDK bude existovat na všech podporovaných platformách adaptivní karty. Tyto sady SDK umožňují naplnit šablonu skutečnými daty na back-endu nebo přímo v klientovi.
  3. Služba šablon je služba pro testování konceptu, která umožňuje komukoli najít, přispívat do a sdílet sadu známých šablon.

Jazyk šablony

Jazyk šablony je syntaxe použitá k vytvoření šablony adaptivní karty.

Poznámka:

Následujte příklad níže otevřením nové karty

https://adaptivecards.io/designer

Kliknutím na tlačítko Režim náhledu můžete přepínat mezi režimem návrhu a režimem náhledu.

Snímek obrazovky návrháře

Nově aktualizovaný Návrhář přidává podporu pro vytváření šablon a poskytuje ukázková data pro zobrazení náhledu karty v době návrhu.

Vložte následující příklad do podokna Editor uživatelského obsahu karty:

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}"
                }
            ]
        }
    ]
}

Potom vložte níže uvedená data JSON do ukázkového datového editoru.

Ukázková data vám po předání skutečných dat pomáhají přesně zjistit, jak se vaše karta bude zobrazovat za běhu.

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"
        }
    ]
}

Klikněte na tlačítko Režim náhledu . Mělo by se zobrazit zobrazení karty na základě výše uvedených ukázkových dat. Nebojte se vylepšovat ukázková data a sledovat aktualizaci karty v reálném čase.

Blahopřejeme, právě jste vytvořili svou první šablonu adaptivní karty! Teď se dozvíme, jak šablonu naplnit skutečnými daty.

Další informace o jazyce šablony

Podpora SDK

Šablonovací sady SDK umožňují naplnit šablonu skutečnými daty.

Poznámka:

V tuto chvíli jsou sady SDK šablon k dispozici pro .NET a NodeJS. V průběhu času vydáme šablonovací sady SDK pro všechny zbývající platformy adaptivních karet, jako jsou iOS, Android, UPW atd.

Platforma Balíček Instalujte Dokumentace
JavaScript npm install npm install adaptivecards-templating Dokumentace
platforma .NET Instalace NuGetu dotnet add package AdaptiveCards.Templating Dokumentace

Příklad JavaScriptu

Níže uvedený JavaScript ukazuje obecný vzor, který se použije k naplnění šablony daty.

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

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

// Now you have an AdaptiveCard ready to render!

Příklad jazyka C#

Následující jazyk C# ukazuje obecný vzor, který se použije k naplnění šablony daty.

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

// Now you have an AdaptiveCard ready to render!

Další informace o šablonových sadách SDK

Služba šablon

Služba šablon adaptivních karet je služba pro testování konceptu, která umožňuje každému najít, přispívat do a sdílet sadu známých šablon.

Je užitečné, pokud chcete zobrazit nějaká data, ale nechcete se trápit psaním vlastní adaptivní karty.

Rozhraní API pro získání šablony je dostatečně jednoduché, ale služba ve skutečnosti nabízí mnohem více, včetně možnosti analyzovat data a najít šablonu, která by pro vás mohla fungovat.

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

Všechny šablony jsou ploché soubory JSON uložené v úložišti GitHub, takže do nich může kdokoli přispívat stejně jako jakýkoli jiný opensourcový kód.

Další informace o službě šablon karet

Co dál a posílání zpětné vazby

Šablonování a oddělení prezentace od dat nás přivádí k naší misi mnohem blíž: "ekosystém standardizované výměny obsahu mezi aplikacemi a službami". V této oblasti máme spoustu věcí, takže zůstaňte v obraze a dejte nám vědět, jak to pro vás funguje na GitHubu!

  • Last updated on