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

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

Simple .NET XML Tutorial

I needed to build an application the other day that used XML to talk to a web service, but I wanted to deal with raw XML rather then using anything based on WSDL and RPC. This was the first time I had written anything that used XML before so I started googling for code examples and tutorials.

There wasn’t much clear documentation out there on exactly what I wanted to do so I ended up using a couple of code examples I found in the end (links provided below for original source) and modifying them for my needs.

The end result is extremely simple to understand (however the information was not easy to find) so I thought I would post the details here in hopes that someone else wanting to do the same thing ends up finding this article rather than searching for hours and not finding exactly what is required. (As an a-side, most of what I found online was regarding using premade XML files, and the generation of XML files and not generating and sending the XML request on the fly). Also I wasted a bit of time because of my lack of knowledge on how various Streams work together, but that is another issue entirely.

The following is code for C# but should apply to other .NET based languages (with an appropriate change of syntax).

Required Namespace Imports

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.IO;
using System.Net;
using System.Threading;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml;

Code

WebRequest req = WebRequest.Create("http://URLHERE/WebService");
req.Method = "POST";
req.ContentType = "text/xml";
Stream requestStream = req.GetRequestStream();

XmlTextWriter xml = new XmlTextWriter(requestStream, null);

xml.WriteStartDocument();

// The DocType will be different for most situations, this
// is what works for me.
xml.WriteDocType("Request", null, "somefile.dtd", null);
xml.WriteStartElement("Request");
xml.WriteStartElement("InfoRequest");

// These values could come from any source
xml.WriteElementString("Username", "<>");
xml.WriteElementString("Password", "<
>");
xml.WriteElementString("Info", "something");
xml.WriteEndElement();
xml.WriteEndElement();

// When Close() is called the request is sent to the server
xml.Close();

// Use a WebResponse Component to retrieve the response
WebResponse rsp = req.GetResponse();
XmlTextReader xmlin = new XmlTextReader(rsp.GetResponseStream());

while (xmlin.Read())
{
  if (xmlin.NodeType == XmlNodeType.Element)
  {
    if (xmlin.Name == "Info")
    {
      String info = xmlin.ReadString();

      // Do something with returned data

    }
  }
}

xmlin.Close();
rsp.Close();

There are plenty of useful tutorials out there based on XmlTextReader and XmlTextWriter that can explain how to use them to read and write XML. So I wont cover that here. My biggest problem was finding out how to generate the XML and send it straight to the server without having to save to a file.

References: