Monday, June 12, 2017

Microsoft Flow - HTTP REST Call

In this blog post, I will cover what is a workflow and how we can create a workflow using Microsoft Flow that can make HTTP REST calls to bring the stock price and then I will discuss how we can use this workflow in a iPhone app in following sections:
  1. Workflow
  2. Microsoft Flow
  3. HTTP REST Call from MS Flow
  4. Using the Workflow in the Flow App
My definition of a workflow is, steps to complete a task. That's it :o).
For example, if you want to get your driving license then you follow the steps provided on the DMV's site (1-Bring documents, 2-Fill paper work, 3-Get your photo taken, 4-Pay fee). In this example, our task is to get the driving license and in order to complete this task we have to follow four steps.

Microsoft Flow:
In SharePoint world we used to have SharePoint Designer (which we all love) to create workflows and do other stuff. Now that there is not going to be a newer version of SPD, Microsoft has provided another awesome way of creating workflows called Microsoft Flow. Its a cloud based service which lives outside the SharePoint world, can be used on a mobile phone and can interact with many services like SPO list/lib, Outlook, Azure, Salesforce, Twitter, Google Drive, Gmail and the list goes on and on. Microsoft Flow is a no-code/low-code solution and it can also interact with SharePoint on-prem.

So without further due lets create a workflow which will make HTTP REST call to grab stock quote of a provided ticker....and we will be using this workflow in our iPhone.

HTTP REST Call from MS Flow:
  1. Go to Microsoft Flow, sign-in and create an empty flow "Stock Price".
  2. Now I am going to add steps to trigger the workflow manually which will make an HTTP REST call and then parse the results and show me the price in a mobile notification.
  3. For that my workflow will have following steps: An input button, HTTP Request step, Compose step, Parse JSON step and then Mobile Notification step as shown in the diagram below:
  4. Manually trigger a workflow step adds a button on your iPhone app which takes a stock ticker input. You have to install the Flow app from the App Store in order to view it.
  5. HTTP step will make REST call to google finance API via GET method by providing the stock ticker taken in the previous step. e.g.
  6. As a result we will get JSON response. I added Compose step to strip out the special characters in the response by using a WDL(Workflow Definition Language) function: "@replace(body('HTTP'), '// ', '')".
  7. After removing the special characters I should be able to parse JSON by providing a valid schema. You can generate schema by adding your response to the blue link provided at the bottom of this step.
  8. Now lets add the notification step and add Ticker and l outputs to the Text field of this step. Note that notification step will be placed inside the loop automatically as JSON response can have multiple results for l.
Using the Workflow in the Flow App
  1. Install the Flow app from App Store in your iPhone.
  2. Sign-in and go to the Buttons. You should be able to see all your buttons there.
  3. Click "Stock Price" button and provide the symbol MSFT and then hit Done.
  4. This will start the workflow and you should get the push notification with the stock ticker with the price quote in it.

Thursday, May 25, 2017

SharePoint Online Page Load Time with JavaScript

We know that Microsoft don't recommend any kind of load testing against SharePoint Online pages as mentioned here but still customers want to know how much time it takes to load a page to get a feel of the end user experience.

To find the page load times, browsers (Edge, Chrome & Firefox) now have built-in support of Navigation Timing which is a JavaScript API to measure the performance of a web page. This API is exposed via performance.timing object. Performance Timing API provides following events of for a web page, which we can use in JavaScript to get the different times of page load:

Here is an example of JavaScript that calculates the complete page load time, starting from the user pressing the Go button in the browser till the page renders completely:
Load Time: <div id="LoadTime"> </div>

<script type="text/javascript" >

window.onload = function(){
    var t = performance.timing;
    document.getElementById('LoadTime').innerHTML = t.loadEventEnd - t.navigationStart;
  }, 0);

Note that above script is calculating difference between loadEvendEnd (very last event) and navigationStart (very first event) which is simulating the end user experience. The time will be displayed in milliseconds. 

Similarly we can calculate the time between the request sent to server and response that came back from the server by calculating the difference between responseEnd and requestStart events. 

Tuesday, November 1, 2016

Microsoft Graph vs Office Graph

Microsoft introduced Office Graph a couple of months back which uses machine learning techniques to connect people to the relevant content, conversations and other people around them in Microsoft Cloud (Office 365). Now Microsoft recently introduced Microsoft Graph, which is a unified API endpoint, for accessing data, intelligence, and insights in the Microsoft cloud...and everybody is now confused :o). In this post I will try to explain the difference.

What is Graph?
According to wikipedia graph also known as social graph is described as:
The social graph in the Internet context is a graph that depicts personal relations of internet users. In short, it is model or representation of a social network, where the word graph has been taken from graph theory to emphasize that rigorous mathematical analysis will be applied as opposed to the relational representation in a social network.

Which means that how a person on internet is related or linked to another person and/or object(like document, image etc).This term was popularized by Facebook...for obvious reasons :o).

Office Graph:
The Office Graph uses machine learning algorithms to learn how a Office 365 user is connected to other users, content(documents etc) and conversations in a tenant and create a graph based on it in order to make suggestions.

If you go to Delve, the yellow section shows the information generated automatically based on Office Graph:

