Exporter (0) Imprimer
Développer tout

Exemple : Créer une application de messagerie pour les appels VoIP dans Outlook

apps for Office

Cet exemple d’application de messagerie permet aux utilisateurs d’employer un service Voix sur IP (VOIP) pour composer des numéros de téléphone contenus dans un message ou un rendez-vous sans quitter Outlook.

Dernière modification : lundi 17 février 2014

S’applique à : Exchange Online | Exchange Server 2013 | Exchange Server 2013 SP1 | Outlook 2013 | Outlook 2013 RT | Outlook 2013 SP1 | Outlook Web App | OWA for Devices

   Office.js : version 1.0

   Schéma des manifestes des applications pour Office : version 1.0

Remarque Remarque

Dans cet article, les références à « Outlook » s’appliquent au client riche Outlook, à Outlook RT, à Outlook Web App et à OWA pour les appareils.

Dans cette rubrique, vous découvrirez les fonctionnalités suivantes :

  • Utilisation d’une entité bien connue de numéro de téléphone pour obtenir des numéros de téléphone dans l’objet ou le corps de l’élément actuellement sélectionné.

  • Utilisation d’une extension d’interpréteur de commandes pour un service VOIP, tel que Lync, pour appeler un numéro de téléphone à condition que le service VOIP ait inscrit les protocoles callto: et tel:.

Une application de messagerie est contextuelle et est activée lorsque les circonstances, par rapport à l’élément actuel, répondent aux règles d’activation de l’application. Dans cet exemple de Numéroteur téléphonique, Outlook active cette application si l’objet ou le corps du message électronique, de la demande de réunion, de la réponse ou de l’annulation sélectionné (dans le volet de lecture ou un inspecteur), ou le rendez-vous sélectionné (dans un inspecteur), contient un numéro de téléphone. Lorsque l’utilisateur clique sur le bouton de l’application, le volet de l’application s’ouvre et affiche chaque numéro de téléphone. L’utilisateur peut alors choisir l’un de ces numéros de téléphone pour l’appeler au moyen du client Lync.

Voir l’application de messagerie Numéroteur téléphonique dans Outlook.

Vidéo

Avant d’essayer cette application pour la première fois, suivez les instructions dans Procédure : Installer des exemples d’applications de messagerie dans Outlook pour utiliser le Centre d’administration Exchange pour installer l’application en vue d’une utilisation dans Outlook. Ensuite, créez un message électronique ou un rendez-vous, puis ajoutez un ou plusieurs numéros de téléphone dans le corps. Lorsque vous affichez le message dans le volet de lecture, ou le message ou un rendez-vous dans un inspecteur, Outlook active l’application. Vous pouvez alors cliquer sur le bouton de l’application Numéroteur téléphonique, puis choisir un numéro de téléphone dans le volet d’application afin d’utiliser VOIP pour composer ce numéro.

Pour exécuter cette application, vous devez avoir accès à des services VOIP tels que Lync. Si vous utilisez Lync comme service VOIP, cette application part du principe que vous avez installé le client Lync sur l’ordinateur client et l’avez utilisé au moins une fois pour le configurer.

Même si cet exemple utilise Lync comme service VOIP, vous pouvez adapter le code pour utiliser tout service VOIP, à condition que le service prenne en charge et ait inscrit les protocoles callto: et tel:.

Cette section décrit le manifeste XML, HTML et les fichiers JavaScript pour l’application de messagerie Numéroteur téléphonique.

Vous pouvez télécharger les fichiers de code source pour l’application de messagerie Numéroteur téléphonique dans la page Applications de messagerie pour Outlook : création d’une application de messagerie pour la numérotation VoIP.

Manifeste XML

Un manifeste XML définit les métadonnées suivantes pour une application :

  • Identité.

  • Possibilité requise de l’application hôte

  • Facteurs de forme.

  • Fichier HTM correspondant éventuellement pour chaque facteur de forme.

  • Conditions d’affichage.

  • Autorisations nécessaires.

  • Règles d’activation.

Le manifeste utilise l’élément OfficeApp comme l’élément racine pour incorporer divers éléments enfants du type complexe MailApp dans un ordre séquentiel. Cette section décrit notamment quelques aspects intéressants du manifeste caractérisant l’application de messagerie Numéroteur téléphonique.

  • Le type de cette application—L’élément OfficeApp dans la ligne XML suivante spécifie que cette application est du type complexe MailApp, qui étend le type complexe de base OfficeApp.

    <OfficeApp 
    xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:type="MailApp">
    
    
  • L’identificateur de l’application—L’élément Id de la ligne XML suivante identifie de façon unique cette application et la différencie d’autres applications pour Office.

    <Id>BB10B02E-6F7F-46BB-8DFC-418E8F7986AF</Id>
    
  • L’étiquette du bouton de l’application—L’élément DisplayName dans la ligne XML suivante spécifie « Numéroteur téléphonique » comme étiquette d’application. Outlook affiche le bouton de l’application dans la barre d’application si les circonstances par rapport à l’élément actuel répondent aux conditions d’activation qui sont spécifiées dans le manifeste.

    <DisplayName DefaultValue="Phone Dialer"/>
    
  • Une description détaillée de l’application— Dans le groupe suivant de lignes XML, l’élément Description contient un attribut DefaultValue qui fournit une description générale de l’objet de l’application. L’attribut DefaultValue correspond au paramètre régional en-us spécifié par l’élément DefaultLocale. Vous pouvez utiliser un élément enfant Override pour prendre en charge la description d’un autre paramètre régional.

    <Description DefaultValue="Detects phone numbers within a 
    message or appointment and shows the links to call. 
    Only North American phone number formats are currently 
    supported, and you must have some Voice over IP application 
    already installed (like Lync or Skype)."/>
    
    
  • Les possibilités que demande cette application à une application hôte—L’élément Capabilities inclut un élément Capability dans les lignes XML suivantes. Cela signifie que l’application nécessite une seule possibilité, à savoir Mailbox. Une application qui prend en charge la possibilité Mailbox peut devenir une application hôte pour cette application.

    <Capabilities>
      <Capability Name="Mailbox"/>
    </Capabilities>
    
  • Le facteur de forme pris en charge par cette application, l’emplacement du fichier HTML et la hauteur d’affichage par défaut, en pixels—L’élément DesktopSettings dans les lignes XML suivantes spécifie que cette application prend en charge le facteur de forme d’ordinateur de bureau. L’élément SourceLocation spécifie l’URL où Outlook peut obtenir le fichier dialer.htm. L’élément RequestedHeight spécifie qu’Outlook doit essayer d’afficher un volet d’application d’une hauteur de 150 pixels.

    Remarque Remarque

    Si vous essayez cette application Numéroteur téléphonique, vous devez remplacer l’URL du fichier HTML, http://webserver/dialer/dialer.htm, par l’emplacement réel du fichier HTML dans votre configuration.

      <DesktopSettings>
        <!-- Change the following line to specify the web server -->
        <!-- where the HTML file is hosted. -->
        <SourceLocation DefaultValue=
          "https://webserver/PhoneDialer/dialer.htm" />
        <RequestedHeight>150</RequestedHeight>
      </DesktopSettings>
    
    
  • L’autorisation demandée par cette application—L’élément Permissions dans la ligne XML suivante spécifie que cette application demande l’autorisation Élément en lecture.

    <Permissions>ReadItem</Permissions>
    
  • Les règles d’activation—Cette application spécifie une règle du type complexe ItemHasKnownEntity et désigne le numéro de téléphone comme une entité à rechercher dans l’objet ou le corps de l’élément sélectionné.

    <Rule xsi:type="ItemHasKnownEntity" 
        EntityType="PhoneNumber"/>
    
  • Choix de l’activation ou de la désactivation de la mise en surbrillance d’instances d’entités spécifiées dans le manifeste—L’élément DisableEntityHighlighting dans la ligne XML suivante spécifie la valeur false pour désactiver la mise en surbrillance d’entités dans le corps de l’élément correspondant à l’expression régulière.

    <DisableEntityHighlighting>false</DisableEntityHighlighting>
    

Voir Annexe A : Manifeste XML pour un listing complet du manifeste XML.

Implémentation HTML

Le code HTML définit l’interface utilisateur pour cette application. Cette section souligne quelques aspects intéressants du fichier HTML pour cette application.

  • Un mode de document pour Internet Explorer 9—Comme Outlook utilise des composants Internet Explorer 9 dans un contrôle de navigateur pour ouvrir la page HTML, vous devez placer la ligne HTML suivante comme élément enfant de l’élément head dans le fichier HTML, avant tous les autres éléments à l’exception de l’élément title et d’autres éléments meta.

    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    
  • Emplacement des bibliothèques JavaScript et du fichier JavaScript spécifique de l’application—Comme décrit dans la section précédente, le manifeste XML spécifie l’emplacement du fichier HTML, et le fichier HTML, à son tour, spécifie les bibliothèques JavaScript et le fichier JavaScript pour cette application. Le fichier HTML spécifie que le fichier de bibliothèque API JavaScript, Office.js, est accessible à partir du CDN (Content Delivery Network), et que les autres fichiers de bibliothèque JavaScript, jquery-1.4.2.js, MicrosoftAjax.js, ainsi que dialer.js, se trouvent dans le sous-dossier Scripts, en association avec le fichier HTML comme le montrent les lignes HTML suivantes.

        <script type="text/javascript" 
            src="Scripts/jquery-1.4.2.js"></script>
        <script type="text/javascript" 
            src="Scripts/MicrosoftAjax.js"></script>
        <!-- Use the CDN reference to Office.js when deploying your app. -->
        <script type="text/javascript" 
            src="https://appsforoffice.microsoft.com/lib/1.0/hosted/Office.js"></script>
        <script type="text/javascript" 
            src="Scripts/dialer.js"></script>
    
    
  • Utilisation de la feuille de style Outlook.css—La ligne HTML suivante spécifie l’utilisation facultative de la feuille de style Outlook.css.

        <link rel="stylesheet" type="text/css" 
            href="Css/Outlook.css" />
    
  • Le gestionnaire d’événements pour l’événement onload—Lorsque le navigateur charge le corps HTML, l’événement onload se produit. La ligne suivante spécifie la méthode loadcomplete comme le gestionnaire d’événements, qui est défini dans le fichier JavaScript.

    <body onload="loadcomplete()">
    
  • La section principale du fichier HTML spécifie l’aspect de la page web, définit une section nommée dialerholder que le code JavaScript peut dynamiquement mettre à jour pour afficher les numéros de téléphone à partir du corps de l’élément.

        <div>
            <table>
                <tr>
                    <td rowspan="2">
                        <img src="Images/Icon_narrow.png" 
                            alt='Phone Dialer' align="top" />
                    </td>
                    <td style="font-family: Segoe UI; Font-size: 10pt;"
                        valign="top">
                        <b>Click to Call:</b>
                    </td>
                </tr>
                <tr>
                    <td style="font-family: Segoe UI; font-size: 10pt;"
                        valign="middle" align="center">
                        <div id="dialerholder">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div>
    
    
  • La partie inférieure de l’interface utilisateur assure la prise en charge des utilisateurs ayant des questions à poser ou souhaitant fournir des commentaires.

            <p style="font-family: Segoe UI; font-size: 10pt;" 
               class="supportLabel">
                <i>Please <a id="support" href=
                "mailto:Support@contoso.com?subject=Phone Dialer Feedback&body=">
                contact</a> for any feedback.</i>
            </p>
    
    

Voir Annexe B : Fichier HTML pour un listing complet du fichier HTML.

Implémentation JavaScript

Le code JavaScript prend en charge la fonctionnalité de l’application derrière l’interface utilisateur dans le volet d’application. Cette section souligne quelques aspects intéressants du fichier JavaScript pour cette application :

  • Définition de la fonction loadcomplete—Une application définit ce gestionnaire d’événements pour l’événement onload afin de spécifier que le navigateur a chargé le corps HTML et que le modèle objet de document est prêt. Cette fonction définit bodyload à true. Cette application vérifie les deux indicateurs—bodyload et init (qui est défini par la fonction onInitializeComplete pour indiquer que l’environnement d’exécution est chargé)—avant d’appeler la fonction principale de l’application, initDialer.

    function loadcomplete() {
        bodyload = true;
        if (bodyload && init) 
            initDialer();
    }
    
    
  • Définition de la fonction initialize—Chaque application pour Office doit définir un gestionnaire d’événements pour l’événement initialize, qui se produit lors du chargement de l’environnement d’exécution. Ce gestionnaire d’événements initialize obtient l’objet Mailbox à partir de la propriété Office.context.mailbox. Ensuite, il obtient l’élément actuel à partir de la propriété item de l’objet Mailbox. Le gestionnaire d’événements appelle ensuite la fonction onInitializeComplete.

    // The initialize function is required for all apps.
    Office.initialize = function () {
        item = Office.context.mailbox.item;
        onInitializeComplete();
    }
    
    
  • Définition de la fonction onInitializeComplete—Cette fonction est appelée par le gestionnaire d’événements initialize lors du chargement de l’environnement d’exécution. Cette fonction définit init à true. L’application contrôle les deux indicateurs—bodyload (qui sont définis par la fonction loadcomplete pour indiquer que le navigateur a chargé la page HTML et que le modèle objet de document est prêt) et init—avant d’appeler la fonction principale de l’application, initDialer.

    // Handler for initialization complete.
    function onInitializeComplete() {
        init = true;
        if (bodyload && init) {
            initDialer();
        }
    }
    
    
  • Appel de la fonction principale de l’application initDialer—Comme nous l’avons vu dans les fonctions loadcomplete et onInitializeComplete, cette application s’assure que l’événement initialize et l’événement onload de la page HTML se sont produits, et que l’application est prête à entrer en interaction avec Outlook, avant d’appeler la fonction principale, initDialer.

  • Affichage des numéros de téléphone dans le corps de l’élément sous forme de liens—La fonction principale de cette application, initDialer, utilise la méthode getEntities de l’élément actuel pour renvoyer un tableau d’entités prises en charge dans l’objet ou le corps de l’élément actuel. initDialer utilise ensuite la propriété phoneNumbers pour obtenir un tableau d’un ou plusieurs numéros de téléphone parmi les entités. Comme l’élément sélectionné satisfait la règle ItemHasKnownEntity dans le manifeste et que l’application hôte a activé cette application, l’élément sélectionné doit au moins contenir un numéro de téléphone. initDialer analyse le tableau, associe chaque numéro de téléphone à un lien hypertexte callto:tel:. Lorsque l’utilisateur choisit l’un de ces liens, Lync s’ouvre et l’utilisateur peut commencer à utiliser Lync pour composer le numéro.

    Pour plus d’informations sur les extensions d’interpréteur de commandes que Lync Server prend en charge, voir Exécution de l’interpréteur de commandes de Communicator 2007.

    // Initialze dialer.
    function initDialer() {
        var numbers = item.getEntities().phoneNumbers;
        var htmlElement = document.getElementById('dialerholder');
        var supportElement = document.getElementById('support');
        var htmlToShow = "";
    
        if (numbers == null || numbers.length == 0) {
            htmlElement.innerHTML = 
            "<b style='color:Red'>Error happened while getting 
            phone numbers. Please contact to report this issue.<b>";
            supportElement.href += "Phone Numbers Entity is Null";
            return;
        }
    
        $.each(numbers, function (i, number) {
            htmlToShow += "<br><a href='callto:tel:" + 
            number.phoneString + "'>" + 
            number.originalPhoneString + "</a>";
        });
    
        htmlElement.innerHTML = htmlToShow;
        supportElement.href += "Phone Numbers Length is: " + 
            numbers.length;
    }
    
    

Voir l’Annexe C : Fichier JavaScript pour un listing complet du fichier JavaScript.

En général, vous pouvez appliquer le code dans cette application à tout service VOIP ayant inscrit les protocoles callto: et tel:. Cette rubrique utilise Lync 2013 comme exemple, et part du principe que l’utilisateur final a installé le client Lync et l’a utilisé au moins une fois sur l’ordinateur client.

Essayez d’adapter ce code pour d’autres services VOIP prenant en charge les mêmes protocoles.

Le listing suivant correspond au manifeste XML de l’application de messagerie Numéroteur téléphonique.

<?xml version="1.0" encoding="utf-8"?>
<OfficeApp 
xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:type="MailApp">
  <Id>BB10B02E-6F7F-46BB-8DFC-418E8F7986AF</Id>
  <Version>1.0</Version>
  <ProviderName>Microsoft</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="Phone Dialer"/>
  <Description DefaultValue="Detects phone numbers within a 
