4 minute read

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

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

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

Documents View Webpart

This solution will demonstrate how to create a basic view for a document library.

  • Learn how to create a document library view
  • Learn how to create filters
  • Learn how to create a SPFx webpart

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

Basic Dashboard

This solution will use the gd-sprest-bs-starter solution and build a basic dashboard using Bootstrap and Datatables.net plugins.

  • Learn how to create a solution from the gd-sprest-bs-starter solution
  • Learn how to configure datatables.net plugin
  • Learn how to create events to connect components together

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

SPFx Banner

This solution will demonstrate how to create a global banner using the SharePoint Framework (SPFx). This solution is designed to work with both SharePoint 2019 and Online environments. For SharePoint 2019 environments, this solution provides an example of how to deploy SPFx extensions globally which is currently not supported by the framework.

  • Learn how to create a banner targeting all pages in a tenant
  • Learn how to load a configuration file and store data in cache
  • Learn how to deploy SPFx extensions globally in SharePoint 2019 environments

SPFx Upgrade

This code walkthrough will demonstrate how to upgrade a classic solution to SPFx. The sample solution will use DataTables.net, jQuery and Bootstrap to render a simple datatable in a webpart.

  • Learn how to create a basic TypeScript project
  • Learn how to use NodeJS to import libraries
  • Learn how to create a SPFx and Teams solution

SPFx Modern List Forms

This code walkthrough will demonstrate how to create custom modern list forms. The sample solution will use the gd-sprest-bs SharePoint REST Framework w/ Bootstrap to render a custom form.

  • Learn how to create a SPFx List Form Extension
  • Learn how to create a SPFx WebPart
  • Learn how to create custom list forms using the ListForm component

Starter Solutions

gd-sprest

This is a basic starter solution for building SharePoint projects.

gd-sprest-bs

This is a basic starter solution for building SharePoint projects w/ bootstrap.