Conception de cartes de message actionnables d’Outlook au format de carte adaptativeDesigning Outlook Actionable Message cards with the Adaptive Card format

Les cartes de message actionnables d’Outlook sont conçues pour utiliser le format de carte adaptative.Outlook Actionable Messages cards are designed using the Adaptive Card format. Le format de carte adaptative est un format de mise en page déclaratif simple mais puissant qui offre beaucoup de flexibilité, permettant de concevoir des cartes visuellement attrayantes.The Adaptive Card format is a simple yet powerful declarative layout format that provides a lot of flexibility, allowing for visually rich cards. Dans cette rubrique, nous aborderons les fonctionnalités spécifiques à Outlook du format de carte adaptative.In this topic we'll cover the Outlook-specific features of the Adaptive Card format.

Important

Le format de carte adaptative est réservé aux messages intégrant des actions envoyés par courrier électronique. Il est requis pour prendre en charge Outlook sur iOS et Android.The Adaptive Card format is only available for Actionable Messages sent via email, and is required to support Outlook on iOS and Android. Le format MessageCard est toujours pris en charge mais est maintenant passé en deuxième plan.The MessageCard format is still supported but is now de-emphasized. Les connecteurs Office et les connecteurs Microsoft Teams ne prennent actuellement pas en charge le format de carte adaptative.Office connectors and Microsoft Teams connectors do not currently support the Adaptive Card format. Si vous mettez en place un connecteur Office 365 ou un connecteur Microsoft Teams, veuillez consulter la référence du format MessageCard.If you are implementing an Office 365 or Microsoft Teams connector, please refer to the MessageCard format reference.

Pour plus d’informations sur les versions d’Outlook prenant en charge le format de carte adaptative, consultez Configuration requise de la version Outlook pour les messages appelant une action.For information on which Outlook versions support the Adaptive Card format, see Outlook version requirements for actionable messages.

Card PlaygroundCard Playground

Notre outil Card Playground a été mis à jour pour prendre en charge le format de carte adaptative.Our Card Playground tool has been updated to support the Adaptive Card format. Vous y trouverez des exemples de cartes adaptatives (y compris celles ci-dessous) qui peuvent vous permettre de créer vos propres cartes et vous permettent également d'envoyer ces cartes à votre propre compte de messagerie Microsoft 365 pour voir à quoi elles ressemblent dans Outlook.There you will find Adaptive Card samples (including the one below) that can help you get started crafting your own cards and also allows you to send those cards to your own Microsoft 365 email account to see how they look in Outlook.

Concepteur de cartes adaptatives (version préliminaire)Adaptive Cards Designer (preview)

Le concepteur de cartes adaptatives fournit une expérience de glisser-déplacer permettant de créer et d’ajuster rapidement des cartes adaptatives.The Adaptive Cards Designer provides a drag-and-drop experience to quickly build and tweak adaptive cards.

Un exemple simple de carte adaptativeA simple Adaptive Card example

Un échantillon de carte adaptative

La carte ci-dessus illustre certaines des capacités principales et les plus puissantes du format de carte adaptative :The above card illustrates some of the core and most powerful capabilities of the Adaptive Card format:

  • La possibilité d'empiler des éléments de différents types dans n'importe quel ordreThe ability to stack elements of various types in any order
  • La possibilité de contrôler la quantité d’espace entre ces élémentsThe ability to control the amount of space between those elements
  • La possibilité de mettre en page des éléments dans plusieurs colonnesThe ability to layout elements in multiple columns
  • La possibilité d’aligner les éléments horizontalement et verticalementThe ability to align elements horizontally and vertically

Voici comment cette carte est élaborée :Here is how this card is crafted:

{
  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0",
  "type": "AdaptiveCard",
  "speak": "<s>Your flight is confirmed for you and 3 other passengers from San Francisco to Amsterdam on Friday, October 10 8:30 AM</s>",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "width": "stretch",
          "verticalContentAlignment": "center",
          "items": [
            {
              "type": "TextBlock",
              "size": "medium",
              "text": "**FLIGHT ITINERARY - CONTOSO AIR**"
            },
            {
              "type": "TextBlock",
              "spacing": "none",
              "text": "Passenger: David Claux",
              "isSubtle": true
            }
          ]
        },
        {
          "width": "auto",
          "items": [
            {
              "type": "Image",
              "width": "48px",
              "url": "http://lh3.googleusercontent.com/ik5VKcUE5U7qGSpU3XWwAwe_zeOnHU5x_79o-VXf-C_EGrFPHp4-NcKRCtblrJM5iO61=w300"
            }
          ]
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "2 Stops",
      "weight": "bolder",
      "spacing": "medium"
    },
    {
      "type": "TextBlock",
      "text": "Fri, October 10 8:30 AM",
      "weight": "bolder",
      "spacing": "none"
    },
    {
      "type": "ColumnSet",
      "separator": true,
      "columns": [
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "text": "San Francisco",
              "isSubtle": true
            },
            {
              "type": "TextBlock",
              "size": "extraLarge",
              "color": "accent",
              "text": "SFO",
              "spacing": "none"
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": "&nbsp;"
            },
            {
              "type": "Image",
              "url": "https://messagecardplayground.azurewebsites.net/assets/airplane.png",
              "size": "small",
              "spacing": "none"
            }
          ]
        },
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "horizontalAlignment": "right",
              "text": "Amsterdam",
              "isSubtle": true
            },
            {
              "type": "TextBlock",
              "horizontalAlignment": "right",
              "size": "extraLarge",
              "color": "accent",
              "text": "AMS",
              "spacing": "none"
            }
          ]
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "Non-Stop",
      "weight": "bolder",
      "spacing": "medium"
    },
    {
      "type": "TextBlock",
      "text": "Fri, October 18 9:50 PM",
      "weight": "bolder",
      "spacing": "none"
    },
    {
      "type": "ColumnSet",
      "separator": true,
      "columns": [
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "text": "Amsterdam",
              "isSubtle": true
            },
            {
              "type": "TextBlock",
              "size": "extraLarge",
              "color": "accent",
              "text": "AMS",
              "spacing": "none"
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": "&nbsp;"
            },
            {
              "type": "Image",
              "url": "https://messagecardplayground.azurewebsites.net/assets/airplane.png",
              "size": "small",
              "spacing": "none"
            }
          ]
        },
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "horizontalAlignment": "right",
              "text": "San Francisco",
              "isSubtle": true
            },
            {
              "type": "TextBlock",
              "horizontalAlignment": "right",
              "size": "extraLarge",
              "color": "accent",
              "text": "SFO",
              "spacing": "none"
            }
          ]
        }
      ]
    }
  ]
}

Conseils de conception de carte adaptativeAdaptive Card design tips

