Monthly Archives: February 2018

How to create a Microsoft Graph SharePoint Web Part to show recent OneDrive files

How exciting, SharePoint web parts can now talk to other parts of Office 365 rather than just SharePoint using the Microsoft Graph and third party APIs!

With the release of the SharePoint Framework version 1.4.1, we now have preview support of the Microsoft Graph API.

In this example, I’m going to create a SharePoint Framework web part to show my latest OneDrive files.

SPFx Microsoft Graph Web Part

I’m going to assume that you already know how to create SharePoint framework web parts, if you don’t, take a look at my previous blog posts:

I will begin with a new SharePoint framework project (no JavaScript framework) using the latest version 1.4.1 (see getting started).

In the new project, open the web part typescript file (src\webparts\webpartname\webpartname.ts).

Import the MSGraphClient using the following code:

import { MSGraphClient } from '@microsoft/sp-client-preview';

Inside the render function in our default class, we are going to define a variable for the service scope.

const client: MSGraphClient = this.context.serviceScope.consume(MSGraphClient.serviceKey);

We can make it easier to catch errors when coding against the MS Graph by installing the typings. You can do this from the terminal in VSCode by running:

npm install @microsoft/microsoft-graph-types –save-dev

This then needs to be imported in the web part typescript file.

import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

Under the line defining the service scope, add the following code to get data from the graph API

    client
      .api('me/drive/recent')
      .get((error, files: MicrosoftGraph.DriveItem, rawResponse: any) => {
        // handle the response
        for (var _i = 0; _i < rawResponse.body.value.length; _i++) {
          htmlcode += `<a href="${rawResponse.body.value[_i].webUrl}">${rawResponse.body.value[_i].name}</a></br>`;

        }
      this.domElement.innerHTML = `
      <div class="${ styles.myOneDriveFiles }">
        ${htmlcode}
      </div>`;
    });

Configuring API permission requests

In the package-solution json file (in the config folder), we need to define which Graph permissions we will be using.
Under “skipFeatureDeployment”, add the following JSON.

"webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "Files.Read"
      }
    ]

To determine the permission levels and which API to use, I used the following references:

Graph Explorer
Permission Scopes

So we can test this, we need to allow access for this API in the Office 365 admin centre. To do this we are going to build and package the solution and then add it to the app catalog.

To package the solution, run the following commands from the VSCode terminal:

gulp bundle –ship

gulp package-solution –ship

This will create a SPPKG file in the sharepoint\solution folder. This is the file you will need to drag and drop into the tenant App Catalog. Please note that the next steps can only be performed on a first release tenant (not just a first release user).

You will see the additional highlighted message below.

SPFx Microsoft Graph Web Part

Open the SharePoint Admin Centre of your tenant, and select to “Try the new SharePoint admin center”, in the upper right corner of the screen.

SPFx Microsoft Graph Web Part

Select “API management”

SPFx Microsoft Graph Web Part

There seemed to be a bit of a bug on this page, I had to refresh a few times before it appeared and it appeared twice (maybe because i tried uploading to the app catalog twice).

Select the request and press Approve

SPFx Microsoft Graph Web Part

Add the web part to a modern page. If you have a pop-up blocker enabled in chrome, you will be asked to disable this.

SPFx Microsoft Graph Web Part

After reloading the page, wow we see Microsoft Graph data inside a SharePoint web part!!

SPFx Microsoft Graph Web Part

You can download the source code from my GitHub page

Creating a quiz using Microsoft Forms in OneNote

Microsoft Forms are a great way to quickly gather survey results or produce quizzes. It could be testing employees on health and safety in OneNote or it could be setting students a topic quiz in Class Notebook.

In this post, I’m going to go through the steps on how to add a quiz to OneNote.

First, create a new page and call it “Quiz”.

Class Notebook

Go to the insert tab in the ribbon and select “Forms”.

Microsoft Forms

Here you will see a list of any forms and quizzes that you previously created in addition to the new options.

List of forms

Click “New Quiz”.

Microsoft Forms will open in a new tab, give the quiz a title and description.

Click “Add question” and select “Choice”.

Enter a question and all the options, you can press “Add option” to add more answer options.

Next to each answer option, you can provide some feedback for users who select this option using the speech bubble icon (see highlighted below).

Mark the correct answer by selecting the tick icon (see highlighted below).

At the bottom of the question, you can assign points for the correct answer, allow multiple answers and make it a required question.

By pressing the menu (…), you can bring up more options such as shuffling the answers or writing math equations.

You can add more questions by clicking “Add question”. The form will save automatically as you edit it (no save button).

When you have finished creating your quiz, switch the browser tab back to the OneNote file, you will see that the quiz has now appeared in the “My forms” list.

Press the “Insert” button.

Our quiz is now embedded on the page!

When users complete the quiz, they will see their points after pressing submit (with feedback on each question).

The author of the quiz can go back into “Microsoft Forms” via the app launcher (see highlighted below).

They can then see a detailed breakdown of the results with the option to export to Excel.

Microsoft Forms can also be added to SharePoint pages, so you can enhance your intranet with surveys and quizzes!

Microsoft Forms is a great tool in the Office 365 package. By using this tool in your organisation, you could really improve engagement with users.

At Cloud Design Box, our solutions help schools and companies get the best out of SharePoint, Teams and OneNote.

More information on our education and business solutions can be found on our website.

Cloud Design Box Class Dashboard