SharePoint Framework (SPFx) – Full Bleed WebPart Tutorial

I have recently had the need to get 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 https://blog.velingeorgiev.com/how-add-spfx-webpart-full-width-column). 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Ā https://github.com/littlejon/FullBleedWebPartTutorial

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.

Continue reading

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.

Continue reading

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.

Continue reading