Code Examples

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.

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

List WebPart

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

SharePoint 2013

  • 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 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

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.