Thursday, 18 July 2019

Microsoft Graph: displaying user & contact images

In this post I'll explain how to get user profile out of Azure AD and render it using a simple React component, if you are not familiar with Microsoft Graph, you can can start getting more familiar with Microsoft Graph using as starting point and maybe use graph explorer to test some of these endpoints.

The main endpoint we are going to use here is me/people which lists the people that is relevant to you. a sample of what this endpoint returned by default is shown below

If we take a quick look at what me/people endpoint returns , it's not only user information  it's a collection of Persons and Groups and within Person includes "OrganizationUser" and Contacts.

It's easy to render any of these properties however, what we need to display is the user image, which is not retrieved using the People endpoint. for each item we have to create another call to the /user/{id}/photo/$value endpoint if it's an "organization user" otherwise we would use /me/contacts/id/photo/$value the response for this is either 404 if there is no image uploaded or it's a ReadableStream

The key is to convert what we have  which would be an object of type ReadableStream to a blob Url and then render it in an HTML image tag

another mechanism is to build a proxy API that stores the image in an online cache and request user-based images it's somehow similar to a mechanism I've used before in this 3 years old post

Sunday, 30 June 2019

Modern Experience: optimizing the performance of your SPFx components

When building custom SharePoint online solution, there is not much you can do to optimise the server performance, your areas of improvement will be around the basic following items:

  1. Reduce content size (size of images, media you add to the SharePoint Pages)
  2. Reduce bundle size (SPFx solutions)
  3. Optimise calls to SharePoint APIs or any external APIs
  4. Network and Infrastructure optimisation
  5. Client device Optimisation
In this post I'll focus on #2, which  is the things you need to worry about when creating custom SPFx component whether it's an application customizer or single webparts.
  • Measure and monitor your bundle size
Before you try to introduce complexity to your work make sure that you have a problem you need to tackle first, over optimisation is a mistake we all have been guilty of. please revert to my previous post about measuring SharePoint online performance here

So, let's say that you have identified that you have a problem, and this problem is potentially due to a bigger bundle size, common symptom for that is a very high JavaScript Evaluation time  the first step is to try to locate which component is causing your bundle size to balloon up which is pretty straight forward process, one way of doing it is to use which gives you a nice graphical representation and information for each component size (raw, minified and compressed)

  • Move common dependencies to be "externals"
If you're using a common component or library indifferent webparts, consider moving this into externals so it won't be packaged for every single webpart JS file

  • Don't just use libraries, simple solution might perform better
For instance , imagine you want to display a spinner, and because you are a good SharePoint Developer, you'd love to use the office-ui-fabric-react controls and import the spinner and use it while your webpart fetches whatever content you're after. sounds like a good idea, think again just importing the Spinner introduce almost 1.6M of Javascript code which can be substituted by a simple load of gif. Don't get me wrong if you want to use the react controls package use it but you need to make sure that you use it for more than just a spinner and I'd rather move them to externals and serve it as a compressed (Gziped) size ~ around 200KB
Add caption
  • Reduce font files to the bare minimum
this one is a very handy one, let's say that you're using font-awesome to display some nice looking icons, including the full font files in your bundle adds more than 900KB of payload to your application and to be honest it's not about hosting fonts as externals or not. it's about do you really need the whole font components or you just need like 4 or 5 icons.

there is a full post on this topic here and it helped me reduce my font files to be in total ~ 19KB instead of 931KB

  • Use another CDN solution that allows compression 
Office 365 public CDN is good but it's not good enough as it doesn't provide compression, you could easily use Azure CDN endpoint and enable compression, you shouldn't pay much as you are not really delivering heavy weight static contents 

After all of these modifications which doesn't really contribute to a lot of refactoring , I've managed to get a 90/100 score for the SharePoint modern site, which was a huge performance boost

Thursday, 9 May 2019

SharePoint Online: Measuring SharePoint Modern Experience Performance

In this post I'll try to share my experience on how to measure performance of SharePoint Online modern experience and most importantly what you should expect and communicate to your client. Specially, a client that is moving form a fully branded customised on-premises intranet to SharePoint Online Modern Experience.

First, you need to identify what is the metrics you will use to assess the intranet performance and for this post I'll try not to get sidetracked and talk about accessibility and other non-functional aspects of your intranet platform.