Une carte adaptative peut être très simple ou assez complexe en fonction de la mise en page que vous souhaitez réaliser.An Adaptive Card can be very simple or quite complex depending on the layout you wish to achieve. Il est toujours judicieux de planifier votre conception avant d'écrire la charge utile de la carte adaptative, en utilisant un outil de peinture par exemple ou même simplement un stylo et du papier. Cela facilitera grandement la traduction des visuels dans les constructions de carte adaptative appropriées.It is always a good idea to plan your design ahead of writing the Adaptive Card payload, using a paint tool for instance or even just pen and paper; this will make it a lot easier to translate visuals into the appropriate Adaptive Card constructs. Voici quelques conseils de conception pour vous aider à commencer.Below are a few design tips to help you get started.

Formatage du texteText formatting

Tous les TextBlock éléments d'une carte peuvent être formatés en utilisant Markdown.All TextBlock elements in a card can be formatted using Markdown. Outlook prend en charge le langage Markdown de base.Outlook supports basic Markdown.

Important

Dans la mesure où tous les TextBlock champs sont traités comme Markdown, veillez à échapper les caractères spéciaux Markdown (tels que * ou #) si nécessaire.Since all TextBlock elements are processed as Markdown, be sure to escape Markdown special characters (such as * or #) if needed.

EffetEffect Syntaxe MarkdownMarkdown syntax
ItaliqueItalics *This text is in italics*
GrasBold **This text is bold**
Gras + italiqueBold + italics ***This text is bold and in italics***
BarréStrike-through ~~This text is struck through~~
LiensLink [Microsoft](http://www.microsoft.com)
Titres (niveau 1 à 6)Headings (level 1 through 6) # Heading via ###### Heading# Heading through ###### Heading
Liste à pucesBulleted list * List item ou - List item* List item or - List item

Conseil

  • UtilisezMarkdown pour le format texte.Do use Markdown to format text.
  • N’utilisez pas de balises HTML dans vos cartes. Le code HTML est ignoré et traité comme du texte brut.Don't use HTML markup in your cards. HTML is ignored and treated as plain text.

Création d’un écran étroitDesign for a narrow screen

Tout comme lors de la conception du corps HTML d'un e-mail, vous devez supposer que votre carte adaptative peut s'afficher sur des écrans larges et étroits (par exemple un ordinateur de bureau et un téléphone portable).Just like when designing the HTML body of an email, you have to assume that your Adaptive Card might be displayed on both wide and narrow screens (e.g. a desktop and a mobile phone.)

Conseil

  • Concevez votre carte adaptative de façon à ce qu’elle s’affiche parfaitement sur un écran étroit.Do design your Adaptive Card in such a way that it looks great on a narrow screen. Généralement, une carte conçue pour un écran étroit s'adapte bien à un écran large.Typically, a card designed for a narrow screen will scale well to a wide screen. Le contraire n'est cependant pas vrai.The opposite is however not true.
  • Ne concevez pas votre carte adaptative en supposant que seuls des utilisateurs d'Outlook pour ordinateur de bureau le verront.Don't design your Adaptive Card assuming that only users of Outlook on the desktop will see it.

Créez vos images avec des écrans haute résolution en têteCraft your images with high DPI screens in mind

Il n'y a pas si longtemps, la plupart des écrans avaient une résolution assez faible (1024x768 pixels par exemple) et fonctionnaient à 96 ppp (points par pouce), ce qui signifie que 96 pixels correspondaient à un pouce réel à l'écran.Not so long ago, most screens had a somewhat low resolution (1024x768 pixels for instance) and were operating at 96 DPI (Dots Per Inch), meaning that 96 pixels would fit within an actual inch of the screen. Mais au cours des dernières années, les écrans ont considérablement augmenté en termes de résolution et ppp, en particulier sur les appareils mobiles, et il est maintenant très commun pour un écran de fonctionner à 192 ppp ou plus.But in the past few years, screens have grown considerably in terms of resolution and DPI, especially on mobile devices, and it is now very common for a screen to operate at 192 DPI or even more.

Lorsque vous concevez vos cartes adaptatives, vous devez vérifier que vos images s’afficheront correctement sur l’écran quel que soit son ppp.When designing your Adaptive Cards, you need to make sure your images will look good on any screen regardless of its DPI.

Conseil

  • Concevez vos images en supposant qu'elles seront affichées sur un écran à haute résolution.Do design your images assuming they will be displayed on a high DPI screen. Une image conçue pour un écran à faible résolution (96 ppp) sera agrandie lorsqu'elle sera affichée sur un écran à résolution plus élevée et apparaîtra donc pixelisée.An image designed for a low (96) DPI screen will be blown up when displayed on a higher DPI screen and will therefore look pixelated. Une image conçue pour un écran à haute résolution sera rétrécie sur un écran à résolution inférieure, ce qui donne généralement de bons résultats.An image designed for a high DPI screen will be shrunk on a lower DPI screen which usually yields good results. En d’autres termes, il est préférable de créer une image de 100 x 100 pixels et de l’afficher au format 50 x 50 pixels plutôt qu’une image de 50 x 50 pixels affichée au format 100 x 100 pixels.In other words, it is better to design a 100x100 pixels image and display it at 50x50 pixels than to design a 50x50 pixels image and display it at 100x100 pixels.
  • Utilisez les propriétés width et height de l’élément Image si vous avez besoin de contrôler précisément la taille réelle des images dans votre carte.Do use the width and height properties of the Image element if you need to precisely control the actual size of the images in your card.
  • Ne concevez pas vos images avec une couleur d'arrière-plan fixe, comme le blanc, sauf si cette couleur d'arrière-plan est supposée être visible par l'utilisateur.Don't design your images with a fixed background color, like white, unless that background color is supposed to be visible to the user. Dans Outlook, vos cartes adaptatives ne seront pas nécessairement affichées sur un fond blanc et vos images devraient pouvoir se superposer à n'importe quelle couleur d'arrière-plan.In Outlook, your Adaptive Cards will not necessarily be displayed on top of a white background, and your images should be able to superimpose themselves on top of any background color. Pour cette raison, rendez l’arrière-plan de vos images transparent.For that reason, do make the background of your images transparent.
  • Ne créez pas vos images avec des remplissages intégrés.Don't craft your images with built-in paddings. Ce type de remplissage interfère généralement avec la disposition générale en introduisant un espace indésirable sur le côté de votre image.Such paddings usually interfere with the overall layout by introducing undesirable spacing on the side of your image.

Utilisation de conteneursUse of containers

Utilisez l'élément Container seulement si nécessaire.Use the Container element only when necessary. L'élément Container permet de regrouper un ensemble d'éléments.The Container element makes it possible to group a set of elements together.

Conseil

  • Utilisez un Container pour mettre en évidence un groupe d’éléments : en définissant la propriété style de Container sur emphasis pour que Container et les éléments qu’il contient se démarquent.Do use a Container to emphasize a group of elements: by setting the style property of the Container to emphasis you can make that Container, and the elements it contains, stand out.
  • Utilisez un Container pour associer une action à un groupe d’éléments : en définissant la propriété selectAction d’un Container, le Container et son contenu deviennent une seule zone cliquable qui déclenche l’action spécifiée.Do use a Container to associate an action with group of elements: by setting the selectAction property of a Container, the Container and its content become a single clickable area that triggers the specified action.
  • Utilisez un Container pour rendre une partie de votre carte réductible : en utilisant un Action.ToggleVisibility ciblé sur un Container, vous pouvez facilement rendre un groupe d’éléments réductible.Do use a Container to make a portion of your card collapsible: by using an Action.ToggleVisibility targeted to a Container, you can easily make a group of elements collapsible.
  • N’utilisez pas Container pour diverses raisons.Don't use Container for any other reason.

Utilisation de colonnesUse of columns

Utilisez ColumnSet uniquement lorsque vous devez aligner plusieurs éléments sur une seule ligne horizontale.Use ColumnSet only when you need to align several elements on a single horizontal line.

Conseil

  • Utilisez ColumnSet pour les dispositions de type tableau en général.Do use ColumnSet for table-like layouts in general.
  • Utilisez ColumnSet si vous avez besoin, par exemple, d’afficher une image à l’extrémité gauche de la carte et du texte sur la même ligne à l’extrémité droite de la carte.Do use ColumnSet if you need to, for example, display an image of the far left of the card and some text on the same line at the far right of the card.
  • Utilisez l’approche de redimensionnement approprié pour les colonnes :Do use the appropriate sizing approach for columns:
    • Utilisez "width": "auto" pour un Column pour utiliser autant de largeur que nécessaire pour s'adapter à son contenu.Use "width": "auto" for a Column to use as much width as is necessary to fit its content.
    • Utilisez "width": "stretch" pour un Column pour utiliser la largeur restante dans le ColumnSet.Use "width": "stretch" for a Column to use the remaining width in the ColumnSet. Lorsque plusieurs Columns ont "width": "stretch", ils partagent tous également la largeur restante.When multiple Columns have "width": "stretch", they all equally share the remaining width.
    • Utilisez "width": <number> pour un Column pour utiliser une partie de la largeur disponible dans le ColumnSet.Use "width": <number> for a Column to use a proportion of the available width in the ColumnSet. Si vous avez trois colonnes avec leur propriété width définie sur 1, 4 et 5 respectivement, elles finiront par utiliser respectivement 10 %, 40 % et 50 % de la largeur disponible.If you have three columns with their width property set to 1, 4 and 5 respectively, they will end up using 10%, 40% and 50% of the available width, respectively.
    • Utilisez "width": "<number>px" pour avoir une largeur spécifique en pixels.Use "width": "<number>px" to have a specific pixel width. Ceci est particulièrement utile (et nécessaire) lors de la création de dispositions de tableaux.This is particularly useful (and necessary) when creating table layouts.
  • N’utilisez pas ColumnSet si tout ce dont vous avez besoin, c'est d’empiler les éléments verticalement.Don't use ColumnSet if all you need is stack elements vertically.

Propriétés et fonctionnalités de carte adaptative spécifiques à OutlookOutlook-specific Adaptive Card properties and features

Outlook propose un ensemble de propriétés et de fonctionnalités de carte adaptative supplémentaires pour une utilisation dans le contexte des messages actionnables.Outlook introduces a set of additional Adaptive Card properties and features for use in the context of Actionable Messages.

Important

Les propriétés et fonctionnalités de carte adaptative spécifiques à Outlook ne fonctionnent que dans le contexte des messages actionnables.Outlook-specific Adaptive Card properties and features only work in the context of Actionable Messages. Elles ne fonctionnent PAS dans d’autres applications de carte adaptative et ne sont par conséquent pas présentées sur le site officiel des cartes adaptatives.They will NOT work in other Adaptive Card enabled applications and are therefore not documented on the official Adaptive Cards site.

Fonctionnalités de carte adaptative non prises en charge par les messages actionnables d’OutlookAdaptive Card features not supported with Outlook Actionable Messages

Action.SubmitAction.Submit

Le type d'action Action.Submit n'est PAS pris en charge par les messages actionnables d’Outlook.The Action.Submit action type is NOT supported with Outlook Actionable Messages. Si vous incluez un Action.Submit dans votre carte, il ne s’affichera pas.If you include an Action.Submit in your card, it will not be displayed.

Input.TimeInput.Time

Le type d'élément Input.Time n'est PAS pris en charge par les messages actionnables d’Outlook.The Input.Time element type is NOT supported with Outlook Actionable Messages. Si vous incluez un élément Input.Time dans votre carte, il ne s’affichera pas.If you include an Input.Time element in your card, it will not be displayed. Si vous voulez autoriser les utilisateurs à entrer une heure, utilisez un Input.Text à la place et valider sa valeur côté serveur.If you need to allow users to input a time, use an Input.Text instead and validate its value server-side.

Action.HttpAction.Http

Les messages actionnables d’Outlook utilisent un modèle d’action basé sur du code HTTP via le type Action.Http.Outlook Actionable Messages use an HTTP-based action model via the Action.Http type. Action.Http Permet d’apporter une requête GET ou POST à une url cible spécifique suite à un utilisateur effectuant une action dans une carte.Action.Http makes it possible to make a GET or POST request to a specific target url as a result of a user taking an action in a card.

Nom de la propriétéProperty name TypeType RequisRequired DescriptionDescription
type StringString OuiYes Doit être défini sur Action.Http.Must be set to Action.Http.
title ChaîneString NonNo Le titre de l'action tel qu'il apparaîtra à l'écran sur un bouton de contrôle, par exemple.The title of the action as it will appear on screen on a button control, for instance.
method ChaîneString OuiYes Les valeurs valides sont GET et POST.Valid values are GET and POST. Lorsque method est défini sur POST la propriété body doit être spécifiée.When method is set to POST the body property must be specified.
url ChaîneString OuiYes L'URL du point de terminaison cible de la demande.The url of the request's target endpoint. La propriété url prend en charge la substitution de valeur d'entrée.The url property supports input value substitution. Remarque : cette URL doit être accessible à partir d’internet, vous ne pouvez pas utiliser localhost.Note: this URL must be accessible from the internet, you cannot use localhost.
headers Tableau d’objets HttpHeaderArray of HttpHeader objects NonNo Une liste facultative d’en-têtes doit être envoyée au point de terminaison cible.An optional list of headers that should be sent to the target endpoint .
body ChaîneString Uniquement si method est défini sur POSTOnly if method is set to POST Corps de la requête POST.The body of the POST request. La propriété body prend en charge la substitution de valeur d'entrée.The body property supports input value substitution.

HttpHeaderHttpHeader

Nom de la propriétéProperty name TypeType RequisRequired DescriptionDescription
name StringString OuiYes Le nom de l’en-tête HTTP.The name of the HTTP header. Par exemple, Content-Type.For example, Content-Type.
value ChaîneString OuiYes La valeur de l’en-tête HTTP.The value of the HTTP header. Par exemple, application/json.For example, application/json. La propriété value prend en charge la substitution de valeur d'entrée.The value property supports input value substitution.

Exemple pour Action.HttpAction.Http example

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "Hello world!"
    }
  ],
  "actions": [
    {
      "type": "Action.Http",
      "title": "Click me!",
      "method": "POST",
      "url": "https://contoso.com/api/...",
      "body": "<body of the POST request>",
      "headers": [
        { "name": "Content-Type", "value": "application/json" }
      ]
    }
  ]
}