If we disable office graph by going into the SharePoint settings:
then Delve will not show the information generated by the office graph, it will only show basic about me information:

Microsoft Graph:
Microsoft Graph is an API with a single end point to access data, intelligence and insights from Microsoft Cloud (Office 365).

Let's understand it by an example, imagine a scenario where an app has to access a user's email attachment, upload it to SharePoint and then notify user's manager. Now that app needs to get authenticated first and then go to Outlook to grab emails and then go to SharePoint to upload files, which means dev have to have to work with three different set of APIs (Active Directory, Outlook and SharePoint). To overcome such scenarios Microsoft has introduced one API (Graph API) to talk to all Office 365 products. Microsoft Graph API is one API to rule them all.

Access Office Graph via MS Graph: Microsoft Graph API does not depend on Office Graph. However it can provides more functionality when Office Graph is enabled e.g. trends and related people etc. Click here to learn more.

Note: For SharePoint developers: MS Graph API is not here to kill CSOM and SharePoint REST API.

MS Graph API calls can be tested before writing the app with Graph Explorer:


Tuesday, October 25, 2016

Office365 Subsite Logo Redirection

Sub-site logo points to the sub-site's home page by default...and the requirement is to point it to the top level site's.

We can not change Master Page in Office365/SharePoint Online site so we need to embed/inject the following JavaScript:

<script type="text/javascript" src=""></script>

<script language="javascript" type="text/javascript">

$(document).ready(function () {




Tuesday, September 13, 2016

PowerShell Script Analyzer

"PSScriptAnalyzer is a static code checker for Windows PowerShell modules and scripts. PSScriptAnalyzer checks the quality of Windows PowerShell code by running a set of rules. The rules are based on PowerShell best practices identified by PowerShell Team and the community. It generates DiagnosticResults (errors and warnings) to inform users about potential code defects and suggests possible solutions for improvements."

Lets put this to the test. I have written following basic PowerShell Script in Visual Studio Code (because it is an awesome tool and it has a PowerShell extension that give you features like IntelliSense, Goto definition, Debugging etc) and will be running the Script Analyzer on the script file. In this script I am calling a function that will display a string stored in a variable.

Open the Windows PowerShell Console and lets install the PSScriptAnalyzer module (This module is available in v 5.0 and above by default):
Install-Module -Name PSScriptAnalyzer -Force

Verify if the commands are available for this module:
Get-Command -Module PSScriptAnalyzer

Run the Script Analyzer on our test script:
Invoke-ScriptAnalyzer -Path C:\Users\user1\Desktop\Test.ps1

Now the ScriptAnalyzer is showing me one warning in my most simplest script that Write-Host (which I have been using my whole life) is obsolete and use Write-Output instead.....which is awesome :o). And that's how easily we can do static analysis based on the built-in rules on our PowerSell scripts.

To get the complete list of  rules, use the following command:

Sunday, June 12, 2016

SharePoint DSC

SharePoint DesierState Configuration has Ben released.


While in pre-release mode it was called xSharePoint.

Thursday, March 10, 2016

SharePoint Online - JavaScript Injection with PowerShell

Updating the Master Page for SharePoint Online is not recommended by Microsoft now.....fine. So how do we change the UI then? And the answer injecting JavaScript and CSS.

You might want to watch this video of JavaScript injection which we will not follow here as injecting JavaScript and/or CSS through Visual Studio takes little bit of time as shown in the above video so I am putting pieces together to inject JavaScript using PowerShell very very...very quickly. Thank you Office Dev PnP's Erwin van Hunen.

Note: We are not going to use SharePoint Online Management Shell ;o) instead we will use Windows PowerShell.
  1. Install PnP PowerShell Cmdlets for SharePoint Online
  2. Perform a quick test: Run the command below in Windows PowerShell to see if it is available
     Get-Command Add-SPOJavaScriptBlock
  3. Connect to the site where you want to push JavaScript code:
  4. Push the JavaScript code.
    Add-SPOJavaScriptBlock -Name MyScript -Script "alert('Hello World');"
    Add-SPOJavaScriptLink -Name JQuery -Url
  5. You are done. Now browse the site and you will get the annoying Hello World alert on all the pages.
Here is the complete script:
# This is a sample script and is provided as is.
# Author: Tahir Naveed
# Description: This script connects to a SPO site and 
# injects a JavaScript code block which will execute on all of the pages.

$url = ""
$ScriptName = "MyScript"
$scriptBlock = "alert('Hello World');"

    #Connect to the SPO site
    Connect-SPOnline $url
    #Remove script if added before
    Remove-SPOJavaScriptLink -Name $ScriptName

    #Add the script
    Add-SPOJavaScriptBlock -Name $ScriptName -Script $scriptBlock

    Write-Host "$_.Exception.Message"

Write-Host "Completed successfully." -ForegroundColor Green
Ref: Introduction to PnP PowerShell Cmdlets
Ref: OfficeDev/PnP-PowerShell Reference

Microsoft Flow - HTTP REST Call

In this blog post, I will cover what is a workflow and how we can create a workflow using Microsoft Flow that can make HTTP REST calls to br...