Outils et exemples

Concepteur de cartes

Vous avez besoin d’un outil pour concevoir vos cartes ? Ne cherchez pas plus loin que le concepteur de cartes adaptatives basé sur le navigateur à https://adaptivecards.microsoft.com/designer.

Capture d’écran du concepteur

Incorporer le concepteur dans votre application

Mais pourquoi envoyer vos utilisateurs quand vous pouvez incorporer le concepteur de cartes directement dans votre application web à l’aide de notre bibliothèque JavaScript.

Consultez le package adaptivecards-designer pour commencer.

Validation du schéma

La validation de schéma est un moyen puissant de faciliter la création et d’activer les outils.

Nous avons fourni un fichier de schéma JSON complet pour modifier et valider des cartes adaptatives dans json. Notez que l’URL du schéma est versionnée, les versions plus récentes des cartes adaptatives auront une URL correspondante.

Dans Visual Studio et Visual Studio Code, vous pouvez obtenir IntelliSense automatique en incluant une $schema référence.

Mauvais

Autocomplete

Example

{
    "$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": []
}

Extensions Visual Studio Code

Adaptive Cards Studio

Place de marché

Avec AdaptiveCards Studio, vous pouvez créer des cartes directement dans Visual Studio Code. L’extension détecte automatiquement toutes les cartes adaptatives dans votre espace de travail et vous permet de modifier facilement le modèle de carte et d’exemples de données.

En savoir plus et l’installer à partir de Visual Studio Code Marketplace

Visionneuse de cartes adaptatives

Nous avons créé une extension de code Visual Studio qui vous permet de visualiser la carte que vous modifiez en temps réel à l’intérieur de l’éditeur lui-même.

Extension

Pour installer, ouvrez Extensions Marketplace et recherchez Adaptive Card Viewer.

Place de marché

Usage

Lorsque vous modifiez un fichier .json avec une propriété de carte $schema adaptative, vous pouvez afficher à l’aide de Ctrl+Shift+V A.

{
    "$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": []
}

Options

Le paramètre Visual Studio Code suivant est disponible pour la visionneuse AdaptiveCards. Cela peut être défini dans paramètres utilisateur ou paramètres de l’espace de travail.

{
    // Open or not open the preview screen automatically
    "adaptivecardsviewer.enableautopreview": true,
}

Exemple de visualiseur WPF

L’exemple de projet de visualiseur WPF vous permet de visualiser des cartes à l’aide de WPF/Xaml sur une machine Windows. Un hostconfig éditeur est intégré pour la modification et l’affichage des paramètres de configuration de l’hôte. Enregistrez ces paramètres en tant que JSON pour les utiliser dans le rendu dans votre application.

visualiseur wpf

Exemple de rendu d'image WPF

L’exemple de projet ImageRender transforme n’importe quelle carte en PNG à partir de la ligne de commande à l’aide de WPF.

  • Last updated on