Getting started with SharePoint Framework

Slides:



Advertisements
Similar presentations
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
Advertisements

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or.
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or.
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
Feature: Reprint Outstanding Transactions Report © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product.
Feature: Purchase Requisitions - Requester © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names.
MIX 09 4/15/ :14 PM © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
Feature: Payroll and HR Enhancements © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or.
Multitenant Model Request/Response General Model.
Feature: Purchase Order Prepayments II © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are.
Feature: OLE Notes Migration Utility
Feature: Web Client Keyboard Shortcuts © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are.
Session 1.
Built by Developers for Developers…. © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names.
Feature: Assign an Item to Multiple Sites © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names.
WinHEC /22/2017 © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or.
Feature: Print Remaining Documents © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or.
NEXT: Overview – Sharing skills & code.
demo Receive Inventory Export Parse and Normalize.
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or.
Feature: Document Attachment –Replace OLE Notes © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product.
Feature: Customer Combiner and Modifier © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are.
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or.
demo Instance AInstance B Read “7” Write “8”

customer.
demo © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names.
demo Demo.
Feature: Void Historical/Open Transaction Updates © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product.
demo QueryForeign KeyInstance /sm:body()/x:Order/x:Delivery/y:TrackingId1Z
Feature: Suggested Item Enhancements – Analysis and Assignment © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and.
projekt202 © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are.
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks.
© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or.
Demo Fest of Some Leading Store Apps Module 2.

Cloud Roadshow. Advanced Web Development using Angular with Office 365 APIs.
DataModel VisualizationExternal Assets Workbook Excel Services API BrowserRich Apps EWA JSOMBrowser REST BrowserRich Apps.
Create beautiful, fast, interactive pages in SharePoint
5/29/2018 1:32 PM Office UI Fabric behind the scenes: Open source Design & Engineering in Office Peter Jahn Senior UX Engineering Manager OneDrive & SharePoint.
Use Office UI Fabric React to Build Beauty with SharePoint
How to Build a Complete Office Add-in Solution
Use Office UI Fabric React to Build Beauty with SharePoint
Microsoft Dynamics NAV 2017
Advancing the SharePoint Developer Community (PnP)
Возможности Excel 2010, о которых следует знать
Microsoft Ignite NZ October 2016 SKYCITY, Auckland.
11/15/ :59 AM THR2294 Building great looking experiences with Microsoft Graph and Office UI Fabric Ben Summers Office Marketing David Lavenda Harmon.ie.
Title of Presentation 11/22/2018 3:34 PM
Working with different JavaScript frameworks and libraries
Getting started with SharePoint Framework
Title of Presentation 12/2/2018 3:48 PM
Excel Rest API Sudhi Ramamurthy Program Manager, Office Extensibility
File Picker for OneDrive and OneDrive for Business
All About Office UI Fabric
8/04/2019 9:13 PM © 2006 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
Microsoft Build /20/ :42 PM © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY,
Виктор Хаджийски Катедра “Металургия на желязото и металолеене”
PENSACOLA ENERGY WORK PLAN OCTOBER 10, 2016
Title of Presentation 5/12/ :53 PM
Шитманов Дархан Қаражанұлы Тарих пәнінің
The complete developer's guide to the SkyDrive API
Title of Presentation 5/24/2019 1:26 PM
5/24/2019 6:44 PM 1/8/18 Bell #10 In a world governed by the gods, is there any room for human will? Do human choices make a difference? EXPLAIN © 2007.
Using Smart Unit Tests to find bugs earlier in the development cycle
日本初公開!? Vista の新機能を実演 とっちゃん わんくま同盟 7/23/2019 9:09 AM
Title of Presentation 7/24/2019 8:53 PM
Presentation transcript:

Getting started with SharePoint Framework Office UI Fabric – React

Agenda What are the Office UI Fabric React Components? Available Components Getting Started How to use Office UI Fabric React Components Q&A

What are Office UI Fabric React Components? SharePoint What are Office UI Fabric React Components? Office UI Fabric Components built with the React framework. Built by Microsoft Reusable patterns Used in Office products All about styling instead of JavaScript http://dev.office.com/fabric#/components Fabric’s robust, up-to-date components are built with the React framework. Look through the component list to see the building blocks that are available using Fabric React. Reusable patterns Fabric’s components help you get buttons, navigation, and more that look like Office quickly and easily. They also contain extra functionality that helps your app act like Office too. Used in Office products Many Fabric React components are used in our products. We make improvements and bug fixes frequently, ensuring they work as designed across all of the supported browsers. https://github.com/OfficeDev/office-ui- fabric-react/blob/master/ghdocs/BROWSERSUPPORT.md After you’ve explored the components, get started. http://dev.office.com/fabric#/get-started © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Open Source The Office UI Fabric project is developed and maintained by the OneDrive and SharePoint Design Studio in order to... Help the development community build Office Add-ins and Office 365 web apps that integrate seamlessly with Office Provide a point of reference for the evolving Office 365 design language that anyone can reference Enable the community to contribute to better experiences for everyone who builds for Office

Fabric and its sub-projects 2/18/2019 10:20 PM Fabric and its sub-projects All depending on the Core, all open source Fabric Core Core elements of the design language including icons, colors, type, and the grid 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. Community built © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Monitor Releases and Contribute SharePoint Monitor Releases and Contribute Microsoft releases changes to the design language, components, and other assets frequently, and will make these updates available to the community. If features are deprecated MS notes that in the change log, and the feature will be removed from the next major release. Change Log https://github.com/OfficeDev/Office-UI-Fabric-React/releases Contribute In the GitHub Repository https://github.com/OfficeDev/Office-UI-Fabric-React © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Fabric components - overview 2/18/2019 10:20 PM Fabric components - overview Inputs Button, TextField, Dropdown, Checkbox Pickers DatePicker, PeoplePicker, TagPicker, DocumentPicker, ColorPicker Layout CommandBar, Dialog, ContextualMenu, Callout, Panel Components are the building blocks, appropriately responsive. Content and People List, Persona, FacePile Informational ProgressIndicator, Spinner, MessageBar © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Browse available components http://dev.office.com/fabric#/components

The Code Office UI Fabric Developer Site Get Started http://dev.office.com/fabric#/components Get Started http://dev.office.com/fabric#/get-started#react OpenSource GitHub Repository https://github.com/OfficeDev/Office-UI-Fabric-React

How to use Office UI Fabric React components SharePoint How to use Office UI Fabric React components 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> © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Using Type Styles and Icons SharePoint Using Type Styles and Icons 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', © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Combining custom styles with Office UI Fabric Styles SharePoint Combining custom styles with Office UI Fabric Styles .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)}> © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

DEMO Demonstration of using React components

Summary What are the Office UI Fabric React Components? SharePoint Summary What are the Office UI Fabric React Components? Available Components Getting Started How to use Office UI Fabric React Components Q&A © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Sharing is caring… http://aka.ms/SharePointPnP Code samples and solutions Reusable components Guidance documentation Monthly community calls SharePoint Framework SharePoint add-ins Microsoft Graph Office 365 APIs http://aka.ms/SharePointPnP

2/18/2019 Q&A © 2015 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2/18/2019 © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.