Tworzenie szablonów kart adaptacyjnych

Z przyjemnością udostępniamy podgląd nowych narzędzi, które pomogą Ci tworzyć, ponownie używać i udostępniać karty adaptacyjne.

Ważne

Istotne zmiany w programie Release Candidate z maja 2020 r.

Kandydat do tworzenia szablonów wersji zawiera pewne drobne zmiany powodujące niezgodność, o których należy pamiętać, jeśli używasz starszych pakietów. Aby uzyskać szczegółowe informacje, zobacz poniżej.

Zmiany łamiące zgodność od maja 2020 r.

Składnia powiązania została zmieniona z {...} na ${...}.
- Na przykład: "text": "Hello {name}" staje się "text": "Hello ${name}"
API JavaScript nie zawiera już obiektu EvaluationContext. Wystarczy przekazać dane do funkcji expand. Aby uzyskać szczegółowe informacje, zobacz stronę zestawu SDK .
Interfejs API platformy .NET został przeprojektowany tak, aby był ściślej zgodny z interfejsem API języka JavaScript. Aby uzyskać szczegółowe informacje, zobacz stronę zestawu SDK .

Jak szablonowanie może Ci pomóc

Tworzenie szablonów umożliwia rozdzielenie danych od układu na Karcie Adaptacyjnej.

Pomaga zaprojektować kartę raz, a następnie wypełnić ją rzeczywistymi danymi

Obecnie nie można utworzyć karty przy użyciu projektanta kart adaptacyjnych i użyć tego kodu JSON do wypełnienia ładunku zawartością dynamiczną. Aby to osiągnąć, należy napisać kod niestandardowy w celu skompilowania ciągu JSON lub użyć zestawów SDK modelu obiektów do skompilowania OM reprezentującego kartę i serializowania go do formatu JSON. W obu przypadkach Designer jest jednorazową i jednokierunkową operacją, która nie ułatwia łatwego późniejszego dostosowania projektu karty, gdy już zostanie przekonwertowany na kod.

Sprawia, że transmisje przesyłane przewodem stają się mniejsze

Wyobraź sobie świat, w którym szablon i dane można łączyć bezpośrednio na kliencie. Oznacza to, że jeśli używasz tego samego szablonu wielokrotnie lub chcesz zaktualizować go przy użyciu nowych danych, wystarczy wysłać nowe dane na urządzenie i ponownie użyć tego samego szablonu.

Pomaga w stworzeniu świetnie wyglądającej karty na podstawie danych, które podajesz.

Uważamy, że karty adaptacyjne są świetne, ale co zrobić, jeśli nie trzeba pisać karty adaptacyjnej dla wszystkiego, co chcesz wyświetlić użytkownikowi? Dzięki usłudze szablonów (opisanej poniżej) możemy utworzyć świat, w którym każdy może współtworzyć, odnajdywać i udostępniać szablony dowolnego typu danych.

Udostępnij je we własnych projektach, organizacji lub w całym Internecie.

Sztuczna inteligencja i inne usługi mogą poprawić środowisko użytkownika

Oddzielając dane od zawartości, otwieramy drzwi dla sztucznej inteligencji i innych usług, aby móc wnioskować na podstawie danych na kartach, które widzimy, zwiększając produktywność użytkownika lub pomagając nam odnaleźć różne rzeczy.

Co to jest szablonowanie kart adaptacyjnych?

Składa się on z 3 głównych składników:

Język szablonu to składnia używana do tworzenia szablonu. Projektant umożliwia nawet wyświetlanie podglądu szablonów w czasie projektowania, uwzględniając "przykładowe dane".
Templating SDK będzie dostępny na wszystkich obsługiwanych platformach Adaptive Card. Te zestawy SDK umożliwiają wypełnienie szablonu rzeczywistymi danymi na zapleczu lub bezpośrednio na kliencie.
Usługa szablonów to usługa weryfikacji koncepcji, która umożliwia każdemu znajdowanie, współtworzenie i udostępnianie zestawu dobrze znanych szablonów.