L’exemple de carte Action.Http

Implémentation de l’API webImplementing the Web API

L’URL spécifiée dans la propriété url doit respecter les exigences suivantes.The URL specified in the url property must conform to the following requirements.

  • Le point de terminaison doit accepter les requêtes POST.The endpoint must accept POST requests.
  • Le point de terminaison doit accepter le contenu de la propriété body.The endpoint should accept the contents of the body property.
  • Le point de terminaison doit utiliser le JWT envoyé dans l’en-tête Authorization pour vérifier que les demandes proviennent de Microsoft.The endpoint should use the JWT sent in the Authorization header to verify that requests come from Microsoft.

Substitution de valeur d’entréeInput value substitution

Les cartes adaptatives peuvent contenir des entrées et il peut être nécessaire de transmettre les valeurs de ces entrées au point de terminaison cible via une action Action.Http.Adaptive Cards may contain inputs, and it may be necessary to pass the values of these inputs to the target endpoint via an Action.Http action. Cette opération est effectuée à l’aide d’une substitution de la valeur d’entrée.This is done using input value substitution. Prenons l'exemple suivant :Consider the following example:

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "What's your name?"
    },
    {
      "type": "Input.Text",
      "id": "nameInput",
      "placeholder": "Type your name"
    }
  ],
  "actions": [
    {
      "type": "Action.Http",
      "title": "Say hello",
      "method": "GET",
      "url": "https://contoso.com/sayhello?name={{nameInput.value}}"
    }
  ]
}

