Table of contents
TOC
Collapse the table of content
Expand the table of content
Última actualización: 20/06/2018

Controles JavaScript de Office 365

Se aplica a: Office 365

Puede usar los controles de interfaz de usuario JavaScript de Office 365 para agregar una barra de navegación de estilo Office 365 a su aplicación y también permitir que los usuarios accedan a datos sobre personas en Azure Active Directory (Azure AD). Estos controles de interfaz de usuario JavaScript no requieren el código del lado del servidor, y se pueden integrar en una aplicación de una sola página (SPA) con solo unas pocas líneas de código.

Si desea personalizar la interfaz de usuario o el proveedor de datos para estos controles, puede encontrarlos en OfficeDev - GitHub:

Estos controles de interfaz de usuario, que pueden funcionar de forma independiente o en conjunto, incluyen:

  • AppChrome - Con el control AppChrome, su aplicación puede mostrar una barra de navegación de estilo Office 365, así como enlaces personalizados. Esto permite a los usuarios iniciar y cerrar sesión en su cuenta de Office 365 y navegar a los sitios y páginas que desea mostrar.

    Control de AppChrome antes de que un usuario inicie sesión

    Control de AppChrome con el usuario no conectado


    Control AppChrome después de que un usuario inicia sesión

    Control AppChrome con usuario registrado


    Control AppChrome con enlaces personalizados

    Control AppChrome con lista desplegable


  • Selector de personas - Con el control de selector de personas, un usuario puede buscar a personas en su directorio de organización escribiendo una palabra clave, y luego se muestran las personas en el directorio que coinciden con los resultados de búsqueda.

    Selector de personas

    Una captura de pantalla que muestra el selector de personas


  • Tarjeta de persona - Con la tarjeta de persona Inline y la tarjeta de persona detallada, un usuario puede ver información sobre una persona en su organización. La tarjeta de persona muestra datos de una fuente, como el control del selector de personas. Cuando un usuario hace clic en la tarjeta de identidad Inline, puede ver más información sobre el usuario seleccionado en la tarjeta de persona detallada.

    Tarjeta de persona Inline

    Tarjeta de persona Inline


    Tarjeta de persona detallada

    Tarjeta de persona detallada


    Después de hacer clic en la tarjeta de persona Inline

    Después de hacer clic en la tarjeta de persona Inline


Agregue el código de controles de Office 365

  • Agregue código de control 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">
    
  • Código de control Agregar personas

    <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

Antes de comenzar

Si aún no ha creado una aplicación de una sola página para hospedar los controles JavaScript de Office 365, eche un vistazo a Crear una aplicación con las API de Office 365 para obtener instrucciones detalladas sobre cómo configurarlo.

Nota Configure su aplicación para permitir la concesión de flujo implícito de OAuth 2.0.

Crear AppChrome en SPA

Crear el control AppChrome

Sintaxis

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

Parámetros

ParámetroTipoDescripción
nombre de la aplicaciónCadenaEl nombre de la aplicación se muestra en la barra de navegación del control AppChrome. El valor predeterminado es "Aplicación de terceros".
contenedorObjetoEl elemento HTML que contiene el control AppChrome.
proveedor de inicio de sesiónObjetoEl objeto que maneja la lógica de inicio de sesión, el cual es requerido por el control AppChrome.
opcionesObjetoOpcional. El objeto que contiene varias opciones compatibles con el control AppChrome.

Valor devuelto

Type: Object
An AppChrome Object

Permisos

Permisos necesarios para configurar en Azure AD.

Nombre del controlNombre de la aplicaciónPermisos de la aplicaciónPermisos delegados
AppChromeAzure ADIniciar sesión y leer el perfil del usuario.

Referencia

opciones
{
    "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>
    } 
}
objeto Proveedor de inicio de sesión

Este objeto debe exponer las siguientes funciones, que serán invocadas por el control 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.
}

