SharePoint Saturday New York 2017 - SharePoint Framework, Angular and Azure Functions

SharePoint Framework,Angular & Azure Functions The modern SharePoint developer tool belt Sébastien Levert

ThankYou EVENT Sponsors • We appreciated you supporting the • NewYork SharePoint Community! • Diamond, Platinum, Gold, & Silver have tables scattered throughout • Please visit them and inquire about their products & services • To be eligible for prizes make sure to get your bingo card stamped by ALL sponsors • Raffle at the end of the day and you must be present to win!

EVAls / PRIZES • Bring all items to the 6th Info Desk • Bingo Cards = how you win prizes at the end of the event. • The cards must be stamped by ALL the Sponsors by the last session (4pm) • Fill out speakers evaluations (located in the front of the rooms • Fill out the event evaluations 27 in Curved Samsung Lenovo IdeaPad Name your game bundle

Hi! I’m Seb! @sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at

Angular… But which version ? • Works well with Angular 1.6 • Works OK with Angular 2 • Works awesome with Angular 4 (Did you just say Angular 4!?)

Is that even possible ? • Some are thinking it is mission impossible… But it is! And it’s much more simpler than you think. • You have the full power of Angular within you own SPFx webparts • Multiple webparts can exist in a page, including their own routing configuration

Introducing… The SPFx Angular Boilerplate (https://github.com/sebastienlevert/spfx-angular-boilerplate)

Dynamic Bootstrapping protected get rootComponentType(): any { return AppComponent; } protected get appDeclarationTypes(): any { return [ DialogComponent, SitesComponent, SitesHomeComponent, SitesFormComponent, SitesViewComponent ]; }

Dynamic Bootstrapping private _bootStrapModule(): void { var self = this; platformBrowserDynamic().bootstrapModule(self._getModule()).then( ngModuleRef => { self._component = self._app['_rootComponents'][0]['_component’]; self.updateChanges(); self._zone.run(() => { console.log('Outside Done!'); }); }, err => { console.log(err); } ); }

Dynamic Bootstrapping const AppModule1 = Reflect.decorate([ NgModule({ imports: [BrowserModule, FormsModule, HttpModule, routes], declarations: declarations, bootstrap: [component], exports: [RouterModule], providers: providers }), Reflect.metadata('design:paramtypes', [ApplicationRef, NgZone]) ], AppModule);

Routing const routes: Routes = [ { path: '', component: SitesComponent, children: [ { path: '', component: SitesHomeComponent }, { path: 'sites', children: [ { path: 'new', component: SitesFormComponent }, { path: ':id', component: SitesViewComponent } ]}, ]} ]; import { appRoutes } from "./app/app.routes" protected get routes(): any { return appRoutes; }

Global Configurations import { ConfigurationService } from "./app/services/ConfigurationService"; ConfigurationService { provide: APP_INITIALIZER, useFactory: (configurationService: ConfigurationService) => () => configurationService.load({ functionUrl: this.properties.functionUrl, functionKey: this.properties.functionKey, description: this.properties.description, styles: styles }), deps: [ConfigurationService], multi: true }

Mocking Data if (Environment.type === EnvironmentType.Local) { return [ { provide: SitesService, useClass: MockSitesService }, ]; } else if (Environment.type == EnvironmentType.SharePoint || Environment.type == EnvironmentType.ClassicSharePoint) { return [ { provide: SitesService, useClass: SitesService }, ]; }

Mocking Data export class MockSitesService implements ISitesService { public createSite(siteInformation: ISiteCreationInformation): Observable<ISiteCreationResponse> { return Observable.of<ISiteCreationResponse>({ description: `${siteInformation.description} (Mocked)`, email: `${siteInformation.url}@mocked.onmicrosoft.com`, id: "00000000-0000-0000-0000-000000000000", title: `${siteInformation.title} (Mocked)`, url: `#${siteInformation.url}` }).delay(2000); } }

Lessons learned • Never use any class or ids from the DOM. Always use theViewChild attribute. • You can use html templates using the require() approach.Try to do that, React! • When you have a strong AngularJS background, it feels just a little bit weird to move to Angular, but you will get used to it!

Why Azure Functions ? • Cheap way to host any API in Azure • You can use your favorite language • Super cheap to run • Perfect companion for any Single Page Application or any JavaScript component

Our scenario • Using the PnP PowerShell Cmdlets • Connecting to the Microsoft Graph and to an Azure AD Application • Creating a ModernTeam Site (in under 15 seconds) based on a set of parameters • Boom!

The full scenario • Build a SharePoint Framework WebPart • Use Angular as our main Framework • Include 3 routes (Home, New Site and Site Information) • Use Azure Function as my backend provisioning API • Use the Office UI Fabric components

What about the Office UI Fabric ? • Well…You have 2 choices : Build or Reuse • My choice ? Reuse ! • But Seb… It’s Angular, I can’t reuse what does not exist… • Well…The React components exist, just reuse them !

Resources • https://github.com/SharePoint/sp-dev-fx- webparts/tree/master/samples/angular2-prototype • https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework- overview • http://dev.office.com/fabric#/components

Samples • https://github.com/sebastienlevert/spfx-angular-poc • https://github.com/sebastienlevert/spfx-angular-boilerplate

Share your experience • Use hashtags to share your experience • #Office365Dev • #MicrosoftGraph • #AzureFunctions • #SPFx • Log issues & questions to the GitHub Repositories

Beer Authority 300 W 40h St [across the street] Join us for a round of drinks & some appetizers http://www.beerauthoritynyc.com

Thank you! @sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at

SharePoint Saturday New York 2017 - SharePoint Framework, Angular and Azure Functions

More Related Content

What's hot

Similar to SharePoint Saturday New York 2017 - SharePoint Framework, Angular and Azure Functions

More from Sébastien Levert

Recently uploaded

SharePoint Saturday New York 2017 - SharePoint Framework, Angular and Azure Functions