L'exemple de carte de substitution de valeur d'entrée

La carte ci-dessus définit une saisie de texte et configure sa propriété id sur nameInput.The above card defines a text input and sets it id property to nameInput. Elle définit également une action Action.Http qui effectue un appel GET à un point de terminaison sur le domaine contoso.com.It also defines an Action.Http action that makes a GET call to an endpoint on domain contoso.com. Avec l’inclusion de ?name={{nameInput.value}} sur l’URL cible, la valeur de l’entrée avec l’ID nameInput sera dynamiquement remplacée au moment où l’action sera effectuée par l’utilisateur.With the inclusion of ?name={{nameInput.value}} on the target URL, the value of the input with id nameInput will be dynamically substituted at the time the action is taken by the user. Par conséquent, si l’utilisateur avait entré le nom de David dans la saisie de texte, l’URL cible après remplacement serait https://contoso.com/sayhello?name=DavidSo if the user had entered the name David in the text input, the target URL after substitution would be https://contoso.com/sayhello?name=David

La substitution de valeur d'entrée fonctionne également dans la propriété body d’une action Action.Http.Input value substitution also works in the body property of an Action.Http action. Par exemple :For example:

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "What's your name?"
    },
    {
      "type": "Input.Text",
      "id": "nameInput",
      "placeholder": "Type your name"
    }
  ],
  "actions": [
    {
      "type": "Action.Http",
      "title": "Say hello",
      "method": "POST",
      "url": "https://contoso.com/sayhello",
      "body": "{{nameInput.value}}"
    }
  ]
}

Signalement de la réussite ou de l’échec de l’exécution de Action.HttpReporting Action.Http execution success or failure

Votre service doit retourner un code d’état HTTP 200 lorsqu’il exécute correctement une action Action.Http.Your service should return an HTTP 200 status code when it successfully executes an Action.Http action. Si l’exécution de l’action échoue, votre service doit retourner un code d’état HTTP 4xx et il doit également inclure l’en-tête HTTP CARD-ACTION-STATUS dans sa réponse pour spécifier un message d’erreur personnalisé.If the action execution fails, your service should return an HTTP 4xx status code, and it should also include the CARD-ACTION-STATUS HTTP header in its response to specify a custom error message. La valeur de cet en-tête sera affichée à l'utilisateur final au cas où l'exécution de Action.Http échouerait.The value of that header will be displayed to the end-user in case the Action.Http fails to execute.

Conseil

Suivez ces instructions lors du renvoi d’une réponse pour les actions Action.Http.Follow these guidelines when returning a response to Action.Http actions.

  • Renvoyez l’en-tête CARD-ACTION-STATUS dans vos réponses d’erreur.Do return the CARD-ACTION-STATUS header in your error responses.
  • Rédigez un message aussi informatif et pertinent que possible dans l’en-tête.Do make the message in that header as informative and meaningful as possible.
  • Ne mentionnez pas le nom de la personne exécutant l’action ni l’heure à laquelle l’action a été effectuée dans l’en-tête CARD-ACTION-STATUS.Don't mention either the name of the person taking the action nor the time the action is being taken in your CARD-ACTION-STATUS header.

Cartes d’actualisationRefresh cards

Les cartes d’actualisation sont un mécanisme très puissant qui permet aux actions Action.Http de mettre entièrement à jour la carte de manière instantanée lorsque l’action est terminée. Il existe de nombreux scénarios qui peuvent tirer avantage des cartes d’actualisation :Refresh cards are a very powerful mechanism that allow Action.Http actions to fully update the card on the fly as the action successfully completes. There are many scenarios that benefit from refresh cards:

  • Scénario d’approbation (par exemple, une note de frais)Approval scenario (e.g. expense report)
    • Une fois la demande approuvée ou rejetée, la carte est actualisée pour supprimer les actions d'approbation/refus et mettre à jour son contenu afin de refléter le fait qu'elle a été approuvée ou refusée.Once the request is approved or rejected, the card is refreshed to remove the approve/decline actions and update its content so it reflects the fact that it's been approved or declined.
  • Statut de la tâcheTask status
    • Lorsqu’une action est effectuée sur une tâche, comme la définition de l’échéance, la carte est actualisée afin d’inclure l’échéance mise à jour dans ses faits.When an action is taken on a task, such as setting its due date, the card refreshes to include the updated due date in its facts.
  • EnquêteSurvey
    • Une fois qu’une réponse a été fournie, la carte est actualisée et la situation est la suivante :Once the question has been answered, the card is refreshed so:
      • L’utilisateur ne peut plus répondre.It no longer allows the user to respond.
      • L’état est mis à jour, avec par exemple « Merci d’avoir répondu à cette enquête », en plus de la réponse réelle de l'utilisateur.It shows updated status, like "Thanks for responding to this survey" alongside the user's actual response.
      • Possibilité d’inclure une nouvelle action Action.OpenUrl qui permet à l’utilisateur de consulter l’enquête en ligne.Potentially include a new Action.OpenUrl action that allows the user to consult the survey online.