message or appointment and shows the links to call. 
Only North American phone number formats are currently 
supported, and you must have some Voice over IP application 
already installed (like Lync or Skype)."/>
  <!-- Change the following line to specify the web server -->
  <!-- where the icon file is hosted. -->
  <IconUrl DefaultValue=
    "https://webserver/PhoneDialer/Images/Icon.png" />
  <Capabilities>
    <Capability Name="Mailbox"/>
  </Capabilities> 
  <DesktopSettings>
    <!-- Change the following line to specify the web server -->
    <!-- where the HTML file is hosted. -->
    <SourceLocation DefaultValue=
      "https://webserver/PhoneDialer/dialer.htm" />
    <RequestedHeight>150</RequestedHeight>
  </DesktopSettings>
  <Permissions>ReadItem</Permissions>
  <Rule xsi:type="ItemHasKnownEntity" 
    EntityType="PhoneNumber"/>
  <DisableEntityHighlighting>false</DisableEntityHighlighting>
</OfficeApp>

Le listing suivant correspond au fichier HTML de l’application de messagerie Numéroteur téléphonique.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <style type="text/css">
        .supportLabel
        {
            bottom: 5px;
            left: 5px;
            z-index: 10;
            font-size: 10px;
            white-space: nowrap;
        }
    </style>
    <title>Phone Dialer</title>
    <link rel="stylesheet" type="text/css" href="Css/Outlook.css" />
    <script type="text/javascript" src="Scripts/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="Scripts/MicrosoftAjax.js"></script>
    <!-- Use the CDN reference to Office.js when deploying your app. -->
    <script type="text/javascript" 
        src="https://appsforoffice.microsoft.com/lib/1.0/hosted/Office.js"></script>
    <script type="text/javascript" src="Scripts/dialer.js"></script>
</head>
<body onload="loadcomplete()">
    <div>
        <table>
            <tr>
                <td rowspan="2">
                    <img src="Images/Icon_narrow.png" alt='Phone Dialer' align="top" />
                </td>
                <td style="font-family: Segoe UI; font-size: 10pt;" valign="top">
                    <b>Click to Call:</b>
                </td>
            </tr>
            <tr>
                <td style="font-family: Segoe UI; font-size: 10pt;" valign="middle" 
align="center">
                    <div id="dialerholder">
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div>
        <p style="font-family: Segoe UI; font-size: 10pt;" class="supportLabel">
            <i>Please <a id="support" href="mailto:ExDogAgave@microsoft.com?subject=Phone Dialer 
Feedback&body=">
                Contact</a> for any feedback.</i>
        </p>
    </div>
</body>
</html>

Le listing suivant correspond au fichier JavaScript de l’application de messagerie Numéroteur téléphonique.

var init = false;
var bodyload = false
var item;

// The initialize function is required for all apps.
Office.initialize = function () {
    item = Office.context.mailbox.item;
    onInitializeComplete();
}

// Initialze dialer.
function initDialer() {
    var numbers = item.getEntities().phoneNumbers;
    var htmlElement = document.getElementById('dialerholder');
    var supportElement = document.getElementById('support');
    var htmlToShow = "";

    if (numbers == null || numbers.length == 0) {
        htmlElement.innerHTML = 
        "<b style='color:Red'>Error happened while getting 
        phone numbers. Please contact to report this issue.<b>";
        supportElement.href += "Phone Numbers Entity is Null";
        return;
    }

    $.each(numbers, function (i, number) {
        htmlToShow += "<br><a href='callto:tel:" + 
        number.phoneString + "'>" + 
        number.originalPhoneString + "</a>";
    });

    htmlElement.innerHTML = htmlToShow;
    supportElement.href += "Phone Numbers Length is: " + 
        numbers.length;
}

// Handler for initialization complete.
function onInitializeComplete() {
    init = true;
    if (bodyload && init) {
        initDialer();
    }
}

// Handler for app body onload.
function loadcomplete() {
    bodyload = true;
    if (bodyload && init) {
        initDialer();
    }
}

Microsoft réalise une enquête en ligne pour recueillir votre opinion sur le site Web de MSDN. Si vous choisissez d’y participer, cette enquête en ligne vous sera présentée lorsque vous quitterez le site Web de MSDN.

Si vous souhaitez y participer,
Afficher:
© 2014 Microsoft