Table of contents
TOC
Réduire la table des matières
Développer la table des matières
Dernière mise à jour: 20/06/2018

Commandes de l'interface utilisateur JavaScript Office 365

Concerne : Office 365

Vous pouvez utiliser les commandes de l'interface utilisateur JavaScript Office 365 pour ajouter une barre de navigation de style Office 365 à votre application et permettre aux utilisateurs d'accéder aux données sur les utilisateurs d'Azure Active Directory (Azure AD). Ces commandes de l'interface utilisateur JavaScript ne nécessitent pas de code côté serveur et peuvent être intégrées dans une application monopage (SPA) avec seulement quelques lignes de code.

Si vous souhaitez personnaliser l'interface utilisateur ou le fournisseur de données pour ces commandes, vous pouvez les trouver sur OfficeDev - GitHub :

Ces commandes de l'interface utilisateur, qui peuvent fonctionner indépendamment ou ensemble, comprennent :

  • AppChrome - Avec la commande AppChrome, votre application peut afficher une barre de navigation de style Office 365 ainsi que des liens personnalisés. Cela permet aux utilisateurs d'ouvrir et de fermer une session sur leur compte Office 365, et de naviguer vers les sites et les pages que vous souhaitez utiliser.

    Commande AppChrome avant qu'un utilisateur ne se connecte

    Commande AppChrome avec l'utilisateur non connecté


    Commande AppChrome après la connexion d'un utilisateur

    Commande AppChrome avec l'utilisateur connecté


    Commande AppChrome avec des liens personnalisés

    Commande AppChrome avec liste déroulante


  • Sélecteur de personnes - Avec la commande Sélecteur de personnes, un utilisateur peut rechercher les personnes dans son répertoire d'organisations en tapant un mot-clé, puis les personnes du répertoire qui correspondent aux résultats de la recherche sont affichées.

    Sélecteur de personnes

    Une capture d'écran qui montre le sélecteur de personnes


  • Carte Persona - Avec la carte Persona en ligne et la carte Persona détaillée, un utilisateur peut afficher des informations sur une personne dans son organisation. La carte Persona affiche les données d'une source telle que la commande du sélecteur de personnes. Lorsqu'un utilisateur clique sur la carte Persona en ligne, il peut obtenir plus d'informations sur l'utilisateur sélectionné sur la carte Persona détaillée.

    Carte Persona en ligne

    Carte Persona en ligne


    Carte Persona détaillée

    Carte Persona détaillée


    Après avoir cliqué sur carte Persona en ligne

    Après avoir cliqué sur carte Persona en ligne


Ajoutez un code des commandes Office 365

  • Ajoutez un code de commande AppChrome

    <script src="https://controls.office.com/people/1.0/Office.Controls.People.min.js"></script>
    <link href="https://controls.office.com/people/1.0/Office.Controls.People.min.css" rel="stylesheet">
    <script src="https://controls.office.com/appChrome/1.0/Office.Controls.AppChrome.min.js"></script>
    <link href="https://controls.office.com/appChrome/1.0/Office.Controls.AppChrome.min.css" rel="stylesheet">
    
  • Ajoutez un code de commande People

    <script src="https://controls.office.com/people/1.0/Office.Controls.People.min.js"></script>
    <link href="https://controls.office.com/people/1.0/Office.Controls.People.min.css" rel="stylesheet">
    

AppChrome

Avant de commencer

Si vous n'avez pas encore créé une application d'une seule page pour héberger les commandes JavaScript Office 365, consultez Créer une application avec les API Office 365 pour des instructions détaillées sur la mise en place.

Remarque Veuillez configurer votre application pour autoriser le flux d’octroi implicite OAuth 2.0.

Créer AppChrome dans SPA

Créer la commande AppChrome

Syntaxe

new Office.Controls.AppChrome(appTitle, container, loginProvider, options) 

Paramètres