Nota: Cuando se usa el tipo de concesión implícita, puede usar proveedor de inicio de sesión ImplicitGrant. Para más información, ver Cómo crear Proveedor de inicio de sesión ImplicitGrant y Office.Controls.Login.js. Cuando se usa el flujo de concesión de código de autorización, el proveedor de inicio de sesión debe ser proporcionado por desarrolladores de terceros.

Cómo crear el Proveedor de inicio de sesión ImplicitGrant
  • Añadir código de Proveedor de inicio de sesión ImplicitGrant
<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>
  • Crear Proveedor de inicio de sesión ImplicitGrant
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);

Selector de personas

Antes de comenzar

Si aún no ha creado una aplicación de una sola página para hospedar los controles JavaScript de Office 365, eche un vistazo a Crear una aplicación con las API de Office 365 para obtener instrucciones detalladas sobre cómo configurarlo.

Nota Configure su aplicación para permitir la concesión de flujo implícito de OAuth 2.0.

Crear Selector de personas en SPA

Crear el control de selector de personas

Sintaxis

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

Parámetros

ParámetroTipoDescripción
contenedorObjetoEl elemento HTML que contiene el control del selector de personas.
contexto de autenticaciónObjetoEl objeto creado por ADAL para acceder a los datos de Office 365.
opcionesObjetoOpcional. El objeto que contiene varias opciones compatibles con Selector de personas.

Valor devuelto

Type: Object

A People Picker Object

Método

Sintaxis

function getAddedPeople()

Valor devuelto

Type: Object

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

Permisos

Permisos necesarios para configurar en Azure AD.

Nombre del controlNombre de la aplicaciónPermisos de la aplicaciónPermisos delegadosComentarios
Control de personasAzure ADIniciar sesión y leer el perfil del usuarioTodos los controles de Personas requieren este permiso.
Selector de personasAzure ADLeer perfiles básicos de todos los usuarios
Tarjeta de personaAzure ADLeer perfiles básicos de todos los usuarios
Tarjeta de personaAzure ADLeer los perfiles completos de todos los usuariosAzure AD requiere un permiso mayor si la aplicación necesita obtener los números de teléfono de los usuarios. admin_consent necesita ser configurado para el parámetro "prompt" en código de autorización, flujo de concesión.

Referencia

opciones
{
    "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
}

Tarjeta de persona

Crear tarjeta de persona en SPA

Crear una tarjeta de Persona Inline

Sintaxis

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

Parámetros

ParámetroTipoDescripción
contenedorObjetoEl elemento HTML que contiene la Tarjeta de persona detallada.
objeto de personaObjetoEl objeto de datos de persona.
eventoCadenaOpcional. El evento para mostrar u ocultar la Tarjeta de persona detallada. El único valor admitido es hacer clic.

Crear una tarjeta de persona detallada

Sintaxis

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

Parámetros

ParámetroTipoDescripción
contenedorObjetoEl elemento HTML que contiene la Tarjeta de persona detallada.
objeto de personaObjetoEl objeto de datos de persona.

Referencia

objeto de persona
    {
       "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
   }

Aplicación de muestra

En este paso, configurará una aplicación de una sola página con todos los controles. Utiliza el control AppChrome para manejar el proceso de inicio de sesión. Después de que un usuario inicia sesión, puede usar Selector de Personas y Tarjeta de Persona para obtener datos.

Nota Debería reemplazar el ********-****-****-****-************ con un ID de cliente válido para su aplicación. Para obtener más información sobre cómo configurarlo, consulte Crear una aplicación con las API de Office 365. Configure su aplicación para permitir el flujo implícito de OAuth 2.0.

Cree un archivo HTML vacío, y luego copie el siguiente código y guarde el archivo. Abra el archivo HTML en un navegador compatible. Inicie sesión con sus credenciales de Office 365 en AppChrome y use el selector de personas para elegir a una persona. La información de esa persona se muestra en formato JSON, así como dentro de una Tarjeta de 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>

Navegadores compatibles

Los siguientes navegadores web admiten los controles de UI de JavaScript de Office 365:

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

Comentarios

Envíenos sus comentarios a Office Developer Platform UserVoice

© 2018 Microsoft