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

Sunday, 14 October 2018

Yo Teams: Azure App services Deployment error

It has been a while since I played around with generator-teams (Yeoman generator for Microsoft Teams), it was almost 6 months ago since I demoed the capabilities of this amazing open source project. This time I've created a quick project which includes a simple tab, my intention was to run it locally and also publish it to azure app services.

I was very straight forward process publishing the Teams tab to Azure app service using local Git repository and push my master branch to it. However, this time it wasn't the easy ride I expected.

I won't go through the abvious steps which is setting up your environment for nodejs development and installing the latest Yo Teams package (2.5 at the time of writing this post)
long story short, I created a new teams app with only a simple tab and created a new azure app service and added local git as a deployment option so I can push my code to it and achieve a very simple deployment to azure app services.

After the awesome generator created my artefacts, I've run local npm install and gulp build and it was rocking, everything was working fine locally. I initialised my git rep, added azure git as a remote (I called it azure very creative !), then I've pushed my master branch to azure. I was waiting for the magic successful deployment message but instead I get the following error

apparently by default the node and npm version used by app services are v0.10.40 and v1.4.28 which are relatively old and caused some errors in npm.

Using App settings you can set the nodejs version for the app service instance but I couldn't find a switch for npm which was the one actually causing the error above, so I decided to use another way to specify the node & npm versions by adding them to package.json file as below:

made a minor update and pushed the new version to azure app service local git repo, and yet I stumble upon another error

I created a new folder called dist under wwwroot so the script should be able to create the issnode.yml file , I thought that's it however I find another error this time in the gulpfile.js syntax.

so the reason this time is node version is used to run the scripts is the same old version so I had to add a new line to deploy.cmd just before the build command line.
and finally, my deployment is successful

and what supposed to be a one minute job turns out to be half an hour job.

Tuesday, 21 August 2018

SPFx: How OTB News Webpart displays ViewCount

In this blog I'll explain how the out of the box news webpart displays the view count for each promoted site page aka "News Pages". At the first glance when a colleague asked me I answered naively by
"Oh Check ViewCountLifeTime managed property" thinking -silly me- that modern pages webpart will somehow uses the same technique that old publishing pages used to embrace, which has viewCountLifeTime, viewsLastNDays  managed properties which used to give us a lot of options to choose precisely what we want to display.

Back then we weren't worried about where SharePoint stores these values as it will all be enriched via search pipeline, which was easy, awesome and just works.

When my colleague tried out the search with some of the classical ViewCount managed properties, they got nothing which left me scratching my head and honestly questioning my sanity. I was a bit away from hands-on role and by a bit I mean it was almost more than four years since I've been rolling my sleeve and coding stuff as I'm currently doing mainly high-level activities. With no further do I decided to look under the hood of of OTB news webpart

First thing I noticed after viewing the bundled code using pretty format feature in google chrome in the file sp-news-webpart.bundle_en-us_someguid.js when the component is about to mount a function called "updateRealNewsItems" is called, this method takes a set of items (which is the news items with the view count ) as a parameter.

With a bit of more digging by searching the "viewCounts" I manage to find an expression that verified whether the view count is needed or not which depends on the display template that you choose.  If the view count is needed firstly the code tries to update view count dataprovider information then calls refresh data.

The code continues with preparing a request , getting the view count , cache it so next time it will try to get it from the cache then add the view count to the news items which is returned by search.

That kept me wondering is it that hard to enable search pipeline to update the ViewsCount to accommodate the Site Page content so we can rely on viewCount managed property. I really have no answer to that maybe it is. Additionally I believe that if modern webparts are available on GitHub it will make SharePoint developer life easier.

Just my $0.02

Tuesday, 31 July 2018

SPFx: A Facebook Feed webpart with custom UI

So , this post might look trivial or pretty straight forward. However, it's not about how complex it could be from SPFx point of view I hate to break it to you guys It's really simple.

If you would like to aggregate social posts from various platforms in one single view using your own UI elements and design this post could be useful. Otherwise, it will be a complete waste of time :). So yes you'd better embed your Facebook feed via an iframe if you don't want to customize the UI or aggregate multiple social posts in one view.

Before we start you need to have the following artefacts:
  • A  Facebook App (go to ) and follow simple steps to have your app created
  • A Facebook page for testing purpose / or use an existing page that you have access to.

To play around with Facebook graph API and take a look of how the feed JSON object is structured; you can navigate to graph explorer tool at and try it out. The endpoint we are after is very simple which is a GET request to v3.1/{yourPageID}/feed

When you start playing around with the tool you will find out that there are two main parameters:
  1. Limit (which limits the number of posts) it will be added by default for you with value 10
  2. Fields (which dictates which fields you want to retrieve) if you didn't supply the fields you will have the default results set returned which is as below:
"data": [
      "created_time": "2018-07-23T04:49:18+0000",
      "message": "Sydney Global Office 365 Developer Bootcamp 2018",

  1. You will need the access token which is a bearer token passed part of the header of the request, for the purpose of this application you might choose one of two options:
    1. Use an application token --> this will require review of your app , see below what you get if you tried your app token
  "error": {
    "message": "(#10) To use 'Page Public Content Access', your use of this endpoint must be reviewed and approved by Facebook. To submit this 'Page Public Content Access' feature for review please read our documentation on reviewable features:",
    "type": "OAuthException",
    "code": 10,
    "fbtrace_id": "

  1. Use a page access token --> which will need you as an admin of the page to grant the app access to the page posts

The drawback of this option is that you will have a very short-lived access token and Facebook is no longer provide token that is never expires (offline access token since 2012 yup I'm referencing something that is deprecated for more than 6 years ago).

But there is still hope you can somehow extend your access token using the method documented here which will allow you to convert your short lived token (about 2 hours) into a long lived token which expires in 60 days

From SharePoint perspective we are going to create a simple webpart that has three properties
  • Limit
  • Page Id
  • Access Token
The webpart is very simple and straight forward, I didn't try to include any fancy styles and it's a single react component called FbPostList which is consists of list of FbPost components

The main issue here is , Do I want the site owner to update the access token every 60 days, it's sounds very irritating and utterly stupid to be honest :) so I've built an azure function that runs every 30 days and it is responsible of updating the access token which I've stored in storage account, the SharePoint webpart now is responsible to read the access token that is stored in storage table. also make sure to store your Facebook app secret somewhere safe (Azure key vault)

Happy Sharepointing !