Friday, 24 November 2017

Graph API : Get all the Office 365 Groups Owned by a user

There is a Graph API endpoint to get all the Office 365 Groups a user is Member of. The filter is used to get only the Office 365 Groups.

I wanted to retrieve all the Groups that a user owns, however there is no "ownerOf" endpoint. The endpoint ownedObjects can be used to retrieve this data. 

For the current user :

For a specific user : 

However this endpoint returns all the directory objects the user is owner of.  When I tried to $filter on this endpoint, it did not work ! Through the Graph explorer it appears that at the time of writing this, $filter to this endpoint is not currently supported.  So you may just have to retrieve all the data that is returned and then filter on the "groupTypes" property of the group object in your application code.

Thursday, 23 November 2017

Custom action term set navigation for SharePoint reusing the SPFx extension sample

There is a great SharePoint Framework extensions sample for navigation using the term store on GitHub . However this can only be used on the Modern pages. I tried to re-use the code of this component to build a custom action that can be used on the classic pages to provide a similar functionality.

Here is the custom action code on GitHub

  • In this, the SPFx specific code is replaced with relevant code that would run on classic pages. The extensions sample uses SPHttpClient and the Context object of SPFx. This has been replaced to use Axios NPM module to make HTTP calls. (SPTermStoreService.ts file changed)
  • The TenantGlobalNavBarApplicationCustomizer.ts has been changed to load the navigation bar when the SharePoint page loads. The SPFx extensions specific code is removed 
  • The modern pages already have react, so the SPFx components when bundled do not include react and react-dom. However, this custom action bundles react and react-dom as well in the final bundle. So there is a custom gulpfile.js with this project that uses Microsoft/gulp-core-build to compile the Typescript and SASS files 
  • The final bundle is generate using webpack through a gulp task.

More details in the GitHub documentation

Monday, 30 October 2017

Work with Multi-value lookup fields in Microsoft Flow and SharePoint - Part 2

Part I of this post explains a couple of limitations of working with Microsoft Flow and SharePoint Multi-value lookup field.

Work with Multi-value lookup fields in Microsoft flow and SharePoint - Part 2

To overcome the challenge I decided to use SharePoint REST API to retrieve the field values. As you may already know, flow provides HTTP Trigger action which we can use to call the SharePoint REST API. The idea is to get an access token and retrieve the values through this HTTP trigger action. There are two great posts that helped me get an Access token, SharePoint scribblings and Shantha Kumar's blog

To start with, register an app in your SharePoint site through the "_layouts/15/AppRegNew.aspx" page. Provide the appropriate permissions so that it can access the multi-value lookup field data.

You'll have the client ID and client secret of the app. Also find out the TenantID of the tenant you are working on.

We create a new flow which is triggered when a new Item is created. Initialize the variables TenantID, ClientID, ClientSecret and a placeholder variable for AccessToken.

Next, add a HTTP trigger action, to get the access token

The body of this request is of the format


Run the flow once till this step and see the history of the execution. Copy the body of the response. We will need it in the next steps.

Now we return to our flow and add a parse JSON action. Provide the "Content" as the body of the response from the previous HTTP trigger action. Use the body value copied in the previous step and paste it in the "Use sample payload to generate schema". This provides parse JSON action a sample format of the JSON that must be parsed.

Once this step executes, we are ready to use the access token. Next, use another HTTP trigger action to call SharePoint REST endpoint (here I have used a hard coded item ID) and retrieve the multi-value lookup field values. Along with the Title, you may also want to retrieve the ID of the looks. That might help you query other lists where these values may have been used.

The results show the lookup values that were selected for the item.

Now, we can then use these values as we would like to

Work with Multi-value lookup fields in Microsoft Flow and SharePoint - Part 1

I was recently working on a requirement to implement Microsoft Flow on a list that had a multi-value lookup field in it. The requirement was to fire a Flow when an item is created in the list and run a loop for each of the value selected in the multi-value lookup field.

At the time of writing this article, multi-value look-up fields are not supported in Microsoft Flow. This means that I could not straight away use the values from this multi-value look-up field and apply a loop.

If you would like to jump to how we can retrive the multi-value lookup column in Flow, here is the second part of the post

Work with Multi-value lookup fields in Microsoft flow and SharePoint - Part 2

The setup :

For this post, I am using a very simple setup, a "LookupRefList" with some 'Colours'  in it and another list "LookupUsedList" which has two fields which lookup data from "LookupRefList"

1) Colour : Single value lookup (just to show the difference in Flow values)
2) Colours : Multi-value lookup

Flow with a single-value lookup field :

We can retrieve values from a single value lookup straight away

Flow setup :

Result :

Multi Value Lookup field

When we to fetch the multi-value column in Microsoft flow, the flow runs successfully, however, when you try to see the execution log, you see an error

Click to see the log

We cannot straight away use the multi-value look-up  in a apply to each loop.

In the next part of the post, we retrieve multi-value lookup field values.

Work with Multi-value lookup fields in Microsoft flow and SharePoint - Part 2

Tuesday, 10 October 2017

Re-Use your Intranet portal mega menu using SharePoint framework extensions

SharePoint Framework extensions is a great new way to customize modern SharePoint sites. The "Application Customizer" SPFx extension provides a way to customize the look and feel of certain sections of moder site such as header and footer. More details here. This gives us the opportunity to develop custom mega menu navigation and place it in the site header of modern sites .

Consider that you have a Communication Site in your tenant (for HR/Admin news etc) which is linked through the mega menu navigation of your Company's Intranet portal. Wouldn't it be great if a user navigating to this communication site was able to see the same mega menu as on the Intranet portal ? I recently implemented a solution that uses SPFx Extension application customizer to do exactly this.
  • For a customer that I was working for, the mega menu links for their Intranet portal site were stored in a custom SharePoint list.
  • A DIV element placed in their custom Master Page acted as a container for the mega menu. JavaScript code retrieved the navigation links (using REST API) from the SP list and rendered the links inside this DIV through JQuery and CSS.
  • The JS and CSS files were stored in the Style library of the portal site collection (all the users having at least read access to this library).

Reusing this in Modern sites ?

<Click on the image to enlarge>

We can re-use all the JS, JQuery, CSS files to render navigation on modern site without having to replicate these files. This can be done as :

1) Reference the JS and CSS files in the SPFx extension. The links will point to the intranet portal site's style library Here is very nice article from Chris O'Brien on how to achieve this.

2) Render the container DIV in SPFx extension through a React Element which can then be used by JQuery (or any javascript code) to render the navigation links.

Since we are using the same JS and CSS files hosted in the intranet portal site, appropriate changes will have to be made to your JavaScript code if it uses any local site's information. For instance, if it uses "_spPageContextInfo" variable to get the navigation links using REST API, the code will have to be changed to always point to your intranet portal site collection.

Implementation :

Start off by creating a Application customizer SPFx extension using Yeoman generator. Make sure you select "Do you want to allow tenant admin the choice of being able to deploy....." to YES in the yeoman generator. This will allow you to deploy the extension tenant-wide and add the navigation to the modern sites across your tenant without feature activation (Add it as a custom action).

Once the project is created, modify the code of your Application customizer typescript file to add CSS and JS references and also to render a REACT element.

Here is the code for the onInit() method of the SPFx extension. It renders a REACT element.

Create a React component in your code

Deploy the SPFx extension to your tenant's App catalog. Once it is deployed, it is globally available. You can now add the SPFx extension to a communication site easily using PnP PowerShell

ClientSideComponentId  is the ID specified in the .manifest.json file of your SPFx extension.

The exact same navigation used in your intranet portal appears on a communication site.