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

grant_type=client_credentials&client_id=<Client-ID>@<Tenant-ID>&client_secret=<Client-Secret>=&resource=00000003-0000-0ff1-ce00-000000000000/<tenantdomain>.sharepoint.com@<Tenant-ID>


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

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.