There are many metrics that could be used but as we are putting a SaaS platform to the test I will ignore any server related performance metrics as we can't optimise server performance by any means,.
Of course you can always check the x-sharepointhealthscore custom header value and contact Microsoft support if you are not happy with your tenant performance, but for this post I'll focus on client things that is mostly affected by your client machine and browser.

There are many tools that you can use to measure the performance of a website, however if you are using Chrome browser (please don't tell me that you are using edge or worse internet explorer , even Microsoft has given up on them). by launching the developer tool you can easily launch an audit tool which allows you to perform a full audit for the current website. The tool is called lighthouse, that why I decided to stick with the metric which google use to score a website performance:

  • Time to first Contentful Paint
  • Time to first Meaningful Paint
  • Time to interactive 
  • Time to CPU Idle
  • Speed Index
  • Estimated Input Latency

That's good , we can easily execute the audit but how can we automate this? the answer is very simple. the good lads at google has built us a CLI for lighthouse than can be installed using npm , please check the GoogleChrome lighthouse repo for more information on how to install and run it.

In short you will be able to run the following command line which only execute a performance audit

As you can see the script is very simple , I start with getting the URLs of the SharePoint Online pages I want to test from a CSV file which also have the required numbers of runs.

Then I use the lighthouse command flags to ensure that there is not throttling or emulation (--disable-device-emulation --throttling-method=provided) also I'm exporting the audit run output as JSON file in a specific output folder

I also passes the --disable-storage-reset switch to ensure that I can use the browser cache , another flag to mention is --only-categories=performance which only execute the performance related audits

When I started running the report I get an amazing results, however when I looked at the trace using the lighthouse reoprt viewer  I found out that I'm redirected to login page which doesn't have much hence the amazing 100/100 score.

I looked over ways how to pass my login credentials but I found an easy way which is running chrome in debug mode

this will launch a new chrome window , I'll navigate to the SharePoint Online URL and login using my user credentials so this browser session will have my user logged in already. Afterwards, I need to pass the resulted port number when to the lighthouse cli.

It's kinda lazy solution but it worked OK for me but it is definitely better to run chrome headless.

The results

After running the PowerShell script I have a number of JSON files and I want to get the average value for the above metrics, do I need to write another PowerShell script. hmm  I don't think so, I'm a very lazy person. and I have a mongo db instance installed on my laptop. I imported the files to a collection then run the following script to get the average results

To be honest the results for an empty OOTB team Google gave the OOTB team site a performance score of 86/100 which is a cool score but as you might see, it's all about JS execution time and main thread work.

If your client is after an intranet solution with speed index is less than 3 seconds, You might need to consider building your intranet as a loosely-coupled intranet which is a concept that we have discussed here more than 3 years ago, you can check more details in the following post:

If you are happy with the current performance and want to customise SharePoint Online and start building SPFx extensions and webparts. You need to be very careful and very cautious of what you use as every bit of JavaScript will matter and at some point, you will have to tell your client yes I can do this put it will slow your site down.

In the next post I'll list some techniques that helped me from lifting up a 50/100 scored custom SharePoint Online intranet to be comparable as the OOTB  with a score of 86/100.

Till next time

Sunday, 17 March 2019

SPFx: Modal Dialog, show classic SharePoint forms

Remember Model Dialog, that's surely brings back some memories , it was easy back in the days a simple way to instantiate a new SP.UI.ModalDialog  with the appropriate options and then show the dialog and that's it!

Of course we had to make sure that  we append the isDlg=true to the url querystring when showing a SharePoint form.

Also we used to make sure that header and footer are adhering to the branding guideline so when we customize the heck out of the SharePoint master page (prior to SharePoint 2013) we didn't get the funny header and footer ruining our Dialog box.

The other bit which was happening for us is when the SharePoint form (whether it's item display or edit) when we press cancel or OK buttons, the Modal dialog disappear magically.

So let's take SPFx, how can we replicate the same functionality with the simplest possible approach

BaseDialog & DialogContent to the rescure

BaseDialog is an abstract class wrapped and delivered to us as part of @microsoft/sp-dialog  package, by simply extending this dialog class and implement render method you can construct the content of your dialog (there are heaps of other method to extend and customise the behavior of the dialog but this post is about the simplest Iframe dialog ever)

In our case,  let's implement a new react component called IframeContent , which acts as a container for our iframe. This simple react component contains a single root DialogContent component which is imported from office-ui-fabric-react package. The IframeContent component has a single child element which is the iframe HTML tag.

The second component is even simpler , which is the Dialog itself which  implements the BaseDialog the most significant bit of code is the render method which basically does nothing apart from having a single instance of the previously created dialog content.

So far so good, but what if we need to replicate the magic we used to have (hiding the dialog upon clicking ok or cancel of an OTB classic SharePoint form).

The answer is simply using the same old mechanism , the old forms send an event to the parent window called "CloseDialog" so what we need to do is simple, let our React component listen to the event and call the close method.

Full code of the IframeDialog component is below
A more comprehensive implementation with different building blocks can be found at the following github repo

Monday, 11 February 2019

SharePoint Online: What really happens when you click unfollow/follow site buttons

So, I'm back for the first post this year after quite a break, I can't believe it's 2019 already and Dubai 2020 Expo is only one year away. I don't live in Dubai anymore but I remember thinking of 2020 as the far future.
without further ado , let deep dive in this blog post topic:

What happens really when you unstar or star a SharePoint online site on the SharePoint home page . I presumed - naive me- that endpoint call to follow APIs is triggered, but as my naivety has been proven many times before, specially when I thought that modern news webpart using Search Analytics to display view count (turns out to get it from an endpoint  https://{your-region}, read more about this here

Similarly, follow and unfollow website use similar endpoint.

Firstly, let's see when we unstar an already followed site what happened. A POST request will be fired as below

This request has the usual header information in addition to that a Bearer token which looks like the below after decoding the base64 and remove the signing bits at the end.

The function is used to update the followed site status is called sendSiteFollowingUpdateRequest, and takes three arguments, the first one is an object contains whether the site is followed or not, and the site card item information.

Next, let's try to understand how the aforementioned bearer token has been obtained, by looking at the session storage I can locate that the same token is saved as "ms-oil-datasource-SpHomeApiDataSource" in the session storage as below:

by going through the code I can see that it has been obtained by a simple POST request to the endpoint _api/SP.OAuth.Token/Acquire with the proper digest value.

maybe one day we will have full documentation for the webservices and what kind of first party functionality is been exposed there.

these finding is only accurate at the time of the writing of this blog as these are not publicly available versioned APIs, use them at your own discretion and preferably not outside of a POV.


Friday, 14 December 2018

It's a wrap: Office Development Bootcamp 2018

For the second year in a row I had the pleasure to organise Office Development bootcamp along with my good fellow MVPs Ashish Trivedi & John Liu. This year was a bit special for me as we didn't only deliver the usual three bootcamps we had last year (Sydney, Melbourne and Auckland) but we have added three additional cities to the mix:
  • Brisbane: Organised by my fellow MVP @ChrisGecks 
  • Hong Kong: my first attempt to remotely organise an event and It was awesome turn out of 66 people , great job by Microsoft HK
  • Kuala Lumpur: second attempt to organise something remotely and just very close to the perfection of HK event
I personally can't wait for next year's event and potentially add at least three more cities.

Sunday, 11 November 2018

Yo Teams: Running local https server

I've been using Teams Yeoman generator for quite a long time , also I've one contribution to this awesome opensource project.
However, I've always wondered why it's running on local http while the manifest is requiring the tabs endpoint to be an https endpoint, so If you are building a Microsoft Teams tab, you won't be able to run it locally without enabling https to your local server.
The method I used to get around this is using ngrok and use the https endpoint, but deep inside I didn't want to expose my local tab code to run externally, maybe someone out there is trying out all the possible ~4.2 billion possible sub-domains 16^8 (nah just kidding). I think I was just determined to run tabs locally using https server.

So I've updated my fork with the latest updates since my last contribution (almost a year ago), then did the following steps to make the generator creates https local server
  1. I've create new local branch and called it https (very creative name !)
  2. I've noticed I need to generate certificate and private key using openssl command (you can either install openssl.exe win 32/64 binary or run openssl through Ubuntu on windows 10  if you have a windows machine
  3. I've placed the two files in a cert folder under the main app template which is common across all Yo Teams artefacts
  4. I've used a webpack plugin "copy-webpack-plugin" to allow me to copy the cert folder
  5. To make sure that webpack will spit out my two files I've added the following line to the webpack server entry under plugins, don't forget to install copy-webpack-plugin package 

  6. Now to the fun and easy part, which is changing the server.ts class, first change import * as http from http to "https" and then replace the server creation with the following lines
  7. to run this version of the generator , run npm link
  8. now link your folder with the new generator, run it and when you type gulp serve, an https server will be created and you can use local server to run