Table of contents
TOC
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern
Zuletzt aktualisiert: 20.06.2018

Office 365 JavaScript-Steuerelemente

Gilt für: Office 365

Sie können die Office 365 JavaScript-UI-Steuerelemente verwenden, um Ihrer Anwendung eine Navigationsleiste im Stil von Office 365 hinzuzufügen und Benutzern den Zugriff auf Daten über Personen in Azure Active Directory (Azure AD) zu ermöglichen. Diese JavaScript-UI-Steuerelemente benötigen keinen serverseitigen Code und können mit wenigen Zeilen Code in eine Single-Page-Webanwendung (SPA) integriert werden.

Wenn Sie die Benutzeroberfläche oder den Datenprovider für diese Steuerelemente anpassen möchten, finden Sie diese im OfficeDev - GitHub:

Diese UI-Steuerelemente, die unabhängig voneinander oder gemeinsam funktionieren, umfassen:

  • AppChrome - Mit dem AppChrome-Steuerelement kann Ihre Anwendung eine Navigationsleiste im Office 365-Stil sowie benutzerdefinierte Links anzeigen. Auf diese Weise können sich Benutzer in ihrem Office 365-Konto an- und abmelden und zu den Websites und Seiten navigieren, die Sie anzeigen möchten.

    AppChrome-Steuerelement vor der Anmeldung eines Benutzers

    AppChrome-Steuerelement mit nicht angemeldetem Benutzer


    AppChrome-Steuerelement nach der Anmeldung eines Benutzers

    AppChrome-Steuerelement mit angemeldetem Benutzer


    AppChrome-Steuerelement mit benutzerdefinierten Links

    AppChrome-Steuerelement mit Dropdown-Liste


  • People Picker - Mit dem Steuerelement People Picker kann ein Benutzer die Personen in seinem Organisationsverzeichnis suchen, indem er ein Schlüsselwort eingibt - dann werden die Personen im Verzeichnis angezeigt, die den Suchergebnissen entsprechen.

    Personenauswahl

    Ein Screenshot, der den People Picker zeigt.


  • Persona Card - Mit der Inline Persona Card und der Detailed Persona Card kann ein Benutzer Informationen über eine Person in seiner Organisation sehen. Die Persona Card zeigt Daten aus einer Quelle wie dem People Picker Steuerelement an. Wenn ein Benutzer auf die Inline Persona Card klickt, kann er auf der Detailed Persona Card weitere Informationen über den ausgewählten Benutzer sehen.

    Inline Persona Card

    Inline Persona Card


    Detailed Persona Card

    Detailed Persona Card


    Nachdem die Inline Persona Card angeklickt wurde

    Nachdem die Inline Persona Card angeklickt wurde


Office 365-Steuerungscode hinzufügen

  • AppChrome-Steuerungscode hinzufügen

    <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">
    
  • Personenkontrollcode hinzufügen

    <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

Bevor Sie starten

Wenn Sie noch keine Single-Page-Webanwendung zum Hosten der Office 365 JavaScript-Steuerelemente erstellt haben, finden Sie unter Erstellen einer Anwendung mit Office 365-APIs detaillierte Anweisungen.

Notiz Bitte konfigurieren Sie Ihre Anwendung so, dass der Implicit Grant Flow von OAuth 2.0 erlaubt ist.

AppChrome in SPA erstellen

Erstellen des AppChrome-Steuerelements

Syntax

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

Parameter

ParameterTypBeschreibung
appTitleZeichenfolgeDer Name der Anwendung, der in der Navigationsleiste des AppChrome-Steuerelements angezeigt wird. Der Standardwert ist "3rd Party App".
ContainerObjectDas HTML-Element, das das AppChrome-Steuerelement enthält.
loginProviderObjectDas Objekt, das die Anmeldelogik verwaltet, die vom AppChrome-Steuerelement benötigt wird.
optionsObjectOptional. Das Objekt, das verschiedene vom AppChrome-Steuerelement unterstützte Optionen enthält.

Rückgabewert

Type: Object
An AppChrome Object

Berechtigungen

Für die Konfiguration in Azure AD sind Berechtigungen erforderlich.

SteuerelementnameName der AnwendungAnwendungsberechtigungenDelegierte Berechtigungen
AppChromeAzure ADAnmelden und Benutzerprofil lesen.

Referenz

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>
    } 
}
loginProvider object

Dieses Objekt muss die folgenden Funktionen enthalten, die vom AppChrome-Steuerelement aufgerufen werden.

{
    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.
}