Pour actualiser une carte à la suite d’une action Action.Http, un service doit effectuer les opérations suivantes :To refresh a card as a result of an Action.Http action, a service needs to do the following:

  • Incluez la charge utile JSON de la nouvelle carte dans le corps de la réponse dans la requête HTTP POST reçue.Include the JSON payload of the new card in the body of the response to the HTTP POST request it received.
  • Ajoutez l’en-tête HTTP CARD-UPDATE-IN-BODY: true à la réponse afin d’informer le client destinataire qu’il doit analyser le corps de la réponse et extraire une nouvelle carte (c’est pour éviter tout traitement inutile lorsque aucune carte d’actualisation n’est incluse).Add the CARD-UPDATE-IN-BODY: true HTTP header to the response, in order to let the receiving client know that it should parse the response body and extract a new card (this is to avoid unnecessary processing when no refresh card is included.)

Conseil

Suivez ces instructions lors du renvoi de cartes d’actualisation.Follow these guidelines when returning refresh cards.

  • Utilisez des cartes d’actualisation avec des actions qui ne peuvent être effectuées qu’une seule fois.Do use refresh cards with actions that can only be taken a single time. Dans ce cas, la carte d’actualisation n’inclut aucune action qui ne peut plus être effectuée.In those cases, the refresh card would not include any action that cannot be taken anymore.
  • Utilisez des cartes d’actualisation avec des actions qui modifient l’état de l’entité sur laquelle elles sont exécutées.Do use refresh cards with actions that change the state of the entity they are performed on. Dans ce cas, la carte d’actualisation doit inclure les informations mises à jour sur l’entité et PEUT modifier l’ensemble d’actions pouvant être effectuées.In those cases, the refresh card should include updated information about the entity, and MAY change the set of actions that can be performed.
  • N’utilisez pas de cartes d’actualisation pour animer une conversation avec l’utilisateur.Don't use refresh cards to lead a conversation with the user. Par exemple, n’utilisez pas de cartes d’actualisation pour un « Assistant » à plusieurs étapes.For instance, don't use refresh cards for a multi-step "wizard".
  • Incluez au moins une action Action.OpenUrl pour afficher l’entité dans l’application externe d’où elle provient.Do include at least an Action.OpenUrl action to view the entity in the external app it comes from.

Action.InvokeAddInCommandAction.InvokeAddInCommand

L’action Action.InvokeAddInCommand ouvre un volet des tâches du complément Outlook.The Action.InvokeAddInCommand action opens an Outlook add-in task pane. Si le complément n’est pas installé, l’utilisateur est invité à l’installer en un clic.If the add-in is not installed, the user is prompted to install the add-in with a single click.

Quand une action Action.InvokeAddInCommand est exécutée, Outlook vérifie d’abord si le complément demandé est installé et activé pour l’utilisateur.When an Action.InvokeAddInCommand action is executed, Outlook first checks if the requested add-in is installed and turned on for the user. Si ce n’est pas le cas, l’utilisateur est informé que l’action nécessite l’installation du complément. Il peut alors l’installer et l’activer en un clic.If it is not, the user is notified that the action requires the add-in, and is able to install and enable the add-in with a single click. Outlook ouvre le volet des tâches demandé, rendant le contexte d'initialisation spécifié par l'action disponible pour le complément.Outlook opens the requested task pane, making any initialization context specified by the action available to the add-in.

Pour en savoir plus, consultez la rubrique Appel d’un complément Outlook à partir d’un message actionnable.For more information, see Invoke an Outlook add-in from an actionable message.

Nom de la propriétéProperty name TypeType RequisRequired DescriptionDescription
type StringString OuiYes Doit être défini sur Action.InvokeAddInCommand.Must be set to Action.InvokeAddInCommand.
title ChaîneString NonNo Le titre de l'action tel qu'il apparaîtra à l'écran sur un bouton de contrôle, par exemple.The title of the action as it will appear on screen on a button control, for instance.
addInId ChaîneString OuiYes Spécifie l’identifiant du complément requis.Specifies the add-in ID of the required add-in. L’identifiant du complément se trouve dans l’élément ID dans le manifeste du complément.The add-in ID is found in the Id element in the add-in's manifest.
desktopCommandId ChaîneString OuiYes Spécifie l’identifiant du bouton de commande du complément qui ouvre le volet des tâches requis.Specifies the ID of the add-in command button that opens the required task pane. L’ID du bouton de commande se trouve dans l’attributid de l’élément Control qui définit le bouton dans le manifeste du complément.The command button ID is found in the id attribute of the Control element that defines the button in the add-in's manifest. L’élément Control spécifié doit être défini à l’intérieur d’un point d’extension MessageReadCommandSurface, doit être de type Button et l’Action de l’élément Control doit être de type ShowTaskPane.The specified Control element MUST be defined inside a MessageReadCommandSurface extension point, be of type Button, and the control's Action must be of type ShowTaskPane.
initializationContext ObjetObject OuiYes Les développeurs peuvent spécifier un objet JSON valide dans ce champ.Developers may specify any valid JSON object in this field. La valeur est convertie en chaîne et est mise à la disposition du complément quand l’action est exécutée.The value is serialized into a string and made available to the add-in when the action is executed. Ainsi, l’action transmet les données d’initialisation au complément.This allows the action to pass initialization data to the add-in.

Action.DisplayMessageFormAction.DisplayMessageForm

L’action Action.DisplayMessageForm ouvre le formulaire de lecture d'un message en fonction de l'identifiant de ce message.The Action.DisplayMessageForm action opens the read form of a message given that message's ID. L’identifiant de message peut être récupéré via des API REST Outlook.Message IDs can be retrieved via the Outlook REST APIs.

Nom de la propriétéProperty name TypeType RequisRequired DescriptionDescription
type StringString OuiYes Doit être défini sur Action.DisplayMessageForm.Must be set to Action.DisplayMessageForm.
title ChaîneString NonNo Le titre de l'action tel qu'il apparaîtra à l'écran sur un bouton de contrôle, par exemple.The title of the action as it will appear on screen on a button control, for instance.
itemId ChaîneString OuiYes Spécifie l’identifiant de message à ouvrir.Specifies the ID of the message to open.

Action.DisplayAppointmentFormAction.DisplayAppointmentForm

L’action Action.DisplayAppointmentForm ouvre le formulaire de lecture d'un élément de calendrier en fonction de l'identifiant de cet élément de calendrier.The Action.DisplayAppointmentForm action opens the read form of a calendar item given that calendar item's ID. Les identifiants d'élément de calendrier peut être récupérés via les API REST Outlook.Calendar item IDs can be retrieved via the Outlook REST APIs.