ParamètreTypeDescription
appTitleChaîneLe nom de l'application affiché sur la barre de navigation de la commande AppChrome. La valeur par défaut est « 3rd Party App ».
conteneurObjetL'élément HTML qui contient la commande AppChrome.
loginProviderObjetL'objet qui gère la logique de connexion, requise par la commande AppChrome.
optionsObjetFacultative. L'objet qui contient diverses options prises en charge par la commande AppChrome.

Valeur renvoyée

Type: Object
An AppChrome Object

Autorisations

Autorisations requises pour configurer Azure AD.

Nom de la commandeNom de l’applicationAutorisations de l’applicationAutorisations déléguées
AppChromeAzure ADSe connecter et lire le profil utilisateur

Référence

options
{
    "appHomeUrl": "", // type: String. description: The link for appTitle. The default value is null.
    "onSignIn": function() {}, // description: The Listener function will be called when user clicks the "Sign in" button.
    "onSignOut": function() {}, // description: The Listener function will be called when user clicks the "Sign out" button.
    "customizedItems": // type: Object. description: The custom items displayed in dropdown list below inline persona. The dropdown list will be available only when current user is signed in.
    { 
         <displayName1>: <linkUrl1>,         
         <displayName2>: <linkUrl2>,
         ...
         <displayNameN>: <linkUrlN>
    } 
}
objet loginProvider

Cet objet doit exposer les fonctions suivantes, qui seront appelées par la commande AppChrome.

{
    function login() {} // required. The function to call to sign in. When this function is called, the client app redirects the user to the Azure AD authorization endpoint. After authenticating, the user should be redirected back to the client application. 
    function logout() {} // required. The function to call to sign out. When this function is called, the user signs out. The client app redirects the user back to the specified endpoint. 
    function getUserInfoAsync(callback) {} // required.The function to get user data which will be displayed in the inline persona.   
       //  callback(error, userData)
       //      error: type: String. description: An error message if the call to get userData fails.
       //      userData: type: Object. description: Contains the below key-value pairs of user's information, displayed in inline Persona after login.
       //      { 
       //       "account": "", // type: String. description: Registered account name, displayed in inline persona. 
       //       "userName": "", // type: String. description: The user's name, displayed both in navigation bar and inline persona. 
       //       "imgSrc": "" // type: String. description: It's displayed both in navigation bar and inline persona. If it is not provided, a default image will be displayed.  
       //      } 
    function hasLogin() {} // optional. The function is used to check sign-in status. If this function isn't provided, the AppChrome control uses getUserInfoAsync(callback) to determine whether to show the user's sign-in status.
}

Remarque : Lorsque le type d'octroi subvention implicite est utilisé, vous pouvez utiliser le fournisseur de connexion d'octroi implicite. Pour plus d'informations, voir Comment créer fournisseur de connexion d'octroi implicite et Office.Controls.Login.js. Lorsque le flux d'octroi du code d'autorisation est utilisé, l'objet loginProvider doit être fourni par des développeurs tiers.

Comment créer ImplicitGrant loginProvider
  • Ajouter le code ImplicitGrant loginProvider
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/adal.min.js"></script>
<script src="https://controls.office.com/appChrome/1.0/Office.Controls.Login.min.js"></script>
  • Comment créer ImplicitGrant loginProvider
var config = {
        var clientId = "********-****-****-****-************",  //Please replace with your clientID
        redirectUri: window.location.href,
        postLogoutRedirectUri: window.location,
        cacheLocation: 'localStorage' // enable this for Internet Explorer, as sessionStorage does not work for localhost.
};
var loginProvider = new Office.Controls.ImplicitGrantLogin(config);

Sélecteur de personnes

Avant de commencer

Si vous n'avez pas encore créé une application d'une seule page pour héberger les commandes JavaScript Office 365, consultez Créer une application avec les API Office 365 pour des instructions détaillées sur la mise en place.

Remarque Veuillez configurer votre application pour autoriser le flux d’octroi implicite OAuth 2.0.

Créer un sélecteur de personnes dans SPA

Créer la commande du sélecteur de personnes

Syntaxe

Office.Controls.PeoplePicker.create(container, authContext, options);

Paramètres

