Custom Solutions

Step-by-Step tutorial for creating SharePoint 2013/Online solutions. If you would like additional examples, feel free to post them as an issue for help here.

Starter Solutions

gd-sprest-bs

This is a basic starter solution for building project using the gd-sprest and bootstrap libraries.

Basic Examples

Ribbon Button

This solution will demonstrate how to create a custom ribbon button in SharePoint 2013 or Online (Classic) pages.

  • Learn how to install/uninstall custom actions to a web
  • Learn how to utilize the core SharePoint Modal Dialog library

Ribbon Menu Button

This solution will demonstrate how to create a custom ribbon menu button in SharePoint 2013 or Online (Classic) pages.

  • Learn how to utilize SASS for styling
  • Learn how to create a ‘Popover’ Bootstrap component

Ribbon Security Group

This solution will demonstrate how to render a custom ribbon button in SharePoint 2013 or Online (Classic) pages, which is linked to a SharePoint security group.

  • Learn how to create and remove site groups
  • Learn how to render user data

Intermediate Examples

JSLink Menu

This solution will demonstrate how to create a custom Bootstrap menu for a list view.

  • Learn how to register a jslink script with a list view
  • Learn how to create a Bootstrap PopOver and Dropdown menu component
  • Learn how to get selected items from a list view

Upgrade ‘JSLink Menu’ to SPFx

Next, we will upgrade the JSLink solution to a SPFx list customizer.

  • Learn how to create a SPFx list extension
  • Learn how to reference an external library
  • Learn how to test using the developer workbench

List WebPart

This solution will demonstrate how to create a configurable webpart in SharePoint 2013 or Online (Classic) pages.

  • Learn how to add/remove client-side webparts to/from the webpart gallery
  • Learn how to create Bootstrap components in SharePoint
  • Learn how to create a list item edit form

Upgrade ‘List WebPart’ to SPFx

Next, we will upgrade the solution to a SPFx webpart.

  • Learn how to create a SPFx webpart
  • Learn how to develop against the developer workbench

Webpart Configuration Panel

This solution will demonstrate how to create custom webpart configuration in SharePoint 2013 or Online (Classic) pages.

SPFx Navbars

This solution will demonstrate how to create a custom header and footer bootstrap navbar in a SharePoint modern page.

  • Learn how to create a SPFx Extension
  • Learn how to create Bootstrap components in SPFx projects
  • Learn about the application customizer and custom placeholders

Document Set Dashboard

This solution will demonstrate how to create a basic dashboard for a document set homepage.

  • Learn how to create a Document Set
  • Learn how to use the onCreated event to customize the document set homepage
  • Learn how to create a basic dashboard using BootStrap

Advanced Examples

Custom List Forms

This solution will demonstrate how to create custom new/display/edit forms for a SharePoint list. This solution will work in 2013+ environments.

  • Learn how to custom list forms with JavaScript
  • Learn how to create sample data
  • Learn how to create a parent/child dropdown relationship
  • Learn how to create a calculated field
  • Learn how to display modal loading dialogs

Document View WebPart

This solution will demonstrate how to create a list webpart that targets document libraries, and renders a grid for each file in the file in the library.

  • Learn how to inherit the List WebPart component
  • Learn how to filter the List WebPart to target document libraries
  • Learn how to set the List WebPart oData query to include file information
  • Learn how to create a callout using the SharePoint Callout Manager
  • Learn how to create a document preview

IE Banner

This solution will demonstrate how to create a custom banner for IE only. This solution will target both classic and modern pages, without duplication of code.

  • Learn how to create a configurable banner
  • Learn how to reference external libraries in SPFx
  • Learn about the application customizer and custom placeholders

VueJS Project

This solution will build upon the basic examples created above, and utilize the VueJS framework and gd-sprest-bs library to build a SharePoint 2013/Online solution.