Upload
others
View
9
Download
0
Embed Size (px)
Citation preview
SharePoint Framework webinaariOlli Jääskeläinen
MVP, MCM, MCT
▪ SharePoint Framework▪ Johdanto
▪ Devaajan työasema
▪ Client-side webosat SharePoint Frameworkilla
▪ Keskustelua
Hyvää huomenta :)
JohdantoSharePoint Framework
SharePoint UX – Evolving cross versions
2009
SharePointServer 2010
2006
Office SharePointServer 2007
2003
SharePointPortal Server 2003
2001
SharePointPortal Server 2001
2012
SharePointServer 2013
2016 …
SharePointServer 2016, SPO
▪ Julkaistiin helmikuun lopussa 2017 – Client side web parts
▪ Saatavilla tällä hetkellä SharePoint Online / Office 365 –ryhmätkehitykseen
▪ Extensions on preiview vaiheessa
▪ Tulossa SharePoint Server 2016 Feature Pack 2:ssa on-premiintoivottavasti vielä tänä vuonna
SharePoint Framework
SharePoint Extensibility Principles
SharePoint Framework
Modern Site Pages
• Tooling• Node.js• Yeoman• Gulp• TypeScript• Visual Studio (Code)
• Frameworks – Choose yours• React• Angular.js• Knockout • Etc.
Typical tooling for SharePoint Framework
Open source tooling
IIS Express
Project Templates
Server side tool comparison
MSBuild C#
SharePoint Framework devaajan työasemaSharePoint Framework
•Linux
Install developer tools – NodeJS and npmNodeJS
homebrew
sudo npm install -g npm
npm install -g npm
Install developer tools – Code EditorsVisual Studio Code
Sublime
Atom
Webstorm
Not all these tools are required. Just install he ones you want to use.
•Yeoman helps you kick-start new projects
•SharePoint client-side development tools include a Yeoman generator for creating new web parts.
Install Yeoman and gulp
npm install -g yo gulp
•The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure.
Install Yeoman SharePoint generator
npm install -g @microsoft/generator-sharepoint
Client-side webosienrakentaminenSharePoint Framework
Client-side Web Part Build Flow
Demo$ yo @microsoft/sharepoint
$ gulp serve
Client-side webosa –projektinrakenne ja tärkeimmät tiedostotSharePoint Framework
Top level folders
• .vscode: includes Visual Studio Code integration files
• config: includes all config files
• dist: created automatically when you build the project – holds debug builds
• lib: created automatically when you build the project
• node_modules: this is created automatically when you build your project, it includes all the npm packages your solution relies upon and their dependencies
• src: this is the main folder of the project, it includes the web part, styles, and a test file
• temp: created automatically when you build your project – holds production builds
• typings: includes some type definition files. Most type definitions are installed in node_modules\@types
Project Structure
• Defines the main entry point for the web part
• Extends the BaseClientSideWebPart.
• All client-side webs part must extend the BaseClientSideWebPart class in order to be defined as a valid web part
import { IHelloWorldWebPartProps } from './IHelloWorldWebPartProps';
export default class HelloWorldWebPart extendsBaseClientSideWebPart<IHelloWorldWebPartProps>
{
// code omitted
}
Key Files – web part class
• Defines the interface for moving properties between different classes in the web part
export interface IHelloWorldWebPartProps {
description: string;
}
Key Files – web part properties class
• Defines the web part metadata• One entry in the preconfiguredEntries section is similar as classic .webpart file for server side web parts
{
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
"id": "318dd20d-0c02-4c3d-acc5-e2c0fa84cf3f",
"alias": "HelloWorldWebPart",
"componentType": "WebPart",
"version": "0.0.1",
"manifestVersion": 2,
"preconfiguredEntries": [{
"groupId": "318dd20d-0c02-4c3d-acc5-e2c0fa84cf3f",
"group": { "default": "Under Development" },
"title": { "default": "HelloWorld" },
"description": { "default": "HelloWorld description" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "HelloWorld"
}
}]
}
Key Files – web part manifest
• Defines the web part styles
.container {
max-width: 700px;
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {
padding: 20px;
}
.listItem {
max-width: 715px;
margin: 5px auto 5px auto;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
Key Files – SCSS file
• Defines the TypeScript typings for the web part styles
/* tslint:disable */
require('./HelloWorld.module.css');
const styles = {
helloWorld: 'helloWorld_68b3b0f6',
container: 'container_68b3b0f6',
row: 'row_68b3b0f6',
listItem: 'listItem_68b3b0f6',
button: 'button_68b3b0f6',
label: 'label_68b3b0f6',
};
export default styles;
/* tslint:enable */
Key Files – SCSS TypeScript file
• Contains information about your bundle(s), any external dependencies, localized resources
• Specifies the AMD script libraries used in the web part{
"entries": [
{
"entry": "./lib/webparts/helloWorld/HelloWorldWebPart.js",
"manifest": "./src/webparts/helloWorld/HelloWorldWebPart.manifest.json",
"outputPath": "./dist/hello-world.bundle.js"
}
],
"externals": {
“jquery": "node_modules/jquery/dist/jquery.min.js"
},
"localizedResources": {
"helloWorldStrings": "webparts/helloWorld/loc/{locale}.js"
}
}
Key Files – config file
DemoProjektin rakenne
Office UI Fabric ja Fabric ReactSharePoint Framework
Fabric and its sub-projects
Fabric React
Robust, up-to-date components built with the React framework.
Fabric JS
Simple, visuals-focused components that you can extend, rework, and build on.
ngFabric
Community-driven project to build components for Angular-based apps.
Fabric iOS
Native Swift colors, type ramp, and components for building iOS apps.
UIFabric.io
Install the Fabric React NPM packagenpm --save install office-ui-fabric-react
Import componentsimport {
Button,
ButtonType
} from 'office-ui-fabric-react';
Use components in Render methodpublic render(): JSX.Element {
return (
<Button buttonType={ ButtonType.primary }>ADD NEW ACTIVITY</Button>
How to use Office UI Fabric React components
DemoOffice UI Fabric ja Fabric React
Mock-data, SP-data + webosienkonfigurointiSharePoint Framework
Why use mock data?
•Local Workbench has no SharePoint context
•Use mock data to simulate SharePoint context
•Allows you to build the web part locally without even running in SharePoint• You can implement the UI behaviors even without accessing the SharePoint code
• It’s good practice to have mocked data for local workbench hosting
•Create a data model for the mock data
How to use mock data?
export interface ISPList {Title: string;Id: string;
}
•Create a MockHttpClient class• Import the data model into the MockHttpClient class
• Create an instance of the data model
• Populate the instance of the data model with mock data
• Create a method to return the mock data
How to use mock data?
import { ISPList } from './ISPList';
export default class MockHttpClient {
private static _items: ISPList[] = [{ Title: 'Mock List 1', Id: '1' },{ Title: 'Mock List 2', Id: '2' },
];
public static get(restUrl: string, options?: any): Promise<ISPList[]> {return new Promise<ISPList[]>((resolve) => {
resolve(MockHttpClient._items);});
}}
• Import the MockHttpClient class and data model into the web part class
• Create a method to invoke the method in the MockHttpClient and return the mock data
• Check the EnvironmentType to determine if the web part is running in the local environment
• Invoke the method to return the mock data
How to use mock data?
import MockHttpClient from './MockHttpClient';import { ISPList } from './ISPList';
private _getMockListData(): Promise<ISPList[]> {return MockHttpClient.get(this.context.pageContext.web.absoluteUrl)
.then((data: ISPList[]) => {return data;
});}
if (this.context.environment.type === EnvironmentType.Local) { this._getMockListData() }
• Import the data model into the web part class
• Create a method to return the mock data
• Use the SharePoint context SPHttpClient to call SharePoint REST APIs
How to talk to SharePoint
import { ISPList } from './ISPList';
private _getSharePointListData(): Promise<ISPList[]> {return this.context.
spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1).then(response => {
return response.json();}).then(json => {
return json.value}) as Promise<ISPList[]>;
}
• Check the EnvironmentType to determine if the web part is running in the local environment
• Invoke the method to return the mock data when running in the local environment
• Invoke the method to call the SharePoint REST API when not running in the local environment
How to co-exist with mock data
private _getListData(): Promise<ISPList[]> {if(Environment.type === EnvironmentType.Local) {return this._getMockListData();
}else {return this._getSharePointListData();
}}
The Property Pane: Overview
Implementing the header, groups, and fieldsprotected get getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {pages: [{header: {description: strings.PropertyPaneDescription
},groups: [{groupName: strings.BasicGroupName,groupFields: [PropertyPaneTextField('description', {label: strings.DescriptionFieldLabel
}),PropertyPaneLabel('labelField', {text: 'Label text'
}) ]
}]
}]
};}
DemoMock Data
SharePoint Data
Web Part Properties
- Miltä vaikuttaa? - Valmis oppimaan lisää? - Antakaa palauteta niin saatte materiaalithttps://fi.surveymonkey.com/r/SPFx-webinaari
Ilmoittaudu meidän SharePoint Framework –kurssille!https://www.onsight.fi/kurssit/sharepoint-framework-sovelluskehitys/ 28.8.2017, 23.10.2017
Keskustelua!