ParamètreTypeDescription
conteneurObjetL'élément HTML qui contient la commande du sélecteur de personne.
authContextObjetL'objet créé par ADAL pour accéder aux données Office 365.
optionsObjetFacultative. L'objet qui contient diverses options prises en charge par le Sélecteur de personnes.

Valeur renvoyée

Type: Object

A People Picker Object

Méthode

Syntaxe

function getAddedPeople()

Valeur renvoyée

Type: Object

An array of person objects. These are the items picked from search results. 

Autorisations

Autorisations requises pour configurer Azure AD.

Nom de la commandeNom de l’applicationAutorisations de l’applicationAutorisations déléguéesCommentaires
Commande des personnesAzure ADActiver la connexion et lire le profil utilisateurToutes les commandes de personne requièrent cette autorisation.
Sélecteur de personnesAzure ADLire les profils de base de tous les utilisateurs
Carte PersonaAzure ADLire les profils de base de tous les utilisateurs
Carte PersonaAzure ADLire les profils complets de tous les utilisateursAzure AD nécessite une autorisation plus élevée si l'application doit obtenir les numéros de téléphone des utilisateurs. admin_consent doit être défini pour le paramètre « invite » dans flux d'octroi du code d'autorisation.

Référence

options
{
    "allowMultipleSelections": false, // type: bool. default: false. description: determines whether a user can pick multiple people
    "showImage": true, // type: bool. default: true. description: determines whether to show a person's avatar image 
    "inputHint": "Type name...", // type: String. default: "Type name...". description: determines the hint text to show in the search input field
    "onChange": function(peoplePickerObject) {}// type: function. description: the event-handler function called when a person is picked or deleted
}

Carte Persona

Créer une carte Persona dans SPA

Créer une carte Persona en ligne

Syntaxe

Office.Controls.Persona.PersonaHelper.createInlinePersona(container, personObject, event);

Paramètres

ParamètreTypeDescription
conteneurObjetL'élément HTML qui contient la carte Persona en ligne.
personObjectObjetL'objet des données de personne.
évènementChaîneFacultative. L'événement pour afficher ou masquer la carte Persona détaillée. La seule valeur prise en charge est Cliquez.

Créer une carte Persona détaillée

Syntaxe

Office.Controls.Persona.PersonaHelper.createPersonaCard(container, personObject);

Paramètres

ParamètreTypeDescription
conteneurObjetL'élément HTML qui contient la carte Persona détaillée.
personObjectObjetL'objet des données de personne.

Référence

objet personne
    {
       "displayName": "", // type: String. description: display name 
       "department": "", // type: String. description: department
       "description": "", // type: String. description: description of the person
       "jobTitle": "", // type: String. description: job title
       "mail": "", // type: String. description: e-mail address
       "workPhone": "", // type: String. description: work phone number
       "mobile": "", // type: String. description: mobile phone number
       "office": "", // type: String. description: office address
       "sipAddress": "", // type: String. description: sip address
       "alias": "", // type: String. description: alias
       "personId": "", // type: String. description: GUID of the person
       "imgSrc": ""// type:String. description: URL to avatar image
   }

Exemple d’application

Dans cette étape, vous allez configurer une application d'une seule page avec toutes les commandes. Elle utilise la commande AppChrome pour gérer le processus de connexion. Après qu'un utilisateur se connecte, il peut utiliser le sélecteur de personnes et la carte Persona pour obtenir des données.

Remarque Vous devez remplacer ********-****-****-****-************ avec un ID de client valide pour votre application. Pour plus d'informations sur la mise en place, voir Créer une application avec les API Office 365. Veuillez configurer votre application pour autoriser le flux d’octroi implicite OAuth 2.0.

Créez un fichier HTML vide, puis copiez le code suivant et enregistrez le fichier. Ouvrez le fichier HTML dans un navigateur pris en charge. Connectez-vous en utilisant vos informations d'identification Office 365 dans AppChrome et utilisez le sélecteur de personnes pour sélectionner une personne. Les informations de cette personne sont affichées au format JSON ainsi que dans une carte Persona.

