/react-officeuifabric-sample

This sample demonstrates how to populate Office UI Fabric React components with data retrieved from Microsoft Graph.

Primary LanguageJavaScriptMIT LicenseMIT

Microsoft Graph Office UI Fabric React Sample

Table of contents

Introduction

This sample is a simple React app that uses Microsoft Graph data with Office UI Fabric React (preview) components, primarily the PeoplePicker and DetailsList components.

Microsoft Graph Office UI Fabric React Sample screenshot

The sample uses the Microsoft Graph JavaScript Client Library to interact with Microsoft Graph, and HelloJS for authentication with the Azure AD v2.0 endpoint.

Prerequisites

This sample requires the following:

Register the application

  1. Sign into the Application Registration Portal using either a personal or work or school account.

  2. Choose Add an app.

  3. Enter a name for the app, and choose Create application.

    The registration page displays, listing the properties of your app.

  4. Copy the Application Id. This is the unique identifier for your app. You'll use this value to configure your app.

  5. Under Platforms, choose Add Platform.

  6. Choose Web.

  7. Make sure the Allow Implicit Flow check box is selected, and enter http://localhost:3000/ as the Redirect URI.

  8. Choose Save.

Build and run the sample

  1. Clone or download the Microsoft Graph Office UI Fabric React Sample.

  2. Using your favorite IDE, open config.js in the src/helpers directory.

  3. Replace the applicationId placeholder value with the application ID of your registered Azure application.

  4. Open a command prompt in the sample's root directory, and run the following command to install project dependencies.

npm install
  1. After the dependencies are installed, run the following command to start the development server.
npm start

  1. Navigate to http://localhost:3000 in your web browser.

  2. Sign in with your work or school account.

    Note: Although the Azure AD v2.0 endpoint supports signing in with both personal and work or school accounts, this People Picker example uses features that are supported only with work or school accounts (such as the /me/people endpoint).

  3. In the command bar, choose Choose component > People Picker or Choose component > Details List.

    • In the People Picker example, you can filter your people list or search for users in your organization.

    • In the Details List example, you can select items from your list of files, filter items by name, or double-click and item to open it in OneDrive.

Next steps: Try adding more functionality or other components to this sample, or build your own simple app by following the Office UI Fabric React tutorial.

Code of note

Auth

This sample app uses HelloJS for authentication with the Azure AD v2.0 endpoint.

  • App.js. Initializes a custom Azure AD auth network for HelloJS, and provides the login/logout methods.

Important! The app implements a very simple authentication model. It reuses the access token until the user signs out or until it receives a 401 'Access token has expired' error, at which time it redirects to the login method. Production apps should construct a more robust way of handling authentication and validation.

Microsoft Graph interaction

This sample uses the Microsoft Graph JavaScript Client Library (SDK) to interact with Microsoft Graph.

  • GraphSdkHelper. Uses the SDK client to call Microsoft Graph and handle responses.

The client is initialized with an authProvider that gets the current access token to use for each request. The sample works with the User, Person (preview), and DriveItem APIs.

Fabric components and styles

This sample uses several Office UI Fabric React components (preview). With Fabric's flexible development model, you can choose to rely on a component's default behavior or customize it to suit your needs.

  • App.js. Main app page that uses the CommandBar component to navigate examples and to choose to sign in/sign out.

  • PeoplePicker.js. People Picker example that uses the NormalPeoplePicker component to display Persona components. Also uses components such as Button and MessageBar.

The sample's People Picker implementation works as follows:

  • When the PeoplePicker example loads, the sample sends a request to Microsoft Graph for the top 20 people who are relevant to the current user (first retrieving metadata and then retrieving profile photos). User metadata is mapped to Persona objects which are stored in the _peopleList array.

  • When text is entered into the picker, the _onFilterChanged method returns the matched results from the people list, which are then displayed as suggested people.

  • When the Search button is clicked, the _onGetMoreResults method queries Microsoft Graph for the first 20 users whose name starts with the filter text. The results are temporarily added to the people array for use in the _onFilterChanged method.

  • When people are selected or deselected, the _onSelectionChanged method updates a local array of selected people.

  • DetailsList.js. Details List example that uses the DetailsList component with the MarqueeSelection and Selection utilities. Also uses components such as Spinner and TextField.

The sample's Details List implementation works as follows:

  • When the DetailsList example loads, the sample sends a request to Microsoft Graph for the top 100 items in the current user's root drive. The drive item metadata is mapped to list item objects and stored in the _items array and saved to state. If the result set is paged, a null entry is added to the item array to trigger a request for the next page of results.

  • When filter text is entered into the text field, the _onFilterChanged method updates state with the matched results.

  • When list items are selected or deselected, the _getSelectionDetails method is invoked.

The sample also references the Office UI Fabric Core styles in index.html.

Troubleshooting

Issue Resolution
Internal Server Errors for cached image queries in Microsoft Edge If you refresh the browser while using the sample, you may receive HTTP 500 errors (Internal Server Error) for cached profile photo queries. A workaround is to close the sample tab, clear browser cache, and then reopen the sample.
Syntax error in IE The Microsoft Graph JavaScript Client Library uses ES6 promises. Related PR: microsoftgraph/msgraph-sdk-javascript#29

Questions and comments

We'd love to get your feedback about this sample. You can send us your questions and suggestions in the Issues section of this repository.

Your feedback is important to us. Connect with us on Stack Overflow. Tag your questions with [MicrosoftGraph].

Contributing

If you'd like to contribute to this sample, see CONTRIBUTING.md.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Additional resources

Copyright

Copyright (c) 2017 Microsoft. All rights reserved.