Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sharepoint framework nivel avanzado

354 views

Published on

sharepoint framework

Published in: Software
  • Be the first to comment

Sharepoint framework nivel avanzado

  1. 1. @levalencia - luisevalencia.com
  2. 2. SharePoint UX – Evolving cross versions 2009 SharePoint Server 2010 2006 Office SharePoint Server 2007 2003 SharePoint Portal Server 2003 2001 SharePoint Portal Server 2001 2012 SharePoint Server 2013 2016 … SharePoint Server 2016, SPO @levalencia - luisevalencia.com
  3. 3. @levalencia - luisevalencia.com
  4. 4. @levalencia - luisevalencia.com
  5. 5. @levalencia - luisevalencia.com
  6. 6. No In similar ways as with SharePoint Add-in model, server side development is needed for back end services SharePoint Framework concentrates on user interface, not on fundamentals around the API usage @levalencia - luisevalencia.com
  7. 7. @levalencia - luisevalencia.com
  8. 8. IIS Express Project Templates MSBuild C# @levalencia - luisevalencia.com
  9. 9. https://www.npmjs.com/ @levalencia - luisevalencia.com
  10. 10. http://yeoman.io @levalencia - luisevalencia.com
  11. 11. http://gulpjs.com/ @levalencia - luisevalencia.com
  12. 12. https://www.typescriptlang.org/ @levalencia - luisevalencia.com
  13. 13. Fonts, icons Colors @levalencia - luisevalencia.com
  14. 14. @levalencia - luisevalencia.com
  15. 15. @levalencia - luisevalencia.com
  16. 16. @levalencia - luisevalencia.com
  17. 17. https://www.eliostruyf.com/automate-publishing-of- your-sharepoint-framework-scripts-to-office-365- public-cdn/ @levalencia - luisevalencia.com
  18. 18. @levalencia - luisevalencia.com
  19. 19. @levalencia - luisevalencia.com
  20. 20. @levalencia - luisevalencia.com
  21. 21. @levalencia - luisevalencia.com
  22. 22. @levalencia - luisevalencia.com
  23. 23. @levalencia - luisevalencia.com
  24. 24. https://localhost https://<your-sharepoint-site>/_layouts/workbench.aspx @levalencia - luisevalencia.com
  25. 25. @levalencia - luisevalencia.com
  26. 26. import { IHelloWorldWebPartProps } from './IHelloWorldWebPartProps'; export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> { // code omitted } @levalencia - luisevalencia.com
  27. 27. export interface IHelloWorldWebPartProps { description: string; } @levalencia - luisevalencia.com
  28. 28. { "$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" } }] } @levalencia - luisevalencia.com
  29. 29. .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); } @levalencia - luisevalencia.com
  30. 30. /* 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 */ @levalencia - luisevalencia.com
  31. 31. • 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" } } @levalencia - luisevalencia.com
  32. 32. @levalencia - luisevalencia.com
  33. 33. @levalencia - luisevalencia.com
  34. 34. this.context.statusRenderer.displayLoadingIndicator(this.domElement, "message"); this.context.statusRenderer.clearLoadingIndicator(this.domElement); @levalencia - luisevalencia.com
  35. 35. this.context.statusRenderer.renderError(this.domElement, err); this.context.statusRenderer.clearError(this.domElement); @levalencia - luisevalencia.com
  36. 36. import { DisplayMode } from '@microsoft/sp-core-library'; const pageMode : string = this.displayMode === DisplayMode.Edit ? 'You are in edit mode' : 'You are in read mode'; <p class="ms-font-l ms-fontColor-white">${pageMode}</p> @levalencia - luisevalencia.com
  37. 37. @levalencia - luisevalencia.com
  38. 38. @levalencia - luisevalencia.com
  39. 39. <p class='ms-font-l ms-fontColor-white'> Loading from ${this.context.pageContext.web.title} </p> @levalencia - luisevalencia.com
  40. 40. web part in the SharePoint Workbench, a modern, or a classic page @levalencia - luisevalencia.com
  41. 41. import { EnvironmentType } from '@microsoft/sp-core-library'; const environmentType : string = EnvironmentType.Local ? 'You are in local environment' : 'You are in sharepoint environment'; <p class="ms-font-l ms-fontColor-white">${environmentType}</p> @levalencia - luisevalencia.com
  42. 42. @levalencia - luisevalencia.com
  43. 43. @levalencia - luisevalencia.com
  44. 44. import { Log } from '@microsoft/sp-client-base'; Log.info('HelloWorld', 'Info message', this.context.serviceScope); Log.warn('HelloWorld', 'Warn message', this.context.serviceScope); Log.error('HelloWorld', new Error('Error message'), this.context.serviceScope); Log.verbose('HelloWorld', 'Verbose message', this.context.serviceScope); @levalencia - luisevalencia.com
  45. 45. @levalencia - luisevalencia.com
  46. 46. @levalencia - luisevalencia.com
  47. 47. @levalencia - luisevalencia.com
  48. 48. export interface ISPList { Title: string; Id: string; } @levalencia - luisevalencia.com
  49. 49. 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); }); } } @levalencia - luisevalencia.com
  50. 50. 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() } @levalencia - luisevalencia.com
  51. 51. export interface ISPList { Title: string; Id: string; } @levalencia - luisevalencia.com
  52. 52. 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[]>; } @levalencia - luisevalencia.com
  53. 53. private _getListData(): Promise<ISPList[]> { if(Environment.type === EnvironmentType.Local) { return this._getMockListData(); } else { return this._getSharePointListData(); } } @levalencia - luisevalencia.com
  54. 54. @levalencia - luisevalencia.com
  55. 55. @levalencia - luisevalencia.com
  56. 56. @levalencia - luisevalencia.com
  57. 57. { "cdnBasePath": "<!-- PATH TO CDN -->" } @levalencia - luisevalencia.com
  58. 58. @levalencia - luisevalencia.com
  59. 59. @levalencia - luisevalencia.com
  60. 60. @levalencia - luisevalencia.com
  61. 61. https://publiccdn.sharepointonline.com/<TENANCY>.sharepoint.com/<your-CDN-origin-Id> { "cdnBasePath": "https://publiccdn.sharepointonline.com/<TENANCY>.sharepoint.com/<your-CDN-origin-Id>" } @levalencia - luisevalencia.com
  62. 62. @levalencia - luisevalencia.com
  63. 63. @levalencia - luisevalencia.com
  64. 64. @levalencia - luisevalencia.com
  65. 65. @levalencia - luisevalencia.com
  66. 66. @levalencia - luisevalencia.com
  67. 67. @levalencia - luisevalencia.com
  68. 68. @levalencia - luisevalencia.com
  69. 69. @levalencia - luisevalencia.com
  70. 70. @levalencia - luisevalencia.com
  71. 71. @levalencia - luisevalencia.com
  72. 72. @levalencia - luisevalencia.com
  73. 73. @levalencia - luisevalencia.com
  74. 74. @levalencia - luisevalencia.com
  75. 75. protected get getPropertyPaneConfiguration(): IPropertyPaneConfiguration { return { pages: [ { header: { description: strings.PropertyPaneDescription }, groups: [ { groupName: strings.BasicGroupName, groupFields: [ PropertyPaneTextField('description', { label: strings.DescriptionFieldLabel }), PropertyPaneLabel('labelField', { text: 'Label text' }) ] } ] } ] }; } @levalencia - luisevalencia.com
  76. 76. @levalencia - luisevalencia.com
  77. 77. @levalencia - luisevalencia.com
  78. 78. @levalencia - luisevalencia.com
  79. 79. @levalencia - luisevalencia.com
  80. 80. @levalencia - luisevalencia.com
  81. 81. { "$schema": "../../../node_modules/@microsoft/sp-module- interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json", "id": "b64ff4a0-5f1c-4cd9-b959-613a0a6d95c9", "alias": "HelloWorldWebPart", "componentType": "WebPart", "version": "0.0.1", "manifestVersion": 2, "preconfiguredEntries": [{ "groupId": "b64ff4a0-5f1c-4cd9-b959-613a0a6d95c9", "group": { "default": "Under Development" }, "title": { "default": "HelloWorld" }, "description": { "default": "HelloWorld description" }, "officeFabricIconFontName": "Page", "properties": { "description": "HelloWorld" } }] } @levalencia - luisevalencia.com
  82. 82. @levalencia - luisevalencia.com
  83. 83. public render(): void { const element: React.ReactElement<IHelloWorldWebPartProps> = React.createElement(HelloWorldComponent, { description: this.properties.description }); ReactDom.render(element, this.domElement); } @levalencia - luisevalencia.com
  84. 84. public componentDidMount(): void { this.doSomething(this.props.description); } public componentDidUpdate(prevProps: IHelloWorldWebPartProps, prevState: IHelloWorldWebPartState): void { if (this.props.description !== prevProps.description) { this.doSomething(this.props.description); } } private doSomething(description: string): void { // Do something with the property } @levalencia - luisevalencia.com
  85. 85. built with the React framework. • Reusable patterns • Used in Office products http://dev.office.com/fabric#/components @levalencia - luisevalencia.com
  86. 86. @levalencia - luisevalencia.com
  87. 87. 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. @levalencia - luisevalencia.com
  88. 88. https://github.com/OfficeDev/Office-UI-Fabric-React/releases https://github.com/OfficeDev/Office-UI-Fabric-React @levalencia - luisevalencia.com
  89. 89. @levalencia - luisevalencia.com
  90. 90. http://dev.office.com/fabric#/components @levalencia - luisevalencia.com
  91. 91. http://dev.office.com/fabric#/components http://dev.office.com/fabric#/get-started#react https://github.com/OfficeDev/Office-UI-Fabric-React @levalencia - luisevalencia.com
  92. 92. Install the Fabric React NPM package npm --save install office-ui-fabric-react Import components import { Button, ButtonType } from 'office-ui-fabric-react'; Use components in the Render method public render(): JSX.Element { return ( <Button buttonType={ ButtonType.primary }>ADD NEW ACTIVITY</Button> @levalencia - luisevalencia.com
  93. 93. Type Styles for text elements <span className="ms-fontColor-neutralDark ms-font-xxl ms-fontWeight- semibold">ACTIVITIES</span> Icons const contextualMenuItems: Array<IContextualMenuItem> = []; contextualMenuItems.push({ key: 'Sort', name: 'Sort', icon: 'sortLines', @levalencia - luisevalencia.com
  94. 94. .menubutton{ display: none; position: relative; border-width: 1px; border-style: solid; padding: 16px 20px; margin-bottom: 9px; } .menubutton > i{ position: absolute; right: 10px; top: 13px; } <div className={css("ms-fontColor-neutralSecondaryAlt ms-font-xl ms-fontWeight-semibold", styles.menubutton)}> @levalencia - luisevalencia.com

×