Nom de la propriétéProperty name TypeType RequisRequired DescriptionDescription
type StringString OuiYes Doit être défini sur Action.DisplayAppointmentForm.Must be set to Action.DisplayAppointmentForm.
title ChaîneString NonNo Le titre de l'action tel qu'il apparaîtra à l'écran sur un bouton de contrôle, par exemple.The title of the action as it will appear on screen on a button control, for instance.
itemId ChaîneString OuiYes Spécifie l’identifiant de l’élément de calendrier à ouvrir.Specifies the ID of the calendar item to open.

Action.ToggleVisibilityAction.ToggleVisibility

L’action Action.ToggleVisibility permet d'afficher et/ou de masquer des éléments spécifiques d'une carte à la suite d'un clic d'un utilisateur sur un bouton ou un autre élément actionnable.The Action.ToggleVisibility action makes it possible to show and/or hide specific elements of a card as a result of a user clicking on a button or other actionable element. Associé à la propriété isVisible, Action.ToggleVisibility offre un degré d’interactivité supplémentaire au sein d’une seule carte.Coupled with the isVisible property, Action.ToggleVisibility allows for an extra degree of interactivity within a single card.

Nom de la propriétéProperty name TypeType RequisRequired DescriptionDescription
type StringString OuiYes Doit être défini sur Action.ToggleVisibility.Must be set to Action.ToggleVisibility.
title ChaîneString NonNo Le titre de l'action tel qu'il apparaîtra à l'écran sur un bouton de contrôle, par exemple.The title of the action as it will appear on screen on a button control, for instance.
targetElements Tableau de chaînes ou TargetElementArray of String or TargetElement OuiYes La liste des éléments dont la visibilité devrait être modifiée.The list of elements that should have their visibility toggled. Lorsque des éléments du tableau targetElements sont spécifiés sous forme de chaînes, ils doivent représenter l’identifiant d’un élément dans la carte ; lorsque l’action est exécutée, ces éléments deviennent visibles s'ils ne l'étaient pas, et invisibles autrement.When elements of the targetElements array are specified as strings, they must represent the Id of an element in the card; when the action is executed, these elements become visible if they were not, and invisible otherwise. Lorsque les éléments du tableau sont spécifiés en tant qu’objets TargetElement, la visibilité de chaque élément ciblé est définie par la propriété isVisible de l’objet TargetElement.When elements of the array are specified as TargetElement objects, the visibility of each targeted element is defined by the isVisible property of the TargetElement object.

TargetElementTargetElement

Nom de la propriétéProperty name TypeType RequisRequired DescriptionDescription
elementId StringString OuiYes L'identifiant de l'élément cible.The Id of the target element.
isVisible BooléenBoolean OuiYes Spécifie si l’élément cible doit être visible une fois que l’action est terminée.Specifies whether the target element should be visible once the action has completed.

Exemple pour Action.ToggleVisibilityAction.ToggleVisibility example

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "**Action.ToggleVisibility example**: click the button to show or hide a welcome message"
    },
    {
      "type": "TextBlock",
      "id": "helloWorld",
      "isVisible": false,
      "text": "**Hello World!**",
      "size": "extraLarge"
    }
  ],
  "actions": [
    {
      "type": "Action.ToggleVisibility",
      "title": "Click me!",
      "targetElements": [ "helloWorld" ]
    }
  ]
}

La carte d'exemple est similaire à la suivante avant que le bouton ne soit cliqué :The example card renders similar to the following before the button is clicked:

Une capture d’écran de la carte d’exemple Action.ToggleVisibility dans un état réduit

La carte d'exemple est similaire à la suivante après que le bouton soit cliqué :The example card renders similar to the following after the button is clicked:

Une capture d’écran de la carte d’exemple Action.ToggleVisibility dans un état développé

Élément ActionSetActionSet element

Les messages Outlook actionnables ajoutent la prise en charge de l'élément ActionSet qui permet d'ajouter des boutons d'action n'importe où dans une carte.Outlook Actionable Messages add support for the ActionSet element that makes it possible to add action buttons anywhere in a card.

Nom de la propriétéProperty name TypeType RequisRequired DescriptionDescription
type StringString OuiYes Doit être défini sur ActionSet.Must be set to ActionSet.
id ChaîneString NonNo L'identifiant unique de l'élément.The unique ID of the element.
spacing ChaîneString NonNo Détermine l'espace entre cet élément et l’élément précédent.Controls the amount of spacing between this element and the previous element.
separator BooléenBoolean NonNo Détermine si un trait de séparation doit être affiché entre cet élément et l’élément précédent.Controls whether or not a separator line should be displayed between this element and the previous element. Le trait de séparation apparaît au milieu de l’espace défini par la propriété spacing.The separator line is displayed in the middle of the space defined by the spacing property.
horizontalAlignment ChaîneString NonNo Contrôle l’alignement horizontal de cet élément au sein de son conteneur.Controls the horizontal alignment of this element within its container.
actions Tableau d’objets ActionArray of Action objects NonNo Les actions à afficher dans l’ensemble.The actions to be displayed in the set.

Excepté le fait que ActionSet peut être placé n’importe où dans la carte, son comportement est tel que la propriété actions d’un AdaptiveCard.Aside from the fact that ActionSet can be placed anywhere in the card, it behaves exactly like the actions property of an AdaptiveCard.

Exemple pour ActionSetActionSet example

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
      {
        "type": "ActionSet",
        "actions": [
          {
            "type": "Action.ToggleVisibility",
            "title": "Click me!",
            "targetElements": [ "helloWorld" ]
          }
        ]
      },
      {
        "type": "TextBlock",
        "text": "**Action.ToggleVisibility example**: click the button above to show or hide a welcome message"
      },
      {
        "type": "TextBlock",
        "id": "helloWorld",
        "isVisible": false,
        "text": "**Hello World!**",
        "size": "extraLarge"
      }
  ]
}

Une capture d'écran de la carte d'exemple ActionSet

Propriétés supplémentaires sur tous les types d’élément Adaptive CardAdditional properties on all Adaptive Card element types

Nom de la propriétéProperty name TypeType RequisRequired DescriptionDescription
isVisible BooléenBoolean Non.No. Par défaut est vrai.Defaults to true. L’état de visibilité initials de l’élément.The initial visibility state of the element. Lorsque isVisible est défini sur false, l’élément n’est initialement pas visible dans la carte.When isVisible is set to false, the element is initially not visible in the card. Il peut être rendu visible en utilisant une action Action.ToggleVisibility, comme documenté ci-dessus.It can be made visible using an Action.ToggleVisibility action, as documented above.

Veuillez vous référer à l'exemple précédent pour une illustration de l'utilisation de isVisible.Please refer to the previous example for an illustration of how to use isVisible.

Propriétés supplémentaires sur le type AdaptiveCardAdditional properties on the AdaptiveCard type

Les propriétés supplémentaires suivantes peuvent être spécifiées pour un objet AdaptiveCard dans le contexte des messages actionnables d’Outlook :The following additional properties can be specified on an AdaptiveCard object in the context of Outlook Actionable Messages:

