.. role:: raw-html(raw)
    :format: html

.. _HowToWebhookTeams:

Comment utiliser un Webhook Teams pour que Astry me notifie ?
=============================================================

Dans cette page, nous allons détailler le processus de configuration d'un Webhook Teams pour que Astry me notifie.

1. Création d'un Webhook Teams
2. Configuration d'Astry avec le Webhook Teams
3. Test de la configuration
4. Corps du message qu'Astry envoie à Teams

Création d'un Webhook Teams
---------------------------

Vous devez d'abord ajouter l'application Workflow à votre Teams.
Pour cela, rendez-vous dans le sous-menu "Applications" et recherchez **"Workflows"** puis cliquez sur **Ajouter**.

.. image:: _static/Astry_HowTo_Webhook_Teams_1.png
  :alt: Ajouter une application Workflow

:raw-html:`<br />`

Une popup vous demande de choisir dans quel canal/conversation vous souhaitez recevoir les notifications.
Sélectionnez le canal/conversation souhaité et cliquez sur **Go**.

.. image:: _static/Astry_HowTo_Webhook_Teams_2.png
  :alt: Choix du canal/conversation

:raw-html:`<br />`

Dirigez-vous dans le canal/conversation précédemment sélectionné et cliquez sur le menu **Power Automate**.

.. image:: _static/Astry_HowTo_Webhook_Teams_3.png
  :alt: Menu Power Automate

:raw-html:`<br />`

Sélectionnez le modèle **Envoyer des alertes webhook à un canal**.

.. image:: _static/Astry_HowTo_Webhook_Teams_4.png
  :alt: Modèle Envoyer des alertes webhook à un canal

:raw-html:`<br />`

Cliquez ensuite sur **Continuer**.

.. image:: _static/Astry_HowTo_Webhook_Teams_5.png
  :alt: Continuer

:raw-html:`<br />`

Sélectionnez l'équipe souhaitée et le canal.

.. image:: _static/Astry_HowTo_Webhook_Teams_6.png
  :alt: Sélection de l'équipe et du canal

:raw-html:`<br />`

Vous arrivez sur la page de configuration du workflow.
Nous allons maintenant récupérer le Webhook URL.
Cliquez sur **Modifier**.

.. image:: _static/Astry_HowTo_Webhook_Teams_7.png
  :alt: Modifier

:raw-html:`<br />`

Cliquez sur **When a Teams webhook is received**.

.. image:: _static/Astry_HowTo_Webhook_Teams_8.png
  :alt: When a Teams webhook is received

:raw-html:`<br />`

Copiez la valeur de **URL POST HTTP** et vous pouvez ensuite quitter les menus de configuration.

.. image:: _static/Astry_HowTo_Webhook_Teams_9.png
  :alt: Webhook url

:raw-html:`<br />`

NB: Si jamais vous souhaitez retrouver l'url du Webhook, vous pouvez retourner dans l'application **Workflows** via le menu latéral en cliquant sur les **...** puis en sélectionnant **Workflows**.

.. image:: _static/Astry_HowTo_Webhook_Teams_10.png
  :alt: Menu lateral
  :align: center
  :height: 250px


Configuration d'Astry avec le Webhook Teams
-------------------------------------------

Allons maintenant l'ajouter sur Astry.

Rendez-vous dans l'onglet **Notifications**

Cliquez sur **Ajouter un Webhook Teams**.

.. image:: _static/Astry_HowTo_Webhook_Teams_11.png
  :alt: Ajouter un Webhook Teams

:raw-html:`<br />`

Entrez le nom de la notification et collez l'url du Webhook que vous avez copié précédemment.

.. image:: _static/Astry_HowTo_Webhook_Teams_12.png
  :alt: Nom de la notification
  :align: center
  :width: 50%

:raw-html:`<br />`


Cliquez sur **Ajouter**.

:raw-html:`<br />`

Test de la configuration
-------------------------

Allons maintenant tester la configuration.

Toujours dans l'onglet **Notifications**

Cliquez sur le bouton **Test** de la notification que vous avez ajoutée.

.. image:: _static/Astry_HowTo_Webhook_Teams_13.png
  :alt: Test

:raw-html:`<br />`

Et si vous retournez dans le canal/conversation pour lequel vous avez configuré le Webhook, vous devriez voir la notification.

.. image:: _static/Astry_HowTo_Webhook_Teams_14.png
  :alt: Notification


Et voilà, vous avez configuré votre Webhook Teams pour que Astry puisse vous notifier via Teams.

NB: N'oubliez pas de configurer la :ref:`stratégie de notifications<Notifications>` pour que Astry puisse vous notifier via Teams.

Corps du message qu'Astry envoie à Teams
----------------------------------------

A titre d'information, Astry envoie ce corps de message à Teams :

.. code-block::

  {
    "type": "message",
    "attachments": [
      {
        "contentType": "application/vnd.microsoft.card.adaptive",
        "content": {
          "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
          "type": "AdaptiveCard",
          "version": "1.4",
          "body": [
            { "type": "Image", "url": ..., "size": "Small" },
            { "type": "TextBlock", "text": title, "weight": "Bolder", "size": "Large", "wrap": true },
            { "type": "TextBlock", "text": body, "wrap": true },
            { "type": "TextBlock", "text": timestamp, "weight": "Light", "size": "Small", "wrap": true}
          ]
        }
      }
    ]
  }