An Introduction to Development with the SharePoint

Framework (SPFx)

Rob Windsor
rob.windsor@gmail.com
@robwindsor





http://github.com/sharepoint http://dev.office.com/sharepoint
Project Templates


















public render(): void {
this.domElement.innerHTML = `
<div class="${styles.helloWorld}">
<div class="${styles.container}">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
<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/SharePoint/sp-dev-docs/wiki" class="ms-Button ${styles.button}">
<span class="ms-Button-label">Learn more</span>
</a>
</div>
</div>
</div>
</div>`;
}


private getLists(): Promise<ISPLists> {
let result: Promise<ISPLists>;

if (this.context.environment.type == EnvironmentType.Local) {
let listData: ISPLists = {
value: [
{ Title: "List 1", Id: "1" },
{ Title: "List 2", Id: "2" },
{ Title: "List 3", Id: "3" }
]
};

result = new Promise<ISPLists>((resolve) => {

resolve(listData);
});
} else {
let webUrl = this.context.pageContext.web.absoluteUrl;

result = this.context.httpClient.get(webUrl + "/_api/web/lists?$filter=(Hidden eq false)")

.then((response: Response) => {
return response.json();
});
}

return result;
}
public render(): void {
this.domElement.innerHTML = `...`;

let webPart: HelloWorldWebPart = this;

let button: Element = this.domElement.querySelector("#getListsButton");
button.addEventListener("click", () => { webPart.getListsButtonClickHandler(); });
}

private getListsButtonClickHandler(): void {

var call = this.getLists();
call.then((response) => {
this.renderLists(response);
});
}
export interface IHelloWorldWebPartProps {
description: string;
color: string;
}

protected get propertyPaneSettings(): IPropertyPaneSettings { {

return { "$schema": "../../../node_modules/@microsoft/sp-module-
pages: [ { interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifes
header: { description: strings.PropertyPaneDescription }, tSchema.json",
groups: [ {
groupName: strings.BasicGroupName, "id": "354f96a8-e60c-4046-8dd4-266b46e52b53",
groupFields: [ "componentType": "WebPart",
PropertyPaneTextField('description', { "version": "0.0.1",
label: strings.DescriptionFieldLabel "manifestVersion": 2,
}),
PropertyPaneDropdown("color", { "preconfiguredEntries": [{
label: "Color", "groupId": "354f96a8-e60c-4046-8dd4-266b46e52b53",
options: [ "group": { "default": "Under Development" },
{ key: "Red", text: "Red" }, "title": { "default": "HelloWorld" },
{ key: "Green", text: "Green" }, "description": { "default": "HelloWorld description" },
{ key: "Blue", text: "Blue" } "officeFabricIconFontName": "Page",
] "properties": {
}) "description": "HelloWorld",
]} "color": "Blue"
] } }
]}; }]
} }






























