** Note:** Wenn der Implicit Grant Type verwendet wird, können Sie den ImplicitGrant loginProvider verwenden. Weitere Informationen finden Sie unter Erstellen von ImplicitGrant loginProvider und Office.Controls.Login.js. Wenn der Berechtigungscode Grant Flow verwendet wird, sollte das loginProvider-Objekt von Drittanbietern bereitgestellt werden.

So erstellen Sie ImplicitGrant loginProvider
  • ImplicitGrant loginProvider-Code hinzufügen
<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>
  • ImplicitGrant loginProvider erstellen
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);

Personenauswahl

Bevor Sie starten

Wenn Sie noch keine Single-Page-Webanwendung zum Hosten der Office 365 JavaScript-Steuerelemente erstellt haben, finden Sie unter Erstellen einer Anwendung mit Office 365-APIs detaillierte Anweisungen.

Notiz Bitte konfigurieren Sie Ihre Anwendung so, dass der Implicit Grant Flow von OAuth 2.0 erlaubt ist.

People Picker im SPA anlegen

Erstellen des People Picker-Steuerelements

Syntax

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

Parameter

ParameterTypBeschreibung
ContainerObjectDas HTML-Element, das das People Picker-Steuerelement enthält.
authContextObjectDas von ADAL erstellte Objekt für den Zugriff auf Office 365-Daten.
optionsObjectOptional. Das Objekt, das verschiedene von People Picker unterstützte Optionen enthält.

Rückgabewert

Type: Object

A People Picker Object

Methode

Syntax

function getAddedPeople()

Rückgabewert

Type: Object

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

Berechtigungen

Für die Konfiguration in Azure AD sind Berechtigungen erforderlich.

SteuerelementnameName der AnwendungAnwendungsberechtigungenDelegierte BerechtigungenKommentare
PersonenkontrolleAzure ADAnmelden und Benutzerprofil lesenAlle Personenkontrollen benötigen diese Erlaubnis.T+>>
PersonenauswahlAzure ADGrundlegende Profile aller Benutzer lesen
Persona CardAzure ADGrundlegende Profile aller Benutzer lesen
Persona CardAzure ADLesezugriff auf vollständige Profile aller BenutzerAzure AD benötigt eine höhere Berechtigung, um die Telefonnummern der Benutzer zu erhalten. admin_consent muss für den Parameter "prompt" auf authorization code grant flowgesetzt werden.

Referenz

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
}

Persona Card

Persona Card in SPA anlegen

Erstellen einer Inline-Persona Card

Syntax

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

Parameter

ParameterTypBeschreibung
ContainerObjectDas HTML-Element, das die Inline Persona Card enthält.
personObjectObjectDas Objekt mit den Personendaten.
eventZeichenfolgeOptional. Das Ereignis, um die Detailed Persona Card ein- oder auszublenden. Der einzige unterstützte Wert ist click.

Erstellen einer Detailed Persona Card

Syntax

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

Parameter

ParameterTypBeschreibung
ContainerObjectDas HTML-Element, das die Detailed Persona Card enthält.
personObjectObjectDas Objekt mit den Personendaten.

Referenz

person object
    {
       "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
   }

Beispielanwendung

In diesem Schritt richten Sie eine Single-Page-Webanwendung mit allen Steuerelementen ein. Sie verwendet das AppChrome-Steuerelement, um den Anmeldevorgang zu steuern. Nachdem sich ein Benutzer angemeldet hat, kann er mit dem People Picker und der Persona Card Daten abrufen.

Notiz Sie sollten die ********-****-****-****-************ durch eine gültige Client-ID für Ihre Anwendung ersetzen. Weitere Informationen zum Einrichten finden Sie unter Erstellen einer Anwendung mit Office 365-APIs. Bitte konfigurieren Sie Ihre Anwendung so, dass der Implicit Grant Flow von OAuth 2.0 erlaubt ist.

Erstellen Sie eine leere HTML-Datei, kopieren Sie den folgenden Code und speichern Sie die Datei. Öffnen Sie die HTML-Datei in einem unterstützten Browser. Melden Sie sich mit Ihren Office 365-Anmeldeinformationen in AppChrome an und wählen Sie mit dem People Picker eine Person aus. Die Informationen dieser Person werden sowohl im JSON-Format als auch in einer Persona Card angezeigt.

<!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>

Unterstützte Browser

Die Office 365 JavaScript-UI-Steuerelemente werden von den folgenden Webbrowsern unterstützt:

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

Feedback

Senden Sie uns Feedback an Office Developer Platform UserVoice

© 2018 Microsoft