Nom de la propriétéProperty name TypeType RequisRequired DescriptionDescription
autoInvokeAction Action.HttpAction.Http NonNo La propriété autoInvokeAction indique une URL qui fournit une charge utile de carte adaptative pour remplacer la charge utile existante dans le message.The autoInvokeAction property specifies a URL that supplies an updated Adaptive Card payload to replace the existing payload in the message. La method de l’action Action.Http DOIT être POST.The method of the Action.Http action MUST be POST. Cela permet à votre service de fournir des informations à jour dans le message actionnable.This allows your service to supply up-to-date information in the actionable message. Pour plus d’informations, voir Actualiser un message actionnable lorsque l’utilisateur l’ouvre.For more information, see Refresh an actionable message when the user opens it.
correlationId StringString NonNo La propriété correlationId simplifie la recherche des journaux pour résoudre des problèmes.The correlationId property simplifies the process of locating logs for troubleshooting issues. Quand vous envoyez une carte actionnable, votre service doit définir et consigner un UUID unique dans cette propriété.We recommend that when sending an actionable card, your service should set and log a unique UUID in this property. Quand l’utilisateur appelle une action Action.Http sur la carte, Office 365 envoie à votre service les en-têtes Card-Correlation-Id et Action-Request-Id dans la requête POST.When the user invokes an Action.Http action on the card, Office 365 sends the Card-Correlation-Id and Action-Request-Id headers in the POST request to your service. Card-Correlation-Id contient la même valeur que la propriété correlationId dans la carte.Card-Correlation-Id contains the same value as the correlationId property in the card. Action-Request-Id est un UUID unique généré par Office 365 pour aider votre service à trouver une action effectuée par un utilisateur.Action-Request-Id is a unique UUID generated by Office 365 to help locate specific action performed by a user. Votre service doit consigner ces deux valeurs quand il reçoit les requêtes d’action POST.Your service should log both of these values when receiving action POST requests.
expectedActors Tableau de chaînesArray of String NonNo expectedActors contient une liste d’adresses e-mail attendues des utilisateurs pouvant effectuer des actions Action.Http sur la carte.expectedActors contains a list of expected email addresses of the users that may take Action.Http actions on the card. Un utilisateur peut avoir plusieurs adresses e-mail et le point de terminaison cible de Action.Http peut ne pas prévoir l'adresse e-mail particulière présentée dans la demande sub du jeton porteur.A user can have multiple email addresses and the Action.Http target endpoint might not be expecting the particular email address presented in the sub claim of the bearer token. Par exemple, un utilisateur peut avoir l’adresse e-mail john.doe@contoso.com ou john@contoso.com, mais le Action.Http point de terminaison cible prévoit de recevoir john@contoso.com dans la sous-demande du jeton porteur.For example, a user could have both the john.doe@contoso.com or john@contoso.com email address, but the Action.Http target endpoint expects to receive john@contoso.com in the sub claim of the bearer token. En définissant la propriété expectedActors sur ["john@contoso.com"], la demande sub aura l’adresse e-mail prévue.By setting the expectedActors property to ["john@contoso.com"], the sub claim will have the expected email address.
hideOriginalBody BooleanBoolean Non.No. Par défaut est faux.Defaults to false. Lorsque la valeur est Vrai, le corps HTML du message doit être masqué.When set to true, causes the HTML body of the message to be hidden. Ceci est très utile dans les scénarios où la carte est une représentation meilleure ou plus utile du contenu que le corps HTML lui-même, ce qui est particulièrement vrai lorsque la carte contient des actions.This is very useful in scenarios where the card is a better or more useful representation of the content than the HTML body itself, which is especially true when the card contains actions. Vous pouvez masquer le corps HTML d'origine si la carte elle-même contient toutes les informations dont un utilisateur aurait besoin, ou si le contenu de la carte est redondant avec le contenu du corps.Consider hiding the original HTML body if the card itself contains all the information a user would need, or if the content of the card is redundant with the content of the body. Incluez toujours un corps HTML bon et significatif, même s'il va être caché.Do always include a nice, meaningful HTML body, even if it is going to be hidden. Le corps HTML est la seule chose qu’un client de messagerie ne prenant pas en charge les cartes est en mesure d’afficher.The HTML body is the only thing an email client that doesn't support cards will be able to display. Par ailleurs, les cartes ne sont pas incluses lorsque vous répondez à des courriers électroniques ou que vous les transférez, seul le corps HTML est inclus.Furthermore, cards are not included when replying to or forwarding emails, only the HTML body. Ne masquez pas le corps lorsqu’il complète les informations présentées dans la carte.Don't hide the body when it is complementary to the information presented in the card. Par exemple, le corps d’une approbation de dépense peut décrire la note de manière plus détaillée, tandis que la carte présente simplement un bref résumé et les actions d’approbation/de refus.For example, the body of an expense report approval might describe the report in great details while the card just presents a quick summary along with approve/decline actions.
originator StringString OuiYes Pour un e-mail appelant une action, doit être défini sur l’ID de fournisseur généré par le tableau de bord du développeur E-mail appelant une action.For actionable email, MUST be set to the provider ID generated by the Actionable Email Developer Dashboard.

Propriétés supplémentaires sur le type ColumnAdditional properties on the Column type

Les propriétés supplémentaires suivantes peuvent être spécifiées dans un objet Column dans le contexte des messages actionnables d’Outlook :The following additional properties can be specified on a Column object in the context of Outlook Actionable Messages:

Nom de la propriétéProperty name TypeType RequisRequired DescriptionDescription
width Numéro ou ChaîneNumber or String Non (par défaut est auto)No (defaults to auto) Cette propriété permet de contrôler précisément la largeur d’un Column au sein de son ColumnSet.This property allows for precise control of the width of a Column within its ColumnSet. Voir Valeurs largeur de colonne pour plus d’informations.See Column width values for details.
verticalContentAlignment Chaîne.String. Les valeurs valides sont top, center et bottom.Valid values are top, center and bottom. Non.No. Par défaut top.Defaults to top. La propriété verticalContentAlignment permet de positionner verticalement le contenu de la colonne (par exemple, tous ses éléments). Ceci est particulièrement utile pour les dispositions de type tableau.The verticalContentAlignment property makes it possible to vertically position the content of the column (e.g. all its elements.) This is particularly useful for table-like layouts.
backgroundImage ChaîneString NonNo La propriété backgroundImage représente l’URL selon une image qui doit être utilisée comme arrière-plan de Column.The backgroundImage property represents the URL to an image that is to be used as the background of the Column. L’image d’arrière-plan couvre l’intégralité de la surface de Column et est mise à l'échelle de manière à préserver son format d'origine.The background image covers the entirety of the Column's surface and is scaled so as to preserve its original aspect ratio.

Valeurs de largeur de colonneColumn width values

