SharePoint Framework webinaari - Sulava · SharePoint Framework Johdanto Devaajan työasema...

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!