W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust...
Transcript of W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust...
![Page 1: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/1.jpg)
Explore the SharePoint Framework
Mike AmmerlaanProduct Marketing Manager, Microsoft, USA@mikeammhttp://aka.ms/explorespfx
![Page 2: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/2.jpg)
![Page 3: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/3.jpg)
https://code.visualstudio.com/
https://nodejs.org/
npm install --global --production windows-build-tools
npm i -g yo gulp
npm i -g @microsoft/generator-sharepoint
![Page 4: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/4.jpg)
Sources:1. 451 Research, Hosting and Cloud Study, 2014
Full Trust CodePartial Trust Code
Microsoft Managed Solutions
Microsoft Online Services
App Model
![Page 5: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/5.jpg)
![Page 6: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/6.jpg)
![Page 7: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/7.jpg)
Modern PagesDemo
![Page 8: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/8.jpg)
![Page 9: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/9.jpg)
http://github.com/sharepoint http://dev.office.com/sharepoint
![Page 10: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/10.jpg)
![Page 11: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/11.jpg)
![Page 12: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/12.jpg)
![Page 13: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/13.jpg)
![Page 14: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/14.jpg)
Type/Interface API DescrpitoinIWebPartContext this.context Core context object.
Contains domElement, pageContext, e
HttpClient this.context.httpClient
Make Http Requests against SharePoint endpoints
PageContext this.context.pageContext
Access more information about the site, web, user
IClientSideWebPartStatusRenderer
this.context.statusRenderer
Methods for displaying errors
Environment this.context.environment.type
Contains an environment property now –whether we’re in debug/not
ServiceScope this.context.serviceScope
Provides a service registration pattern across parts
![Page 15: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/15.jpg)
https://code.visualstudio.com/
https://nodejs.org/
npm install --global --production windows-build-tools
npm i -g yo gulp
npm i -g @microsoft/generator-sharepoint
![Page 16: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/16.jpg)
Project Templates
IIS Express
![Page 17: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/17.jpg)
![Page 18: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/18.jpg)
What is TypeScript?
“TypeScript is a free and open source programming language developed and maintained by Microsoft. It is a strict superset of JavaScript, and adds optional static typing and class-based object-oriented programming to the language.” https://www.typescriptlang.org
• Strict superset of JavaScript• Transpiles to JavaScript
![Page 19: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/19.jpg)
Reasons for TypeScriptUseful for larger projects
• Strong (static) typing• Namespacing
Support a better experience in rich dev environments• Spot common errors as typing• Enable type ahead
Support new ECMAScript 6 features, yet compile to older ECMAScript targets such as 3
• Modules• Lambda functions• Classes• Spread operator
![Page 20: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/20.jpg)
Variable Declarationsvar and let
var x: number = 2;let y: number = 2;
• “var” and “let” very similar, but have different “scopes”
• “let” is block scoped
• “var” is functionally scoped
![Page 21: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/21.jpg)
Classes• Traditional JavaScript focuses on functions and prototype-based inheritance
• Provides basic means of building reusable components
• TypeScript provides “Class” structure more common to OO programmers• Often used with Interfaces
• Classes can implement Interfaces and extend other Classes
export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
public constructor(context: IWebPartContext) {super(context);
}}
![Page 22: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/22.jpg)
ModulesModules allow for exporting and importing blocks of code to larger blocks
export interface IListsService {getListNames(): string[];
}
export class MockListsService implements IListsService {constructor() {}public getListNames(): string[] {
return ["list 1", "list 2"];}
}
ListService.ts
import * as ListService from './ListService';
let dataService: new ListService.MockListsService();
let y: string[] = dataService.getListNames();
OurWebpart.ts
![Page 23: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/23.jpg)
![Page 24: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/24.jpg)
What is React?• User interface foundation for JS projects• Declaratively describe UX;
data-bind it to backing state;React automatically updates (reacts!) to state changes
![Page 25: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/25.jpg)
HTML-esque description of a user interface
A type that represents a user experience element
Underlying state object
A set of initial parameters to the React component
class ShoppingList extends React.Component { render() { return (
<div className="shopping-list"> <h1>Shopping List for {this.props.name}</h1> <ul>
<li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li>
</ul> </div> ); }
}
![Page 26: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/26.jpg)
What is React?• User interface foundation for JS projects• Declaratively describe UX;
data-bind it to backing state;React automatically updates (reacts!) to state changes
![Page 27: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/27.jpg)
HTML-esque description of a user interface
A type that represents a user experience element
Underlying state object
A set of initial parameters to the React component
class ShoppingList extends React.Component { render() { return (
<div className="shopping-list"> <h1>Shopping List for {this.props.name}</h1> <ul>
<li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li>
</ul> </div> ); }
}
![Page 28: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/28.jpg)
function formatName(user) {return user.firstName + ' ' + user.lastName;
}
const user = {firstName: 'Harper',lastName: 'Perez'
};
function getGreeting(user) { if (user) {
return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>;
}
<h1>Hello, {formatName(user)}!</h1>{formatName(user)}
Embed JS in markup
Embed markup straight in JSX files
![Page 29: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/29.jpg)
const element = ( <h1 className="greeting">
Hello, world! </h1>
);
const element = React.createElement('h1', {className: 'greeting'}, 'Hello, world!'
);
![Page 30: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/30.jpg)
Fonts, icons Colors
![Page 31: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/31.jpg)
Fabric ReactRobust, up-to-date components built with the React framework.
Fabric JSSimple, visuals-focused components that you can extend, rework, and build on.
ngFabricCommunity-driven project to build components for Angular-based apps.
Fabric iOSNative Swift colors, type ramp, and components for building iOS apps.
![Page 32: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/32.jpg)
![Page 33: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/33.jpg)
What is Gulp?
• A build/task system for automating tasks• Extensible through custom tasks
(though we’re working on SPFX task extensibility)
• It streams: continuously running; picks up changes
![Page 34: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/34.jpg)
Command Function
gulp build Builds the client side solution
gulp nuke (-> clean)
Cleans out build artifacts
gulp serve Compiles all scripts and runs them in the browser
gulp test Runs any unit tests associated with the solution
gulp package-solution Package a client-side solution into a package
gulp deploy-azure-storage
Deploy the resources to Azure Storage
![Page 35: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/35.jpg)
Visual Studio Code Settings (do not touch).vscode/config/node_modules/src/typings/.editorconfig.gitattributes.gitignore.yo-rc.jsonfacilities.njsprojgulpfile.jspackage.jsonreadme.mdtsconfig.json
SharePoint Framework ConfigurationNode Modules and Dependencies (do not touch) Your source code here TypeScript Typings (do not touch)General Editor Settings (Tabs vs. Spaces)Line Endings!Git File Type/Folders Yeoman Configuration and State Node JS Visual Studio ProjectGulp build steps and configurationProject Definitions and DependenciesReadme.mdTypeScript Configuration
![Page 36: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/36.jpg)
Facilities Core React Componentcomponents/proj.tsxloc/en-us.jsloc/mystrings.d.tstests/facilities.d.tsfacilities.module.scssfacilitieswebpart.tsf’webpart.manifest.jsonIF’WebPartProps.tstests.js
US StringsStrings TypeScript definitionsFacilities Tests definitionFacilities Sass definitionWeb Part Type and outer layerWeb Part Properties and DefinitionWeb Part Properties Type Structure definitionTests in JavaScript
![Page 37: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/37.jpg)
Extended Web Part DevelopmentDemo
![Page 38: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/38.jpg)
todo.spappPackage as an client-side solution
Developer
yo @microsoft/sharepointgulp –shipgulp bundle --shipgulp package-solution --shipgulp deploy-azure-storage
Available to
SharePoint Sites
Tenant Admin
Tenant App Catalog ApprovedDeliver the package to upload, trust and
deploy the package to
Install/Uninstall appSite Admin
Page AuthorsAddConfigure
Todo Web Part
End UsersInteract
![Page 39: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/39.jpg)
• Conceptual process – Checkout “JavaScript embed models” with add-in model implementations from PnP
• Learn used technologies – Web stack tooling
• Learn JavaScript Framework(s)
• Learn Office UI Fabric usage
![Page 40: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/40.jpg)
Code samplesGuidance documentationMonthly community callsCase Studies
ThemesSharePoint FrameworkSharePoint add-insRemote API models with SharePoint development
Sharing is caring…
http://aka.ms/SharePointPnP
![Page 42: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/42.jpg)
Questions?
Mike Ammerlaan@mikeammhttp://ammerlaan.us
![Page 43: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/43.jpg)
![Page 44: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/44.jpg)
![Page 45: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/45.jpg)
![Page 46: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/46.jpg)
Web Part DeploymentDemo
![Page 47: W25 - Explore the SharePoint Framework · 1. 451 Research, Hosting and Cloud Study, 2014 Full Trust Code](https://reader030.fdocuments.us/reader030/viewer/2022041104/5f04372c7e708231d40ce23e/html5/thumbnails/47.jpg)