Thursday, March 10, 2016

SharePoint Online - JavaScript Injection with PowerShell

Scenario:
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 is...by injecting JavaScript and CSS.

Solution:
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
    Url: https://github.com/officedev/pnp-powershell/releases
  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:
    Connect-SPOnline https://tenant.sharepoint.com/sites/portal
  4. Push the JavaScript code.
    Add-SPOJavaScriptBlock -Name MyScript -Script "alert('Hello World');"
    or
    Add-SPOJavaScriptLink -Name JQuery -Url https://code.jquery.com/jquery.min.js
  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 = "https://tenant.sharepoint.com/sites/portal"
$ScriptName = "MyScript"
$scriptBlock = "alert('Hello World');"

try
{
    #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

}
catch
{
    Write-Host "$_.Exception.Message"
}

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

7 comments:

  1. I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article.website development agency

    ReplyDelete
  2. Great blog thanks for sharing Masters of building brands, Adhuntt Media is making waves in the Chennai digital market! Known for their out of their box ideas, if a creative overhaul for your brand is what you need, you’ve come to the right place. Right from Search Engine Optimization-SEO to Social Media Marketing, Adhuntt Media is your pitstop for original brand identity creation from scratch.
    digital marketing company in chennai
    seo service in chennai
    web designing company in chennai
    social media marketing company in chennai

    ReplyDelete
  3. Nice blog thanks for sharing Re-decorate your messy lawn and fix up your boring old garden with Karuna Nursery Gardens. We offer speciality Garden maintenance services in Chennai. It’s time you made a difference to your backyard.
    plant nursery in chennai
    rental plants in chennai
    corporate gardening service in chennai

    ReplyDelete
  4. Excellent blog thanks for sharing Pixies Beauty Shop is unlike any of the other cosmetic shops in Chennai. With tons of exclusive imported brands to choose from and the best value, this is the best shopping destination for your personal and salon needs.
    Cosmetics Shop in Chennai

    ReplyDelete

Official SharePoint Documentation

I have recently contributed to the official SharePoint documentation for developement. Check it out here: https://docs.microsoft.com/en-us...