98 lines
3.2 KiB
Markdown
98 lines
3.2 KiB
Markdown
---
|
|
page_type: sample
|
|
products:
|
|
- office-sp
|
|
- ms-graph
|
|
languages:
|
|
- javascript
|
|
- typescript
|
|
extensions:
|
|
contentType: samples
|
|
technologies:
|
|
- SharePoint Framework
|
|
- Microsoft Graph
|
|
services:
|
|
- SharePoint
|
|
platforms:
|
|
- AngularJS
|
|
createdDate: 2/16/2017 12:00:00 AM
|
|
---
|
|
## Elemento web de Microsoft Graph de angular creado con Angular v1.x
|
|
|
|
## Resumen
|
|
Este es un elemento web de Microsoft Graph de ejemplo que se conecta a Microsoft Graph y extrae información de SharePoint del espacio empresarial.
|
|
Primero, extraerá la colección de sitios raíz (lo que actualmente es una limitación de Microsoft Graph),
|
|
y luego mostrará todas las listas asociadas con el sitio seguidos de todos los elementos de la lista.
|
|
|
|
![Primera pantalla](./assets/Connect.png)
|
|
|
|
![Sesión iniciada](./assets/Connected.png)
|
|
|
|
![Colección de sitios raíz](./assets/Root.png)
|
|
|
|
![Listas en el sitio raíz](./assets/Lists.png)
|
|
|
|
![Elementos de la lista de anuncios](./assets/Items.png)
|
|
|
|
|
|
> Nota: Actualmente, solo tengo desarrollados modelos para la lista de anuncios. Cualquier otra lista generará errores.
|
|
|
|
## Version de SharePoint Framework utilizada
|
|
![drop](https://img.shields.io/badge/drop-ga-green.svg)
|
|
|
|
## Se aplica a
|
|
|
|
* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
|
* [Espacio empresarial de desarrollador de Office 365](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
|
|
|
## Solución
|
|
|
|
Solución | Autor(es)
|
|
--------|---------
|
|
angular-msgraph|David Hartman ([Slalom](https://slalom.com))
|
|
|
|
## Historial de versiones
|
|
|
|
Versión | Fecha |Comentarios
|
|
-------|----|--------
|
|
2.0|19 de abril de 2017 | Versión GA
|
|
1.0| 6 de febrero de 2017| Lanzamiento inicial
|
|
|
|
## Aviso de declinación de responsabilidades
|
|
**ESTE CÓDIGO SE PROPORCIONA*TAL CUAL* SIN GARANTÍA DE NINGÚN TIPO, YA SEA EXPRESA O IMPLÍCITA, INCLUYENDO CUALQUIER GARANTÍA IMPLÍCITA DE IDONEIDAD PARA UN PROPÓSITO PARTICULAR, COMERCIABILIDAD O NO INFRACCIÓN.**
|
|
|
|
---
|
|
|
|
## Configuración perfecta
|
|
- Clone este repositorio
|
|
- En la línea de comandos, ejecute:
|
|
- `npm i typings -g`
|
|
- `npm i`
|
|
- `gulp serve
|
|
|
|
## Registrar la aplicación
|
|
|
|
1. Inicie sesión en el [Portal de registro de aplicaciones](https://apps.dev.microsoft.com/) mediante su cuenta personal, profesional o educativa.
|
|
|
|
2. Elija **Agregar una aplicación**.
|
|
|
|
3. Escriba un nombre para la aplicación y elija **Crear aplicación**.
|
|
|
|
Se muestra la página de registro, indicando las propiedades de la aplicación.
|
|
|
|
4. Copie el Id. de aplicación. Este es el identificador único de la aplicación.
|
|
|
|
5. En **Plataformas**, elija **Agregar plataforma**.
|
|
|
|
6. Elija **Web**.
|
|
|
|
7. Asegúrese de que la casilla **Permitir flujo implícito** está seleccionada y escriba *http://{Ubicación del área de trabajo SP}* como URI de redireccionamiento.
|
|
|
|
8. Elija **Guardar**.
|
|
|
|
## Configurar la aplicación
|
|
1. Reemplace los valores de los marcadores de posición **aad** y **redirect_uri** con el Id.
|
|
de la aplicación y la dirección URL de redireccionamiento de la aplicación de Azure registrada en el archivo GraphHelper.ts en src -> angularMsGraph -> GraphHelper.ts
|
|
|
|
<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/samples/angular-msgraph" />
|