Classic WebParts

Starter WebParts

The gd-sprest-bs framework has pre-built reusable webparts that can be used for various configurations. This will simplify and minimize the amount of code you need to write, so you can focus on the application instead of the configuration and datasource. Each webpart is designed to be used as is, or further extended.

Base

The base webpart inherited by all of the webparts. The webpart will require two elements, one to render the solution to and the other to store the configuration for the webpart. The onRenderDisplay and onRenderEdit events will be used to render the app based on the page mode. The base webpart will include a blank form which is triggered from the Configuration button.

Properties

Name	Type	Description
cfgElementId	string	The configuration element id.
elementId	string	The element to render the app to.
className	string	The custom classname to apply to the display/edit element.
wpClassName	string	The class name to apply to the webpart element.
editForm	IWPEditForm	The available customizations for the webpart’s configuration.
onPostRender	(wp: IWPInfo) => void	Triggered after the webpart is rendered.
onRenderDisplay	(wp: IWPInfo) => void	Triggered when the page is being viewed.
onRenderEdit	(wp: IWPInfo) => void	Triggered when the page is being edited.
onRenderForm	(form: IForm, wp: IWPInfo) => void	Triggered after the form is rendered.

WebPart Configuration

Name	Type
WebPartId	string

List

The list webpart will have a configuration form pre-configured to allow the user to set the web url containing the target list, where the default would be the current web. A dropdown list will contain the lists available. A render method will be available that contains the list items.

Properties

Name	Type	Description
camlQuery	string	The CAML query to use when querying the list items.
odataQuery	IOData	The OData query to use when querying the list items.
onExecutingCAMLQuery	(wpInfo: IListInfo, caml: string) => string	Use when you need to generate the CAML query based on the webpart properties.
onExecutingODATAQuery	(wpInfo: IListInfo, odata: IOData) => string	Use when you need to generate the CAML query based on the webpart properties.
onRenderItems	(wpInfo: IListInfo, items: IListItem[]) => void	Triggered when the page is in display mode. It will contain the list items based on the query provided. Use this to render your solution.

WebPart Configuration

Name	Type
ListName	string
WebPartId	string
WebUrl	string

List w/ Fields

The list w/ fields webpart will extend the list webpart and include the ability to select fields from the target list. The webpart configuration will include the selected fields.

Properties

Same as the list webpart.

WebPart Configuration

Name	Type
Fields	IWPListField[]
ListName	string
WebPartId	string
WebUrl	string

Search

This webpart name is a little mis-leading, it’s not for the search interface but allows the webpart configuration to include specific list field types available for filtering.

• Choice
• Lookup
• Taxonomy
• Text
• URL
• User

The webpart object will contain a method filterItems(filterText: string) => ILIstItem[] that can be used to return the filtered items.

Properties

Same as the list webpart.

WebPart Configuration

Name	Type
Fields	{ name: string, type: string }[]
ListName	string
WebPartId	string
WebUrl	string

Taxonomy

The taxonomy webpart will be linked to a term set. Various events can be used to render your app based off a selected term group, term set, or term set terms.

Properties

Name	Type	Description
onRenderTermSet	(wpInfo: IWPTaxonomyInfo, termSet: Helper.ITerm) => void	Triggered after the term set is rendered.
onRenderTermSets	(wpInfo: IWPTaxonomyInfo, termSets: Helper.ITermSetInfo[]) => void	Triggered after the term set is rendered.
onRenderTermSetTerms	(wpInfo: IWPTaxonomyInfo, termSet: Helper.ITermInfo[]) => void	Triggered after the term set is rendered.

WebPart Configuration

Name	Type
TermGroupId	string
TermGroupName	string
TermSetId	string
TermSetName	string
TermSetTermId	string
TermSetTermName	string

Tabs

This webpart can be used to group webparts within a zone as tabs. It will ignore any hidden webparts, and can be configured to render each webpart name as a Pillar or regular Tab type.

How to Code a Classic WebPart

The easiest way to create classic webparts is to create a pre-configured Script/Content Editor WebPart and make it available in the webpart gallery for the user to select from. The gd-sprest library contains the SPConfig component, which we will use to install/uninstall the webpart to/from a site collection.

SPConfig Code Example

This code example will demonstrate how to generate a content editor webpart and script editor webpart. The install/uninstall method of the SPConfig object will add/remove a file from the site collection’s webparts folder. This will make the pre-configured content/script editor webpart available in the webpart gallery for users to select.

Both examples will use the following html. The script will utilize the SharePoint Script-on-Demand library to ensure the script is loaded before calling the library.

<div id="wp-demo"></div>
<div id="wp-demo-cfg"></div>
<script type="text/javascript" src="/sites/demo/siteassets/wp-demo.js"></script>
<script type="text/javascript">
    if(SP.SOD.executeOrDelayUntilScriptLoaded(function() { new ListWebPartDemo.WebPart(); }, "wpdemo") == false) {
        // Load the script
        LoadSodByKey("wpDemo");
    }
</script>

Below is an example of creating a script/content editor webpart.

import { Helper } from "gd-sprest-bs";

/**
 * SharePoint Configuration
 * Used to create SharePoint assets for the solution.
 */
export const Configuration = Helper.SPConfig({
    WebPartCfg: [
        {
            FileName: "demo-cewp.webpart",
            Group: "Custom",
            XML: Helper.WebPart.generateContentEditorXML({
                title: "Demo WebPart",
                frameType: "Default",
                description: "A custom webpart.",
                contentLink: "A reference to a file can also be used.",
                content: [
                    '<div id="wp-demo"></div>',
                    '<div id="wp-demo-cfg" style="display: none;"></div>',
                    '<script type="text/javascript" src="/sites/dev/siteassets/wp-demo.js"></script>',
                ].join('\n')
            })
        },
        {
            FileName: "demo-sewp.webpart",
            Group: "Custom",
            XML: Helper.WebPart.generateScriptEditorXML({
                title: "Demo WebPart",
                chromeType: "None",
                description: "A custom webpart.",
                content: [
                    '<div id="wp-demo"></div>',
                    '<div id="wp-demo-cfg" style="display: none;"></div>',
                    '<script type="text/javascript" src="/sites/dev/siteassets/wp-demo.js"></script>',
                    '<script type="text/javascript">if(SP.SOD.executeOrDelayUntilScriptLoaded(function() { new ListWebPartDemo.WebPart(); }, "wpdemo") == false) { LoadSodByKey("wpDemo"); }</script>'
                ].join('\n')
            })
        }
    ]
});

Main Code

The main code will import the Configuration. This will represent the wp-demo.js file referenced by the solution. The SharePoint Script-on-Demand library will be used to notify the webpart’s content that the library has been loaded and to call the WebPart method to render the webpart.

import { Helper } from "gd-sprest";
import { Configuration } from "./cfg";
import { WebPart } from "./wp";

// Create the global variable
window["ListWebPartDemo"] = {
    Configuration,
    WebPart
};

// Notify the SharePoint Script-on-Demand (SOD) Library
Helper.SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("wpdemo");

Other Examples

Reference the Code Examples for other examples of creating classic webparts.