Język szablonu

Język szablonu to składnia używana do tworzenia szablonu karty adaptacyjnej.

Uwaga / Notatka

Postępuj zgodnie z poniższym przykładem, otwierając nową kartę

https://adaptivecards.io/designer

Kliknij przycisk Tryb podglądu , aby przełączyć się między trybem projektowania i trybem podglądu.

Zrzut ekranu projektanta

Nowo zaktualizowany projektant wprowadza obsługę tworzenia szablonów i udostępniania przykładowych danych aby wyświetlać podgląd karty w czasie projektowania.

Wklej poniższy przykład w okienku Edytor karty płatniczej:

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

Następnie wklej dane JSON poniżej do edytora przykładowych danych.

Przykładowe dane pomagają zobaczyć dokładnie, jak karta będzie wyglądała w momencie wykonania, gdy zostaną przekazane rzeczywiste dane.

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

Kliknij przycisk Tryb podglądu . Powinieneś zobaczyć, jak karta jest renderowana zgodnie z przykładowymi danymi podanymi powyżej. Możesz wprowadzić poprawki do przykładowych danych i obejrzeć aktualizację karty w czasie rzeczywistym.

Gratulacje, właśnie zostałeś autorem/zostałaś autorką swojego pierwszego szablonu Adaptive Card! Następnie dowiesz się, jak wypełnić szablon rzeczywistymi danymi.

Dowiedz się więcej o języku szablonu

Pomoc techniczna SDK

Zestawy SDK tworzenia szablonów umożliwiają wypełnienie szablonu rzeczywistymi danymi.

Uwaga / Notatka

Obecnie zestawy SDK tworzenia szablonów są dostępne dla platform .NET i NodeJS. W czasie udostępnimy zestawy SDK tworzenia szablonów dla wszystkich pozostałych platform kart adaptacyjnych, takich jak iOS, Android, UWP itp.

Platforma	Pakiet	Instalowanie	Dokumentacja
JavaScript		`npm install adaptivecards-templating`	dokumentacja
.NET		`dotnet add package AdaptiveCards.Templating`	dokumentacja

Przykład języka JavaScript

Poniższy kod JavaScript przedstawia ogólny wzorzec, który będzie używany do wypełniania szablonu danymi.

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

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

// Now you have an AdaptiveCard ready to render!

Przykład w języku C#

Poniższy kod W języku C# przedstawia ogólny wzorzec, który będzie używany do wypełniania szablonu danymi.

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

// Now you have an AdaptiveCard ready to render!

Dowiedz się więcej o SDK tworzenia szablonów

Usługa szablonu

Usługa szablonów kart adaptacyjnych to usługa weryfikacji koncepcji, która umożliwia każdemu znajdowanie, współtworzenie i udostępnianie zestawu dobrze znanych szablonów.

Jest to przydatne, jeśli chcesz wyświetlić niektóre dane, ale nie chcesz przejmować się pisaniem niestandardowej karty adaptacyjnej.

Interfejs API umożliwiający uzyskanie szablonu jest wystarczająco prosty, ale usługa oferuje znacznie więcej, w tym możliwość analizowania danych i znajdowania szablonu, który może działać dla Ciebie.

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

Wszystkie szablony to proste pliki JSON przechowywane w repozytorium GitHub, dzięki czemu każdy może współtworzyć je jak każdy inny kod open source.

Dowiedz się więcej o usłudze szablonu karty

Co dalej i wysyłanie opinii

Tworzenie szablonów i oddzielenie prezentacji od danych przybliża nas do naszej misji: "ekosystemowej standaryzacji wymiany treści między aplikacjami i usługami". Mamy mnóstwo do dostarczenia w tym obszarze, więc bądź na bieżąco i daj nam znać, jak to działa dla Ciebie w usłudze GitHub!

Last updated on 2025-07-03

Udostępnij przez