Created
May 21, 2016 14:56
-
-
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).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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