Si width est exprimé sous forme de nombre, il représente le poids relatif de Column au sein de son ColumnSet.If width is expressed as a number, it represents the relative weight of the Column within its ColumnSet. Pour qu’un Column pondéré soit être vraiment utile, il doit y avoir au moins un Column pondéré supplémentaire dans l’ensemble.For a weighted Column to really be useful, there should be at least one more weighted Column in the set. Par exemple, si la colonne A a son width défini sur 1 et que la colonne B a son width défini sur 2, alors la colonne A utilisera un tiers de l'espace disponible dans l'ensemble, tandis que la colonne B utilisera les deux tiers restants.For example, if column A has its width set to 1 and column B has its width set to 2, then column A will use a third of the available space in the set, while column B will use the remaining two-thirds.

Si width est exprimé en tant que chaîne, il peut avoir les valeurs suivantes :If width is expressed as a string, it can have the following values:

  • auto: le Column utilisera autant d'espace disponible que nécessaire pour s'adapter à son contenu.auto: The Column will use as much of the available space as is required to fit its content.
  • stretch: le Column utilisera tout l'espace restant dans l'ensemble.stretch: The Column will use whatever space remains in the set. Si plusieurs colonnes ont leur propriété width définie sur stretch, elles partagent tout l'espace restant de manière égale.If multiple columns have their width property set to stretch, they all share the remaining space equally.
  • <number>px (ex.<number>px (ex. 50px) : la colonne est répartie entre le nombre spécifié de pixels.50px): The column will spread across the specified number of pixels.
  • <number>*, (ex.<number>*, (ex. 1*) : cela équivaut à spécifier width en tant que nombre.1*): This is equivalent to specifying width as a number.

Exemple de colonneColumn example

{
  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "width": "50px",
          "items": [
            {
              "type": "Image",
              "url": "https://adaptivecards.io/content/cats/1.png",
              "size": "stretch"
            }
          ]
        },
        {
          "width": "stretch",
          "verticalContentAlignment": "center",
          "items": [
            {
              "type": "TextBlock",
              "text": "This card has two ColumnSets on top of each other. In each, the left column is explicitly sized to be 50 pixels wide.",
              "wrap": true
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "width": "50px"
        },
        {
          "width": "stretch",
          "verticalContentAlignment": "center",
          "items": [
            {
              "type": "TextBlock",
              "text": "In this second ColumnSet, columns align perfectly even though there is nothing in the left column.",
              "wrap": true
            }
          ]
        }
      ]
    }
  ]
}

Une capture d'écran de la carte d'exemple de largeur

Propriétés supplémentaires sur le type ContainerAdditional properties on the Container type

Les propriétés supplémentaires suivantes peuvent être spécifiées dans un objet Container dans le contexte des messages actionnables d’Outlook :The following additional properties can be specified on a Container object in the context of Outlook Actionable Messages:

Nom de la propriétéProperty name TypeType RequisRequired DescriptionDescription
verticalContentAlignment Chaîne.String. Les valeurs valides sont top, center et bottom.Valid values are top, center and bottom. Non.No. Par défaut top.Defaults to top. La propriété verticalContentAlignment permet de positionner verticalement le contenu de la colonne (par exemple, tous ses éléments). Ceci est particulièrement utile pour les dispositions de type tableau.The verticalContentAlignment property makes it possible to vertically position the content of the column (e.g. all its elements.) This is particularly useful for table-like layouts.
backgroundImage ChaîneString NonNo La propriété backgroundImage représente l’URL selon une image qui doit être utilisée comme arrière-plan de Container.The backgroundImage property represents the URL to an image that is to be used as the background of the Container. L’image d’arrière-plan couvre l’intégralité de la surface de Container et est mise à l'échelle de manière à préserver son format d'origine.The background image covers the entirety of the Container's surface and is scaled so as to preserve its original aspect ratio.

Ces propriétés se comportent exactement comme leur contrepartie sur le Column type.These properties behave exactly like their counterpart on the Column type. Veuillez vous référer à l'exemple ci-dessus.Please refer to the above example.

Propriétés supplémentaires sur le type ImageAdditional properties on the Image type

Les propriétés supplémentaires suivantes peuvent être spécifiées dans un objet Image dans le contexte des messages actionnables d’Outlook :The following additional properties can be specified on an Image object in the context of Outlook Actionable Messages:

Nom de la propriétéProperty name TypeType RequisRequired DescriptionDescription
width StringString NonNo Cette propriété permet de contrôler précisément la largeur d’une image, en pixels.This property allows for precise control over the width of an image, in pixels. Le format autorisé est <number>px<number> est un nombre entier.The allowed format is <number>px where <number> is an integer. Lorsque width est spécifié, la size propriété est ignorée.When width is specified, the size property is ignored. Si width est spécifié mais height ne l’est pas, la hauteur de l’image est automatiquement calculée afin de respecter ses proportions.If width is specified but height isn't, the height of the image is automatically computed so as to respect its aspect ratio.
height ChaîneString NonNo Cette propriété permet de contrôler précisément la hauteur d’une image, en pixels.This property allows for precise control over the height of an image, in pixels. Le format autorisé est <number>px<number> est un nombre entier.The allowed format is <number>px where <number> is an integer. Lorsque height est spécifié, la size propriété est ignorée.When height is specified, the size property is ignored. Si height est spécifié mais width ne l’est pas, la largeur de l’image est automatiquement calculée afin de respecter ses proportions.If height is specified but width isn't, the width of the image is automatically computed so as to respect its aspect ratio.
backgroundColor ChaîneString NonNo La propriété backgroundColor spécifie la couleur par-dessus laquelle l'image doit être rendue.The backgroundColor property specifies the color the image should be rendered on top of. backgroundColor est particulièrement utile dans les cas où une seule image doit être utilisée sur un large éventail de couleurs d’arrière-plan, car elle supprime la nécessité de créer plusieurs versions d’une image unique.backgroundColor is particularly useful in cases where a single image should be used on top of a variety of background colors, as it removes the need to craft multiple versions of a single image. Le format de la propriété backgroundColor est #RRGGBBRR, GG et BB sont les valeurs hexadécimales des composants rouge, vert et bleu de la couleur respectivement.The format of the backgroundColor property is #RRGGBB where RR, GG and BB are the hexadecimal values of the red, green and blue components of the color, respectively.

Exemple de propriétés d'imageImage properties example

{
  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "Below, the same image is presented on top of two different background colors."
    },
    {
      "type": "Image",
      "width": "64px",
      "url": "https://messagecardplayground.azurewebsites.net/assets/circleontransparentbackground.png",
      "backgroundColor": "#FF0000"
    },
    {
      "type": "Image",
      "style": "person",
      "width": "64px",
      "url": "https://messagecardplayground.azurewebsites.net/assets/circleontransparentbackground.png",
      "backgroundColor": "#0000FF"
    }
  ]
}

Une capture d'écran de la carte d'exemple des propriétés Image

Voir aussiSee also