SharePoint Framework (SPFx) – Full Bleed WebPart Tutorial

I recently needed to delve into SharePoint development and custom WebParts. One of the problems I had was whitespace, I had a modern SharePoint page with a single webpart that I wanted to use all available space. This is possible with a page capable of a Full-width column (Only available in Communication Sites, see here for instructions But I needed more, I needed something to fit into an existing site on a Modern Page utilising an existing Classic Team Site template.

I figured I could use a simple style override to make this work for me. The following solution works well for my situation, but please note that it is completely unsupported by Microsoft and needs to be thoroughly testing in your own environment before considering its use. I have only tested this with a single WebPart on a page in a Single Column Layout.

Once you have a basic WebPart template created (Microsoft has plenty of documentation on how to do this), add jquery as a project dependency.

npm install jquery @types/jquery

Add an include in your .ts or .tsx file

import * as jQuery from "jquery";

Simply add the following lines in the WebPart initialisation section.

public onInit(): Promise<void> {
    return super.onInit().then(_ => {
        jQuery("#workbenchPageContent").prop("style", "max-width: none");
        jQuery(".SPCanvas-canvas").prop("style", "max-width: none");
        jQuery(".CanvasZone").prop("style", "max-width: none");

On page load, your WebPart will have all available space on the page to use. If your testing this in your own WebPart, not the initial CSS for the .container class has a max-width set that will limit your WebPart from using more space.

For a complete functional demo please see

Programming Web Application

Trend API coming soon

A while back I started getting interested in site’s that used API’s from several different sources to create what is known as a web mashup. “A mashup is a web page or application that combines data or functionality from two or more external sources to create a new service”Wikipedia. There are plenty of really good examples of web mashups out there, if you are interested check out ProgrammableWeb’s site.

At this time I wrote my own craptacular mashup called The Gob Shite, this site was a mashup of Google’s YouTube, Google’s News feeds and a new API of my own called the TrendEngine. TrendEngine was developed using Google Hot Trends information and provided some level of stability to the constantly changing trend list. It does this by detecting reoccuring trends in the list and applying a weighting formula to them.

iPhone Objective C Programming

APNS error – No Valid aps-environment entitlement

If you get the following error when trying to register for a device token, firstly ensure you have correctly followed the directions within the iPhone Developers Portal.

Error Domain=NSCocoaErrorDomain "no valid 'aps-environment' entitlement string found for application"
iPhone Objective C Programming

APNS Send Device Token to Provider

I am currently in the middle of designing and developing an application based on the Apple Push Notification Service. There is alot of information about the client side registration and plenty of server side code examples, but I haven’t found anything that simple demonstrates how to send your device token to the provider service.

iPhone Nagios Programming

iPhone Development

For some strange, but unknown reason I decided to purchase a Mac Mini to try some iPhone Development. I have a few apps that I would like on my iPhone that are currently not available.

My first app will be for a Nagios Pager service that will utilise the Push Notification features just released in iPhone OS 3.0. There will be two versions, Nagios Pager and Nagios Pager Pro. Nagios Pager will be a stand alone application that will talk to a backend service for delivering Push Notifications for Nagios alerts, Nagios Pager Pro will contain all the features of Nagios Pager as well as an iPhone based Nagios client.