Change SharePoint Browser Tab Icon – FAVICON using jQuery

Within SharePoint, you can set the “FAVICON” to a specific url within the MASTER PAGE, by updating the HTML markup.

<link rel=”shortcut icon” href=”/_layouts/15/images/favicon.ico?rev=23” type=”image/vnd.microsoft.icon” id=”favicon” />

BUT – what if you don’t want to change the master page ?   

(which, you SHOULDN’T do, for Office 365)

A simple jQuery update will do it :

$(document).ready(function () {
     //change the FAVICON
     $(‘#favicon’).attr(‘href’, ‘/sites/GLOBAL/SiteAssets/IMG/favicon.ico’);
});

Create SPWeb in Office 365, using Custom Site Template (PowerShell)

When you need to create a LOT of SharePoint subsites, you can do a script with PowerShell – using the Microsoft.SharePoint.Client.WebCreationInformation class/object.

The steps are basically :

  • Connect to O365
  • Define the settings for the new WebSite
  • Add to WEBS
  • Context.ExecuteQuery

Here’s the PowerShell I’m using (see below to copy+paste) :

image

The tricky part – for a CUSTOM WEB TEMPLATE is knowing what “ID” to use.

Ordinarily, the STS#0 will create a team site – but how to get the ID for my custom site template ??

There’s a quick tip – via the UI – when you go to create a new SUB SITE – using the F12 developer tools.    See that <option> tag ??

<option value=”{24ECC832-383F-4C5E-B658-9A640EA73509}#Client Site Template”>Client Site Template</option>

image

*THAT* is the value you need to include – in the PowerShell as above…

And then you just call the “CreateSubSite” function – and stamp ‘em out.

Smile

======================================

$urlAdmin = “https://AVENGERS-admin.sharepoint.com

$user = “TONY.STARK@AVENGERS.com”

$password = “PepperPottsIsAwesome!”

$urlSite = “https://AVENGERS.sharepoint.com/sites/clients”

$passwordSecureString = ConvertTo-SecureString -string $password -AsPlainText -Force

$credential = New-Object -TypeName System.Management.Automation.PSCredential -argumentlist $user, $passwordSecureString

Connect-SPOService -Url $urlAdmin -Credential $credential

$spoCredentials = New-Object -TypeName Microsoft.SharePoint.Client.SharePointOnlineCredentials -argumentlist $user, $passwordSecureString

$spoCtx = New-Object Microsoft.SharePoint.Client.ClientContext($urlSite)

$spoCtx.Credentials = $spoCredentials

$spoCtx.RequestTimeout = “500000”

function CreateSubSite($title)

{

$WCI = New-Object Microsoft.SharePoint.Client.WebCreationInformation

$WCI.WebTemplate = “{24ECC832-383F-4C5E-B658-9A640EA73509}#Client Site Template”

$WCI.Description = $title

$WCI.Title = $title

$WCI.Url = $title

$WCI.Language = “1033”

$spoCtx.Web.Webs.Add($WCI)

$spoCtx.ExecuteQuery()

}

CreateSubSite “Ragnarok”

CreateSubSite “Anotherrok”

Breadcrumb for Office 365 (SharePoint Online)

One of the user-friendly + familiar navigation elements within SharePoint is the ‘breadcrumb’.   This has been removed from the standard SP2013 and O365 display – but is fairly easy to add back.

The simple tips, from some Googling, is to update the MasterPage – and remove the ‘display:none’ settings.

BUT – I don’t want to have make changes to my MASTER PAGE.

The other consideration is that people (users) don’t really need to jump back up the chain of breadcrumbs, but only need to “go up”.

ParentWeb via REST

My solution was to use some jQuery – and call the REST endpoint to get the parent web – and then poke in some HTML for this HREF.

image

Once you have jQuery in place (via JS Injection), then just refer to a JS file with the following code.    

Lastly, find a nice UP icon from an images search, or icon library, or use the one below – scroll to the bottom – and add a comment, while you’re there…    Smile

image

This handles the TOP site also – and doesn’t add the UP icon – as it’s already the top site.    And there is a hover text showing “back up to > xxxxxx” from the parent web title.

Thanks to this blogpost from Shantha Kumar T, for the REST + Parent Web idea…

Here’s the code – if you’d like to copy/paste – let me know if you find this useful !

$.ajax(

{

    url: _spPageContextInfo.webAbsoluteUrl + “/_api/web/parentweb”,

    method: “GET”,

    headers: {“Accept”: “application/json; odata=verbose”},

    success: function(data)

    {

if (data.d.ServerRelativeUrl)

        {

            console.log(‘Parent site title: ‘ + data.d.Title)

var upSiteUrl = “”;

            upSiteUrl += “<span class=’upLink’>”

            upSiteUrl += “<a href='” + data.d.ServerRelativeUrl + “‘ title=’Back up to > ” + data.d.Title + “‘>”

            upSiteUrl += “<img src=’/sites/global/SiteAssets/IMG/up16.png’>”

            upSiteUrl += “</a>”

            upSiteUrl += “</span>”;

            $(‘#zz11_RootAspMenu’).before(upSiteUrl);

        }

    }

});

Icons – originally as a 128×128 – I resized to 16×16 – and changed the colour using PAINT.NET.

up16up

Problems with 4K UHD and HyperV VM

As part of my new ‘kachirho’ company setup, I’ve purchased a new laptop – DELL XPS15 9550…    It’s a beast with new SkyLake i7 6700 processor – and 16GB RAM – and 512 SSD – see here for a YouTube review.   And it looks super-sexy with carbon finish…

It’s got the new (almost 4K) UHD resolution – 3840×2160 – and touch screen.   The visuals on this resolution are amazing – BUT – the clincher is that you need to ‘up’ the font size scaling.

By default, it was set to 200% – if setting to 100% – it’s hard to read !

The next dilemma – and discussion with a colleague – was the scenario for a HYPER-V VM.    I have one for some local development and working with K2.

Yes, I could use an Azure VM – but I have a local VM – so there…

While I can run a VM at decent speed, and with 10GB RAM, it’s not something that I can run on ‘multiple monitors’.  

The next consideration, was to drop my screen resolution to 1920×1080 – to match the second external monitor.    This WORKED – to a degree.

The VM would now pick up the base screen resolution (3840×1920) – within the VM – regardless of the desktop resolution I’d just changed to.

It turns out that HyperV must grab the base screen resolution – at BOOT time.

So – the answer was :

  • Change down from scale at 200% to 100% (I use 175% a lot of the time)
  • Drop the laptop screen resolution to 1920×1080
  • Reboot
  • Start up the VM
  • Connect – and tick the box for ‘span multiple monitors’

I can now run my VM across both screens – and both at 1920×1080.

It’s a fiddly way to do it – but luckily it’s so quick to re-boot, it doesn’t matter !

Yes – as Scott Hanselman mentioned, living a High-DPI desktop lifestyle can be painful….

#FirstWorldProblems

But – it’s a problem I’m happy to live with.    Viva la 4K !!

Smile

JavaScript Date Format

One of my main bugbears with JavaScript is the way it handles DATE variables.   Or, more specifically, date FORMAT.

There are some great jQuery plug-ins – like MOMENT.JS – but if you have the need for a quick formatter – I just use a simple function, like this :

function formatDate(dateObject) {
    var d = new Date(dateObject);
    var day = d.getDate();
    var month = d.getMonth() + 1;
    var year = d.getFullYear();
    if (day < 10) {
        day = “0” + day;
    }
    if (month < 10) {
        month = “0” + month;
    }
    var date = day + “/” + month + “/” + year;
    return date;
}

This does a format of “dd/mm/yyyy” – which is the only one you need, right ??

To use the above function, you just need to do this :

var nowDateTime = new Date();
var formattedDateTime = formatDate(nowDateTime);

Feel free to edit/use as you need – can change to dd-mm-yyyy, for example.

But never mm/dd/yyyy – that’s just crazy talk !   

😛

Remove all webparts

For a recent SP2010 to SP2013 upgrade, we have a SharePoint Publishing page that has some SandBoxed Solution webparts.   We need to REMOVE these webparts – as we’re going with a different approach – some JavaScript/CSOM – to do the same function.

Anyway, I’ve defined a script that will get a SP page, and remove ALL webparts.

This is via PowerShell + CSOM, so the same approach would would work for SP2013, or O365 (just need a different ClientContext – and login/connection).

# values from constants
$urlSite = "https://intranet/projectX"

$ctx = New-Object Microsoft.SharePoint.Client.ClientContext($urlSite)
$ctxWeb = $ctx.Web
$ctx.Load($ctxWeb)
$ctx.Load($ctxWeb.Lists)
$ctx.ExecuteQuery();
	
[Microsoft.SharePoint.Client.Publishing.PublishingWeb] $pubWeb = [Microsoft.SharePoint.Client.Publishing.PublishingWeb]::GetPublishingWeb($ctx, $ctxWeb);
$ctx.Load($pubWeb)
$ctx.ExecuteQuery();

function RemoveAllWebParts($pageName)
{
    $messageText = "Checking page " + $pageName
	$messageText 

	# remove webparts 
	# wipe them out - ALL of them      (order 66)

	# get the pages library		
	$pagesLib = $ctxWeb.Lists.GetByTitle("Pages");
    $ctx.Load($pagesLib)
	$ctx.ExecuteQuery();
		
	# find the page we wanna ditch the webparts from
    [Microsoft.SharePoint.Client.CamlQuery] $camlQuery = New-Object Microsoft.SharePoint.Client.CamlQuery
	$camlQuery.ViewXml = "<View Scope='RecursiveAll'><Query><Where><Eq><FieldRef Name='FileLeafRef' /><Value Type='Text'>" + $pageName + "</Value></Eq></Where></Query><RowLimit>1</RowLimit></Query></View>"
	$pageFound = $false
	$pageItems = $pagesLib.GetItems($camlQuery)
	$ctx.Load($pageItems)
	$ctx.ExecuteQuery();

	if($pageItems.Count -gt 0)
	{	$pageFound = $true
		$pubPageItem = $pageItems[0]
		$pubFile = $pubPageItem.File
	}
		
	if($pubFile.CheckOutType -eq [Microsoft.SharePoint.Client.CheckOutType]::None -or $pubFile.CheckOutType -eq $null)
	{
		try
		{
			$pubFile.CheckOut()
			$ctx.Load($pubFile)
			$ctx.ExecuteQuery(); 
		}
		catch
		{
		}
	}

	$wpm = $pubFile.GetLimitedWebPartManager([Microsoft.SharePoint.Client.WebParts.PersonalizationScope]::Shared);
    $webparts = @();

	$wpcoll = $wpm.WebParts;
	$ctx.Load($wpcoll);
	$ctx.ExecuteQuery();

    $messageText = "Delete webparts for the page";
    $messageText;

    foreach($spwebpart in $wpcoll)
    {
        $webparts = $webparts + $spwebpart.ID;
        $spwebpart.deleteWebPart();
        $ctx.ExecuteQuery();
    }

	if($pubFile.CheckOutType -ne [Microsoft.SharePoint.Client.CheckOutType]::None)
	{
		$pubFile.CheckIn("", [Microsoft.SharePoint.Client.CheckinType]::MajorCheckIn);
		$pubFile.Publish("");
		$pubFile.Approve("");
	}
}

RemoveAllWebParts 'Page1.aspx';
RemoveAllWebParts 'Page2.aspx';
RemoveAllWebParts 'Page3.aspx';
RemoveAllWebParts 'Page4.aspx';

O365 Saturday Melbourne

Last weekend, I presented a session at the Office 365 Saturday held in Melbourne.   I didn’t get there until lunch was being served, as I was coaching my son’s basketball team – but there was a great buzz & lots of chatter when I got there !

My session was entitled “VS, PS, CS, JS and no BS”.

If you don’t know the acronyms, it was a session about :

  • VS = Visual Studio 2015
  • PS = PowerShell
  • CS = C#
  • JS = JavaScript
  • BS = well, there was none, right !?    

🙂

Using Visual Studio 2015 as my IDE, I covered three main areas, with corresponding demos.

Provision a Site Collection – using PowerShell

  • Connect to SPO
  • Create a new Site Collection
  • Regional Settings
  • Activate features
  • Upload files
  • Create lists & pages
  • Set Alt Css Url
  • Welcome page
  • Add JavaScript reference (JS injection)

This last point was a topic that I’ll cover in detail in another post – a way to get some good functionality into your SharePoint O365 site, without needing to change the Master Page – otherwise known by some work colleagues as ‘dentistry via the belly button’ – LOL !

Provider hosted app in Azure – using C#

Using CSOM, users can provision a sub-site (SPWeb), and have it configured with a variety of features and layout.   My code even provisions a Yammer group if required.

  • Activate features
  • Add lists
  • Create webparts
  • Set security
  • Create Yammer group
  • Add Yammer webpart to page
  • Add blog site
  • Add audience targetted content editor webparts

Additional functionality – using JavaScript

Lastly, I showed some of the functions we developed using CSOM and the JSOM :

  • Add footer – without Master Page update (JavaScript injection)
  • Waffle
  • Show dialog
  • Delete sub-sites
  • Get AppTiles

Much of the demo’s were fairly fast paced, and “you had to be there to see it” – but I’ve loaded the slides for your viewing – and will blog some of the items above in depth.

Let me know if you would like to see/hear more – and thanks for attending my session – if you were there on the day.    (no BS, was there ??   right !!?!?)