Demo - Using Office 365 Pickers

In this demo, you will extend an ASP.NET Core application to use pickers provided by Office 365 services.

Register an application in Azure AD

To enable an application to call the Microsoft Graph, an application registration is required. This lab uses the Azure Active Directory v2.0 endpoint.

Open a browser to the url https://apps.dev.microsoft.com
Log in with a Work or School account.
Select Add an app
Complete the Register your application section, entering an Application name. Clear the checkbox for Guided Setup. Select Create
On the registration page, in the Application Secrets section, select Generate New Password. Copy the generated password for future use.
On the registration page, in the Platforms section, select Add Platform.
In the Add Platform dialog, select Web.
Enter a Redirect URL to the callback page file. For this lab, use the value https://localhost:44396/OneDriveFilePickerCallback.html
Select the Add URL button.
Enter a Redirect URL for the implicit flow callback. For this lab, use the value https://localhost:44396/signin-oidc
Select the Add URL button again.
Enter a Redirect URL for the admin consent callback. For this lab, use the value https://localhost:44396/Account/AADTenantConnected
Select Save.
Make note of the Application Id. This value is used in the authentication / token code.
Scroll down to the Microsoft Graph Permissions section.
Next to Delegated Permissions, select the Add button.
In the Select Permission dialog, scroll down and select the following Scopes:
1. Directory.Read.All
2. email
3. Group.Read.All
4. offline_access
5. openid
6. profile
Select OK.
Select Save.

Update application configuration

Open the starter application. The started application is a Visual Studio solution that can be found at LabFiles\StarterProject\GraphUI.sln.
Open the appSettings.json file.

Update the following properties, specifying the values from the app registration process.

"Domain": "[yourdomain.onmicrosoft.com]",
"TenantId": "[your-tenant-id]",
"ClientId": "[your-client-id]",
"ClientSecret": "[your-client-secret]",

Provide administrative consent to application

Press F5 to run the application.
When prompted, log in with your Work or School account and grant consent to the application.
The application will load the Permission Required page. Reading Groups from the tenant requires administrative consent, and must be performed via a specific endpoint. Select the Connect your tenant link.
Log in with an account that has administrative privileges in the tenant.
On the administrative consent dialog, select Accept.
The app will then display the Home page.
Stop debugging

Add the OneDrive File Picker

OneDrive provides File pickers for Android and JavaScript. This lab uses the JavaScript version. Additional information is available on the reference page.

The File picker requires a control for the user to invoke the picker, and a callback page to receive the requested information from OneDrive. Create the callback page by performing these steps:

In Solution Explorer, right-select on the wwwroot folder and choose Add > New Item...
Select the HTML Page template. Name file OneDriveFilePickerCallback.html

Replace the contents of the file the following statements:

<!DOCTYPE html>
<html lang="en">
  <script type="text/javascript"  src="https://js.live.net/v7.2/OneDrive.js"></script>
</html>

Save and close the file.
Open the file Views\Picker\Index.cshtml
Notice that line 12 contains a button with a JavaScript handler for the select event.
At the bottom of the page, approx line 33, is a Razor section named scripts. Add the following tag inside the scripts section to load the File picker control.
```
<script type="text/javascript" src="https://js.live.net/v7.2/OneDrive.js"></script>
```

Add the following code after the OneDrive.js script tag. (The code is available in the LabFiles\Pickers\OneDriveFilePicker.js file):

<script type="text/javascript">
  function launchOneDrivePicker() {
    var ClientID = "@Options.Value.ClientId";

    var odOptions = {
      clientId: ClientID,
      action: "query",
      multiSelect: false,
      advanced: {
        queryParameters: "select=id,name,size,file,folder,photo,@@microsoft.graph.downloadUrl",
        redirectUri: '@Options.Value.BaseUrl/OneDriveFilePickerCallback.html'
      },
      success: function (files) {
        var data = files;
        var fileName = data.value[0]["name"];
        var filePath = data.value[0]["@@microsoft.graph.downloadUrl"];

        document.getElementById('selectedFileName').innerHTML = '<strong>' + fileName + '</strong>';
        document.getElementById('selectedFileUrl').innerText = filePath.substr(0, filePath.indexOf('tempauth') + 15) + '...';
      },
      cancel: function () {
        /* cancel handler */
      },
      error: function (e) {
        /* error handler */
        alert(e);
      }
    };
    OneDrive.open(odOptions);
  }
</script>

Run the application.
Select on the Pickers link in the left-side navigation.
Select the Select from OneDrive button.
The File picker has a set of permissions that it requires. The app registration performed in this lab does not include those permissions, so you will need to log in and grant consent to your OneDrive for Business library.
After consenting, the File picker renders in dialog window.
Select a file and select Open.
The File picker will close the dialog and call the success callback, passing the requested information.

Add the Office UI Fabric People Picker

Office UI Fabric provides a People Picker component written in React. For detailed information about the components, refer to the Office UI Fabric documentation. The starter project in the lab is pre-configured to use React, following the principles of the create-react-app utility. In the lab, you will extend the application to use the sample people picker from Office UI Fabric.

In Solution Explorer, right-select on the Components folder and choose Add > New Item...
Select the TypeScript JSX File template. Name file PeoplePickerExampleData.tsx.
Replace the contents of the template with the code from the file LabFiles\Pickers\PeoplePickerExampleData.tsx.
In Solution Explorer, right-select on the Components folder and choose Add > New Item...
Select the TypeScript JSX File template. Name file PeoplePicker.tsx.
Replace the contents of the template with the code from the file LabFiles\Pickers\PeoplePicker.tsx.
Open the file Views\Picker\Index.cshtml
Notice that line 25 contains a div with the id react-peoplePicker. This is the location in the page in which the control will be rendered.
Inside the scripts section, add the following line right before the </script> tag:
```
App.RenderPeoplePicker();
```
The RenderPeoplePicker method is defined in the boot.tsx file. Add the following code to that method:
```
ReactDOM.render(
  <PeoplePicker></PeoplePicker>,
  document.getElementById('react-peoplePicker')
);
```
Note: The webpack configuration specifies that the TypeScript in the project is injected into pages as a library object named App.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

Demo - Using Office 365 Pickers

Register an application in Azure AD

Update application configuration

Provide administrative consent to application

Add the OneDrive File Picker

Add the Office UI Fabric People Picker

Files

README.md

Latest commit

History

README.md

File metadata and controls

Demo - Using Office 365 Pickers

Register an application in Azure AD

Update application configuration

Provide administrative consent to application

Add the OneDrive File Picker

Add the Office UI Fabric People Picker