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.

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

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

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.