<!DOCTYPE html>
<html>
  <head>
      <title>Sample App with People controls</title>
      <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/adal.min.js"></script>
      <script src="https://controls.office.com/people/1.0/Office.Controls.People.min.js"></script>
      <link href="https://controls.office.com/people/1.0/Office.Controls.People.min.css" rel="stylesheet">
      <script src="https://controls.office.com/appChrome/1.0/Office.Controls.Login.min.js"></script>
      <script src="https://controls.office.com/appChrome/1.0/Office.Controls.AppChrome.min.js"></script>
      <link href="https://controls.office.com/appChrome/1.0/Office.Controls.AppChrome.min.css" rel="stylesheet">
      <script>
          window.onload = function() {
             var implicitGrantLogin = createLoginProvider();
             createAppChrome(implicitGrantLogin);
             var authContext = implicitGrantLogin.getAuthContext();
             showPeoplePicker(authContext);
          };

          function createLoginProvider() {
             var config = {
                clientId: "********-****-****-****-************", //Please replace with your clientID
                redirectUri: window.location.href,
                postLogoutRedirectUri: window.location,
                cacheLocation: 'localStorage' // enable this for IE, as sessionStorage does not work for localhost.
              };

            var loginProvider = new Office.Controls.ImplicitGrantLogin(config);
            return loginProvider;
          }

          function createAppChrome(loginProvider) {
            var ItemtoAdd = {
                "Customized Item 1": "http://www.contoso.com/item1", // put your customized item 1 page
                "Customized Item 2": "http://www.contoso.com/item2", // put your customized item 2 page
                "Customized Item 3": "http://www.contoso.com/item3" // put your customized item 3 page
              };
            options = new Object();
            options.appHomeUrl = "http://www.contoso.com/"; // put your home page url 
            options.customizedItems = ItemtoAdd;
            var appChrome = new Office.Controls.AppChrome("Contoso App", document.getElementById('container'), loginProvider, options);
          }

          function showPeoplePicker(userAuth) {
                  var options = {
                      "allowMultipleSelections": true,
                      "showImage": true,
                      "onChange": function(control) {
                          clear();
                          var pickedUsers = control.getAddedPeople();
                          document.getElementById("resultJSON").textContent = JSON.stringify(pickedUsers, null, 4);
                          if(pickedUsers != null) {
                            showInlinePersona(pickedUsers[pickedUsers.length - 1]);
                            showDetailedPersona(pickedUsers[pickedUsers.length - 1]);
                          }
                      }
                  };
                  Office.Controls.PeoplePicker.create(document.getElementById("payload"), userAuth, options);
          }

          function showInlinePersona(person) {
               var personaContainer = document.getElementById("inlinePersona");
               Office.Controls.Persona.PersonaHelper.createInlinePersona(personaContainer, person, "click");   
          }

          function showDetailedPersona(person) {
                var personaContainer = document.getElementById("detailedPersona");
                Office.Controls.Persona.PersonaHelper.createPersonaCard(personaContainer, person);
          }

          function clear(){
              document.getElementById("inlinePersona").innerHTML = "";
              document.getElementById("detailedPersona").innerHTML = "";
              document.getElementById("resultJSON").innerHTML = "";
          }
      </script>
  </head>
  <body>
      <div id="container"></div>
      <span id = "userProfile"></span>
      <div id = "payload"></div>
      <H5>InlinePersona(Recent Picked User):</h5>
      <div id = "inlinePersona"></div>
      <h5>Picked Users:</h5>
      <div id = "resultJSON"></div>
      <h5>DetailedPersona(Recent Picked User):</h5>
      <div id = "detailedPersona"></div>
  </body>
</html>

Navigateurs pris en charge

Les commandes d'interface utilisateur Office 365 JavaScript sont prises en charge par les navigateurs Web suivants :

  • Internet Explorer 10+
  • Chrome 43+
  • Firefox 39+

Commentaires

Envoyez-nous vos commentaires sur Office Developer Platform UserVoice

© 2018 Microsoft