SharePoint 2013 Rendering Templates

2018

portal page template portal tabbed container example 1 portal tabbed container example 2 portal tabbed container example 3 portal tabbed container example 4

Both the page template and tabbed containers were created with HTML and Knockout.js.

Page Template

The idea behind creating a more user friendly template was to make creating/editing content easier on the owners. This template would give a similar page layout across all sites and pages making for a more unified experience for the user. This template has four major content areas for users to fill out, along with a few more complex areas reserved for SharePoint webparts depending on the content owner's needs, but are not required. The webpart areas are there because I wanted to build in scalability to the template. The zones are for mobile devices, this is what dictates the stacking order of the content and webparts. math redesign logout screen

Tabbed Containers

The tabbed containers are SharePoint delivered webparts that hold two or more webparts. I modeled the new template for them after binder tabs so they would intuitively seem clickable. They have the ability to hold embedded videos, pictures, and text. I used CSS to override the stock styles of SharePoint 2013 to accomplish this.

Future Plans

Right now, the page template has some forced styles for images that require a user to use the exact size image desired for the page. This is to allow the image to flex for mobile viewing to avoid a horizontal scroll. This has gotten mixed review across the user base and I would like to entertain another solution to this.

Back