Skip to content

Instantly share code, notes, and snippets.

@chrisobriensp
Created May 21, 2016 14:56
Show Gist options
  • Select an option

  • Save chrisobriensp/79a44f2e8b794c9f51a2cfee20b8ffb1 to your computer and use it in GitHub Desktop.

Select an option

Save chrisobriensp/79a44f2e8b794c9f51a2cfee20b8ffb1 to your computer and use it in GitHub Desktop.
An example showing the default boilerplate code for a new client web part (from preview tooling).
import {
IWebPartData,
IWebPartContext,
IClientSideWebPart,
BaseClientSideWebPart,
DisplayMode,
IPropertyPanePage,
IPropertyPaneFieldType
} from '@ms/sp-client-platform';
import './CobLatestnewsWp.css';
import Strings from './CobLatestnewsWp.strings';
export interface ICobLatestnewsWpWebPartProps {
description: string
}
export class CobLatestnewsWpWebPart extends BaseClientSideWebPart<ICobLatestnewsWpWebPartProps> {
public constructor(context: IWebPartContext, loadedModules: { [moduleName: string]: any }){
super(context, loadedModules);
}
public render(mode: DisplayMode, data?: IWebPartData) {
this.domElement.innerHTML = `
<div class="CobLatestnewsWp">
<div class="Container">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white intro">
<div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
<span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
<p class="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
<p class="ms-font-l ms-fontColor-white">${this.properties.description}</p>
<a href="https://github.com/OfficeDev/SharePointUXFramework/wiki" class="ms-Button"><span class="ms-Button-label">Learn more</span></a>
</div>
</div>
</div>
</div>`;
}
protected get propertyPaneSettings(): IPropertyPanePage[] {
return [{
header: {
title: Strings.PropertyPaneHeader
},
groups: [
{
groupName: Strings.BasicGroupName,
groupFields: [
{
type: IPropertyPaneFieldType.TextBox,
targetProperty: 'description',
properties: {
label: Strings.DescriptionFieldLabel
}
}]
}]
}];
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment