- Coding Videos/
- Angular /
- SharePoint Framework, Angular & Azure Function: The Modern SharePoint Developer Tool Belt
SharePoint Framework, Angular & Azure Function: The Modern SharePoint Developer Tool Belt

Download Video link >
SharePoint Framework, Angular & Azure Function: The Modern SharePoint Developer Tool Belt
Aiodex’s Referral Program will give you 20% -80% commission from their transaction fee for 7 years. The value will be calculated starting from the date the member you invite sign up.
☞ https://aiodex.com/?ref=5b45a599c7165734d36bb3fc
Get Free 15 Geek ☞ https://my.geekcash.io/ref/5b3c4924d38b6158ce04633f or http://geekcash.org/
How to Install Masternode for Geek Cash ☞ https://codequs.com/p/HyZO2Elg7
Angular 6 (formerly Angular 2) – The Complete Guide ☞ http://edusavecoupon.net/p/H1jE_tD3l
Learn and Understand AngularJS ☞ http://edusavecoupon.net/p/HJigQzgZx
Angular (Angular 2+) & NodeJS – The MEAN Stack Guide ☞ http://edusavecoupon.net/p/Skf7ILFw3l
Angular Fast Crash Course
☞ http://edusavecoupon.net/p/By3dH1G5M
Become a JavaScript developer – Learn (React, Node,Angular)
☞ http://edusavecoupon.net/p/HkSvnC-9G
70-534 70-535 Architecting Microsoft Azure Solutions
☞ http://edusavecoupon.net/p/rka0KAPA-
70-532 Developing Microsoft Azure Solutions Certification
☞ http://edusavecoupon.net/p/ryf3tRPAW
SharePoint 2013 Complete Training
☞ http://edusavecoupon.net/p/BkyogWpcb
Video source via: European SharePoint Conference
—————————————————-
Website: http://bit.ly/2pN2aXx
Playlist: http://bit.ly/2Eyn3dI
Website: http://bit.ly/2Hay229
Fanpage: http://bit.ly/2qi5j1A
Twitter: http://bit.ly/2GOyTlA
Pinterest: http://bit.ly/2qihWtz
Tumblr: http://bit.ly/2qjBcGo
source
View Comments source >
Transcript view all >
00:04 hello and welcome to today's European
00:07 SharePoint office 365 and Azure
00:09 community webinar
00:11 my name is Shane and I am delighted to
00:13 be joined by Sebastien levert who will
00:16 be talking to you about SharePoint
00:19 framework angular and Azure functions
00:22 the modern SharePoint developer tool
00:25 belt remember to join in the
00:29 conversation about today's webinar on
00:31 twitter our twitter handle is as
00:33 european SP and our hashtag is ESPC 18
00:40 want to be part of something truly
00:42 special speak and engage with 1700 plus
00:46 leading experts IT professionals
00:48 developers and business decision makers
00:50 at ESPC 18 Europe's premier SharePoint
00:54 office 365 and Azure conference taking
00:58 place in Copenhagen Denmark from the
01:01 26th to the 29th or November 2018 submit
01:05 to speak today after the webinar we will
01:10 have a questions and answer session type
01:13 any questions you have for sebastian in
01:15 the questions window some questions will
01:17 be selected and answered at the end of
01:20 the presentation this webinar will be
01:22 recorded and you will be notified by
01:25 email when it is available and now I'm
01:28 going to pass you over to our webinar
01:30 presenter Sebastian levert hello
01:33 Sebastian hello everyone good morning
01:38 good afternoon good evening wherever you
01:41 are on that planet I'm so happy today to
01:45 be able to do that session is that a
01:48 favorite of mine because I really love
01:52 those different topics SharePoint
01:54 framework angular and as your functions
01:57 so before we before we start I would
02:00 like me to introduce a bit myself so my
02:04 name is sub Sebastian
02:07 I am a productive Angeles and partner
02:09 manager at Valu intranet battle Internet
02:13 is a Internet in a box and digital
02:16 workplace
02:17 for office 365 and SharePoint if you
02:19 want to know more you can check us out
02:20 at bellow internet.com you can also
02:23 follow my blog on Sebastiana viacom and
02:27 maybe follow and engage with me on
02:29 twitter at sebastian alive today we have
02:33 a fairly simple agenda and I want to
02:38 make sure that we are focused mainly on
02:42 demos today so I want to show code I
02:45 want to show how although things are
02:48 working in a Shirin and Shepard
02:51 framework type of solution so we will
02:54 start by covering one of my favorite I
02:59 was a companion solutions to the
03:01 SharePoint framework which will be as
03:03 your functions how can we leverage as
03:05 your functions and why should we
03:07 leverage as your functions with our own
03:10 office 365 and SharePoint solutions as
03:13 our back-end strategy then we'll move on
03:16 to SharePoint framework and angular if
03:19 you've been around the SharePoint
03:21 framework environment for the last
03:22 couple of years you know that those
03:25 through those two big boys so a
03:28 SharePoint framework and angular are not
03:31 playing very nicely together but stuff
03:35 changed I think it's time to look back
03:38 and maybe have a new way of
03:40 understanding those two different
03:42 solutions and how we can mix be mixed
03:45 together that will be absolutely a great
03:48 thing so we'll cover that and then
03:50 afterwards we're gonna make it happen
03:52 we will build together a web part using
03:57 SharePoint framework and anger as our
04:00 front-end development framework that
04:04 will use the azure function that's we
04:06 would ask build a bit earlier and then
04:09 what will be your next steps for your
04:12 learnings and what will be where you can
04:15 find all this information so as your
04:18 functions if you're like me you're
04:21 coming you coming out of a SharePoint
04:24 developer background I've been working
04:27 for a long time
04:29 with SharePoint developing
04:30 solutions using server-side object model
04:35 client-side object model a ton of
04:37 different options a ton of different
04:40 solutions and were built mainly on the
04:43 server and then a couple of years ago we
04:46 were brought to that nice modern way
04:50 modern stack that is the SharePoint
04:53 framework we're all happy about it but
04:56 something that they were missing is that
04:58 background processing type of power that
05:02 does not exist anymore you can do a lot
05:06 of stuff in the browser but very secure
05:09 access to data or even jobs cannot run
05:14 in the browser you need to run somewhere
05:15 else and this is where I think in that
05:18 cloud world modern world
05:20 this becomes a masterpiece this becomes
05:25 really like the focus of our back-end
05:29 strategy so why as your functions so
05:34 first of all after functions is a part
05:35 of a sure it is a app service type of
05:39 offering that exists in Azure where you
05:41 can host any type of api's or any type
05:45 of code that runs in only in the cloud
05:48 you can actually now run either
05:49 functions on-premises using Azure stack
05:52 also first it is very very very cheap to
05:57 run other functions you can get from a
06:00 thousand or two thousand dollar type of
06:04 solution and you need to pay per month
06:07 to a very like a couple of dollars per
06:10 month because the way it is structured
06:12 the way it is architectured it is very
06:16 very very easy to run cheap solutions in
06:20 the cloud it is also cool because now
06:24 you know you don't only use the language
06:27 that we forced you to use but we kind of
06:31 require you to use any of your favorite
06:33 language so you can use JavaScript C
06:37 sharp F sharp PHP PowerShell even Python
06:42 and those languages are our
06:44 see the most popular languages today in
06:46 that cloud world so I think it makes a
06:48 lot of sense to maybe use javascript to
06:51 not only code JavaScript on the client
06:54 but also code JavaScript on the server
06:57 same thing for C char cuz probably
07:00 you're coming from a c-sharp background
07:02 so maybe it's more natural for you I'm
07:04 more of a powershell and lazy guy so i
07:07 will go today with partial but any of
07:09 those languages could be used it is the
07:12 perfect companion for any spa or
07:14 JavaScript component it doesn't need to
07:16 be inside office 365 or it doesn't need
07:20 to be inside the SharePoint framework
07:21 anything that would require an endpoint
07:24 to do something more specific or an API
07:27 that you don't have access to from the
07:29 client should be leveraged using Azure
07:32 functions today and now something that
07:35 is even more awesome is the fact that we
07:37 can elevate permissions in this it is so
07:40 much easier way that it becomes almost
07:43 too easy to use we can secure those API
07:47 to can elevate permissions within those
07:50 api's so it really makes if you remember
07:53 I do remember back in the days when
07:56 we're doing SharePoint stuff there was
07:58 one function that were always using what
08:02 was that function whose called run with
08:04 elevated privileges it meant that we
08:07 were running some of our code using the
08:10 wool application identity so kind of a
08:14 god inside our web application and our
08:17 in that case we could do anything can
08:19 creates like collections we could do
08:21 some farm setup we could be able to do
08:25 some configuration that's we were not
08:27 able to do using our regular code now in
08:30 the brand-new world of JavaScript
08:32 everything runs on there the user
08:34 context so those type of very very
08:37 specific actions that should not happen
08:39 all the time but that needs to happen at
08:41 some point arm is more difficult to
08:43 build and now using Azure functions to
08:46 elevate permissions because you can
08:48 actually run server code in Azure
08:51 functions makes it a lot easier so I
08:53 think that those are the reason why
08:54 either functions is so cool
08:58 today our scenario will be pretty simple
09:00 so we will all this session will be
09:04 about creating a site provisioning tool
09:06 with angular and as your function so
09:09 what we're gonna do we will leverage as
09:12 our function using the the PowerShell
09:14 type of solution it will then use the
09:19 pnp powershell commandlets so those
09:22 current lengths are part of the PNP
09:25 initiative by SharePoint where the
09:28 community is building a set of new
09:30 comment let's to help you play with the
09:33 Microsoft graph or play with sharepoint
09:35 online in a much more easier way and
09:37 we'll show you that we will connect to
09:39 the graph we will connect also to a
09:41 national AV application where we will
09:44 create a modern themed site in under 15
09:49 seconds or approximately the time it
09:50 takes to create those modern team sites
09:52 based on a set of parameters I'm pretty
09:56 sure this point you'll guess that those
09:58 parameters in a couple of minutes when
10:00 they go in 10 or 15 minutes we will send
10:04 them through our angular application so
10:07 we will invoke that actually function
10:10 with the set of parameters and then our
10:12 other function will execute that
10:15 creation of more insights and also we
10:18 will apply a provisioning template so we
10:21 one of the best feature of the ple
10:23 powershell or actually PNP Initiative
10:25 part of precise core is the fact that we
10:28 now have an a provisioning engine that
10:30 is available on there so we will
10:32 leverage it to create a modern team side
10:34 then afterwards we create a list a
10:36 couple of columns and then BOOM we're
10:39 gonna have our full solution ready so
10:41 let me show you actually what is at your
10:44 function before we go into any of those
10:46 details so let me show you that here so
10:51 here we are in adder let me go actually
10:54 go back to home I think it's gonna be a
10:55 lot easier um here you're gonna see here
10:59 a function app my function app is
11:02 actually an app service that runs it's
11:04 called Sebastian of our functions that
11:05 will host all of my
11:08 adder functions so this is a nap service
11:11 that is created by by Microsoft in Azure
11:15 for me and in that after this I have
11:18 three different applications one that
11:21 we're using and Vala one that is for
11:23 creating site collections of classic
11:25 cycle I shouldn't care one that we
11:26 create a modern theme site so let's go
11:29 check it out so when I click on my quit
11:35 Martin team site I will see a set of
11:38 different lines of code here so let me
11:41 walk you through all of that so first of
11:43 all we will import a module that module
11:47 will be the PNP powershell commandlets
11:50 so by loading that it means that my
11:52 powershell session that we have right
11:54 now will now have inside in memory all
11:58 the common let's available by the
12:00 powershell by the PMP powershell come in
12:02 line so it means that I will be able to
12:04 leverage all of the goodness that exists
12:07 right there if you don't know what the
12:09 PMP PowerShell ill is I will recommend
12:12 really to go to github and type in get
12:16 on that SharePoint /v + p - powershell
12:20 and here you will see all the different
12:24 documentation you will also be able to
12:25 go and releases and download the latest
12:28 bits it's available on SharePoint 2013
12:31 sharepoint 2016 and sharepoint online
12:33 and please make sure you download that
12:35 before because this is one of the best
12:37 tools that can you can use as part as
12:41 your daily work inside the office 365
12:44 world then afterwards we will do the
12:48 following here so here what we're gonna
12:50 do here we're gonna actually get the
12:53 content of their request so we will send
12:55 a JSON payload to that as your function
12:58 the way we would do it with any type of
13:00 API and in there we will actually get
13:03 the JSON version of it inside my request
13:06 body so it's just gonna get the pail
13:08 that I'm sending I'm gonna get a JSON
13:10 object from there hasn't it also created
13:13 me a PowerShell object that would be I
13:15 will be able to access very very easily
13:18 then afterwards once I get all that
13:21 information I know what who we might
13:23 parameter
13:24 we'll need to send my different
13:26 powershell commandlets but now i need to
13:29 connect i need to get a an
13:33 initialization of my connection to
13:35 office 365 and Azure ad so here I will
13:39 connect to the PNP Microsoft brass I
13:42 will connect to the Microsoft graph
13:43 because this is where we need and we
13:46 should create a group a modern theme
13:50 site that will automatically come with
13:51 the griot so here I will connect to the
13:53 Microsoft graph based on an app ID and
13:55 app secret that I already created to
13:57 that specific domain so in my case it's
14:00 gonna be my own eyes or tenant in that
14:03 case I will be connected I will keep an
14:06 active connection to my mark subgraph
14:08 meaning meaning that I will be able to
14:12 invoke some requests that will be
14:16 automatically effective authenticated by
14:19 the marks of wrath
14:21 and here that's the only comment I need
14:23 to run to create a new unified group or
14:25 a modern theme site in that case so
14:28 we'll run that new PNP unified group
14:30 comment let I will pass in a set of
14:33 parameters in that case it'll pass in a
14:35 display name I will pass in the
14:38 description I will pass in the mail
14:42 nickname which is actually the URL of my
14:44 of my site that I want to create I'm
14:49 gonna pass in who are the owners in that
14:50 case that's just that's a constant I've
14:54 here but it could be anything else I'm
14:57 gonna hit pass in if it's private and
14:59 I'm gonna force that request to happen
15:01 so you can see here that I'm using my
15:03 request buddy death title my request
15:05 buddy that description my request buddy
15:07 that URL those are all part of my JSON
15:11 fiddle that witch that was sent in by
15:13 the one that is requesting access to
15:16 this function so I'll just undo that and
15:20 if I have a template so if I specified a
15:23 PNP template I will actually go in here
15:27 get a secured password get a credentials
15:30 from my environment I will create I will
15:34 connect actually to my site using a
15:37 tenant URL /t
15:38 / the URL of my request buddy and I will
15:41 apply the PNP provisioning template to
15:44 that specific URL meaning here that I
15:47 will only need to do that to create a
15:50 customized version of a modern thing
15:52 site without anything else so very very
15:55 very easy for anyone to use and
15:57 afterwards I will just send that
15:59 information back I will create here a
16:01 simple object that will be used in my in
16:05 my in my caller to know what's the newly
16:10 created ID title description email and
16:13 URL of that site so I can get access to
16:16 it and I will then afterwards
16:19 automatically output this information to
16:23 my color so it's gonna be able to
16:25 leverage that so let's see what we can
16:28 do actually here I think here we can use
16:30 the test here so let's call it demo the
16:33 SPC - zero one and then I'll do the
16:39 exact same thing here demo ESPC - zero
16:43 one I will call it also same thing here
16:46 is PC Cintron I don't want that site to
16:49 be private
16:50 I want the template to be true so I want
16:53 to have a specific template so that's
16:57 absolutely good for me my template URL
17:01 will be the following so actually I will
17:03 do that here / I / lab so I'm gonna do
17:13 it right here I'm just gonna pose that
17:16 in here I think I don't need that I
17:18 don't think so and I will just the cool
17:23 thing about agile functions that you can
17:25 actually run it directly in the cloud
17:28 and that's just great so here you will
17:32 see that I will be running that right
17:36 here so I will run and automatically I
17:39 will see my logs coming in so I will run
17:42 it and you see here automatically that
17:45 window popped up and it says that that
17:47 that function is currently started so it
17:50 should run
17:51 to create anything it has to create it
17:54 will connect to the micrograph it will
17:56 quit in UPnP unified group and then
18:00 afterwards it will automatically apply
18:05 the template once this PNP unified group
18:08 was created and now I just saw that it's
18:11 actually printed that URL so let's go
18:14 see if it actually worked
18:16 so I'll go to my other role that is
18:17 already connected so let's say it was
18:20 demo - yes we see - your one slash team
18:26 sorry about that and now I just said I
18:29 just created that how quick was that it
18:31 was insanely quick I love it other
18:34 because it's quick and gives me an
18:36 instant feedback on what I'm doing and
18:37 now if I go back here it should be close
18:40 to be done so now let's give it a bit of
18:42 time here
18:43 now it says I'm done function completed
18:46 what did it do it actually applied a
18:49 provisioning template let's see what it
18:51 did so this is go to the site content
18:53 and I will see that in that brand new
18:56 site that I just created
18:57 I have something called fallow documents
19:00 final documents is our custom site our
19:04 custom list or got some document I read
19:07 that we just created I go in and I will
19:09 find a bunch of different columns in
19:13 here that are not regularly valid temple
19:15 tax whole template choice all template
19:18 number so the good thing about that is
19:20 that it is extremely easy takes a minute
19:22 and then you have a fully customized
19:24 version of your of your site collections
19:28 and modern theme sites and that's using
19:31 PowerShell that is fifty three lines of
19:35 code including way too many comments
19:37 from my end it is a great solution so
19:40 how do we actually come to a point where
19:43 we can create that it's very easy it's
19:45 good to function you can create a new
19:47 function right here you can go in a
19:50 experimental language support just
19:52 enable that type PowerShell in here off
19:57 PowerShell here so I can go in to create
20:00 an HTTP triggers that's gonna be
20:01 triggered by an HTTP call you can also
20:03 as a timer
20:04 trigger so we can run every three hours
20:08 every two minutes or whatever it can
20:09 also come from power bi or from a cue
20:12 directly so let's go
20:14 it should be right here I can create
20:18 it's gonna automatically create that new
20:20 function in here and now I can see
20:23 everything right there so means that if
20:26 I'm calling that here I'm gonna be able
20:29 to see a hello with the name if I pass
20:32 it they passing in that environment so
20:35 let me run that actually here I will go
20:40 and test and have a name that will be a
20:43 sure I will run that automatically this
20:46 function will start but I cannot see
20:48 what is happening so what we can do here
20:51 is use one of our good friend which is
20:53 called postman postman is a great tool
20:57 to test out multiple I'll just close dad
21:02 I will create a new here and I will just
21:06 go here and copy that URL that is the
21:08 URL so you can see here it's lesson
21:10 about that function - your website's at
21:12 that slash API slash
21:14 that plus a code the code is kind of a
21:16 security aspect it's not full secure as
21:19 if you give that code away pretty much
21:21 anyone can use that but you can also
21:23 secure it with using as your ad so I'd
21:26 let me go here put in my url in okay and
21:31 my buddy here I will be able to send
21:35 that here it's actually said oh I have
21:38 nothing hello nothing because I was not
21:41 able to actually put in that information
21:44 so if I was able to put my name I would
21:48 have seen the result coming back
21:51 directly from my from my environment so
21:53 that is really how this should and will
21:57 work for either functions and we'll use
22:01 that same strategy a bit later on in our
22:04 angular applications that means said I
22:10 want to discuss a bit about anger matter
22:14 we feel free to
22:16 ask any question do we lie pleasure to
22:20 help in in the end of this session so
22:22 feel free to put in any question I will
22:24 try to answer all of them so SharePoint
22:27 framework an angular so it's been a
22:29 while I've been trying to understand a
22:32 bit better than the integration of
22:34 SharePoint framework and angular but one
22:37 of the most requested question will be
22:39 which version of angular we know there's
22:41 a ton of them it wears very well with
22:46 angular 1.6 so if you're looking into
22:48 really going in production ready type of
22:51 solution right now I would advise to
22:53 stick to angular 1.6 because today it's
22:56 the only angular that really really
22:58 works without some experimental API is
23:02 very clean in the SharePoint frameworks
23:05 so this is still the recommended
23:07 approach angular 15.6 if you want to
23:11 move on to the brand new angular so
23:13 angular 1 points is it's actually called
23:15 angularjs if you want to use anger as
23:20 its current state you could a year ago
23:23 use angular 2 well it works if you're
23:28 only using one web part on any page but
23:31 if you want to use more than one web
23:33 part which will probably be your case
23:34 everything is just breaking apart so I
23:36 wouldn't have to commit at all to go
23:38 with angular 2
23:39 it works with some hacks in angular 4 so
23:44 it means that it is doable I have a set
23:48 of articles on my blog is called the
23:50 angular boilerplate that was retired but
23:53 still can be used if you want to use
23:56 angular 4 but today we're now up at
23:59 angular 5 and it even works better with
24:01 angular 5 because of something called
24:03 angular elements but I'll come back to
24:06 anger elements in a couple of seconds so
24:10 what was a challenge actually for a long
24:13 time was just not possible it was not
24:14 viable it was not suitable for any ship
24:17 with framework type of solutions it was
24:21 working so you were testing your stuff
24:22 and everything was working because
24:24 everything was in there you felt like a
24:27 god you were able to make angular
24:29 work directly with several framework so
24:33 you were working on your workbench
24:35 testing your one webpart
24:36 everything was good everyone was happy
24:38 they were shipping that piece of code to
24:41 your administrator and he was putting
24:44 that in the SharePoint app catalog and
24:46 then your users were starting to add
24:49 that Web part to a lot of pages in your
24:52 SharePoint environment it was working
24:54 well until it was not when someone added
24:59 a second instance of a web part or was
25:01 doing something more funky with his web
25:03 part all the pages was breaking not only
25:06 your angular web parts with all the page
25:08 it was not possible
25:10 they're just impossible because the way
25:12 angular works it needs to own the entire
25:15 the entire screen and that screen means
25:19 that if you own the screen everything
25:21 needs to work inside that and in
25:24 multiple instances of anger was
25:26 colliding with each other
25:27 anger is that made to be a composable
25:30 framework it's meant to be a full single
25:33 page application type of framework so
25:35 how can we manage that how can we push
25:39 that a bit further before we go any four
25:43 in any in any type of news now something
25:46 I don't really exist for a long time
25:48 it's called the web components web
25:50 components are standard and in the HTML
25:56 world that actually defines a component
26:00 or a little widget that comes with his
26:04 own logic its own UI Insull its own
26:07 templating and it's supported by a vast
26:11 majority of the browser's it's it's
26:13 coming even to more browser now Firefox
26:16 is working on it
26:17 Internet Explorer and AD are also
26:19 working on it to make those of
26:22 components a standard in there our
26:26 components are like super small what
26:29 part web component can be considered to
26:33 be one web part or one piece of a web
26:37 part the same way we act components are
26:39 actually are in the same way angular
26:41 applications with
26:42 all of its controllers and components
26:44 are also so what about we try to
26:50 leverage the web component that is
26:53 already something that exists and maybe
26:58 use angular to build those up components
27:02 so that means that angular becomes kind
27:05 of in the back end
27:07 and not in the front end anymore the
27:09 front end will be all built by web
27:11 components because web components are is
27:14 technology that is well established all
27:16 over the place so what can we do so
27:19 let's say we want to build a fence seed
27:22 a picker how many of you already built a
27:25 date picker I think I did that
27:26 probably 267 times in the past using a
27:31 ton of different technologies jQuery UI
27:34 or office to our fabric or Google
27:36 material or whatever but I want to build
27:40 a fancy date picker that I want to reuse
27:43 across my my organization but maybe I
27:45 want to use that as a web part maybe I
27:47 want to display a date picker as a web
27:49 part maybe have the best example but we
27:52 never know so what about I could do that
27:57 directly in my page or in my HTML I do
28:01 fancy date bigger well you're gonna tell
28:06 me
28:07 okay sab that looks awesome that's very
28:09 similar to what react is all about or
28:11 angular or it's all about but that is
28:14 not native to the browser the browser
28:17 doesn't know one thing about the fancy
28:20 date picker well that's not what the web
28:24 components are when the web components
28:27 are loaded in your page automatically it
28:30 registers you HTML Dom element so we
28:33 call them custom elements that has all
28:36 that definition in the backend so all
28:38 the logic all the JavaScript code
28:39 running in the backend and then that
28:42 means that fancy date picker can be used
28:44 anywhere like any other HTML elements
28:53 now
28:54 about angular web components why not
28:56 just create web components if you've
28:59 never seen a web component code like
29:02 that's awful it's very very complex
29:05 there's a ton of code that needs to be
29:07 written and you need to speak dumb you
29:12 need to speak the document object model
29:14 which is extremely performant that I
29:18 give you but it is a complex language I
29:21 don't want you to be to have to play
29:23 with all the events orchestrations and
29:25 all of that inside your own application
29:27 so what happened but even the angular
29:30 actually sat down and thought about
29:33 something and they actually showed it at
29:37 the latest ESPC what happened they
29:41 showed that ng hello world web part and
29:44 J meaning anger it means that we can now
29:49 use angular and angular elements to
29:54 build custom web components that will be
29:57 understood by all the different browsers
30:00 without the need of having all that very
30:03 very heavy load of angular in your
30:06 solutions meaning that now you can have
30:07 multiple web parts on the same page
30:09 multiple types of web parts using all
30:12 angular on the same page and yes
30:15 everyone it is happening we now have a
30:19 solution a pretty nice solution that
30:21 will make you much more performant with
30:28 angular inside your own SharePoint
30:30 framework solutions so what is actually
30:33 angular elements how did it came to life
30:37 well actually angular elements is a
30:39 project from angular labs angular Labs
30:43 is kind of the R&D branch of the angular
30:47 project they build new scenarios they
30:51 build new concepts that they will bring
30:54 back in the future to angular in the
30:57 main branch of angular angular elements
31:00 actually adds a new usage scenario of
31:02 angular to become more of a dev tool
31:05 than to be a framework so you
31:08 using angular to build and generate web
31:11 components rather than full-fledge spa
31:14 framework it is supporting the self
31:17 bootstrapping so you don't need to have
31:20 to host too old a grasp on the entire
31:26 page you just need to bootstrap that
31:29 specific small and tiny web component
31:33 that's it
31:34 zones are becoming optional meaning that
31:37 you don't need to rely on angular zones
31:40 aka this is key to the success of this
31:44 approach you don't need to have the
31:46 entire page at you control which is
31:49 awesome and then you generate your web
31:53 component from any type of angular
31:54 component so now we have kind of a
31:58 translation between angular to web
32:00 components and now what we're gonna do
32:03 today we're actually gonna make it
32:05 happen so the first scenario will be we
32:09 will build a SharePoint framework web
32:10 part so we're gonna start with the NGO
32:12 world I'm gonna walk you through all the
32:14 different things that needs to happen
32:16 before you can actually could will use
32:19 angular as our main framework
32:21 indle and the second demo we will use
32:24 angular material as are you our
32:26 framework so it means that any type of
32:28 components any type of open source
32:32 projects out there utilizing angular is
32:35 all valid inside the SharePoint
32:38 framework that is also and I will use
32:41 our previous answer function I was as
32:43 our back-end provisioning API let me
32:49 show you some code right now so here I
32:53 am I'll just zoom in for you guys here I
32:58 have a full project so here's my SPF x
33:01 ng hello world you can actually find all
33:05 of that on my home github so you can go
33:07 to github.com /st vessel of a slash SPF
33:13 X slash ng - webparts and you will find
33:17 the L world the material list a material
33:20 design type of
33:21 usage out too much data how to use
33:24 SharePoint REST API how to do some site
33:27 provisioning so everything I'm showing
33:28 today is all available on my github so
33:30 you can have a good feel of what is
33:33 happening right there and there are some
33:37 special things that need to come in mind
33:39 by the way I have a full series on my
33:42 blog on how to do that so you can start
33:45 from the first article and go through
33:47 each and every one of the articles to
33:48 make sure that you can actually learn a
33:50 bit more so first of all what's
33:52 happening first thing that needs to
33:55 happen you need to understand you need
33:56 to add some packages to your SharePoint
33:59 framework webpart so here are the
34:01 packages you need to add regular angular
34:06 packages here very very regular ones
34:09 angular animations coming to compiler
34:11 the CLI core elements path home browser
34:15 and platform server the only one that is
34:18 a bit tricky is this one right here why
34:20 well you can see it here we are using a
34:24 specific labs project meaning that it is
34:28 still a really sort of very early alpha
34:32 better version of angular elements so
34:35 this is the part that is still a bit
34:38 tricky it's not yet fully available up
34:40 there it's still not the ga version or
34:42 whatsoever but we can play with it which
34:45 is for me just good enough so that's the
34:49 first thing that needs to happen right
34:50 there pretty much you add angular
34:53 elements and all the angular pieces
34:56 that's pretty much it then afterwards we
34:59 need to do some tweaks - sorry about
35:02 that - our - our elements to our let our
35:07 elements but to our way of working when
35:13 we build our solutions so we need to
35:16 change a bit of how the gulp file
35:18 actually reacts basically what it does
35:22 it does the following the biggest thing
35:27 here is that instead of building our
35:29 typescript using just typescript
35:34 we're actually using our types trip file
35:37 using the web pack that is embedded
35:39 inside the angular framework what does
35:42 it mean well it means that now angular
35:46 is aware that you're building stuff so
35:48 angular can interject itself inside your
35:53 build process and then building your now
35:57 amazing web components using an angular
36:00 element so this is really really how
36:02 this is working
36:04 did you also say that I want to roll out
36:07 my HTML same thing for CSS something for
36:11 my s CSS
36:13 maybe I will be able to do some nice CSS
36:17 debugging and embedding with anger so
36:21 that's pretty much it that's the two
36:25 things and it's happening at a very
36:28 large scale so that needs to happen on
36:30 any type of new releases or new projects
36:34 that you're building with angular the
36:35 last thing this happen is in your kind
36:38 of thing that JSON you need to actually
36:41 add those two different files here
36:45 actually all those four different entry
36:48 points those needs to be specified
36:50 because they will be loaded inside your
36:53 angular web pack build process so it
36:57 will require the entry point manifest
36:59 the entry module and entry module name
37:01 that's who we'll use later so you need
37:03 to add those here usually it's a J's
37:05 file need to change that to be a TS file
37:07 besides that we nothing else needs to be
37:12 changed so what's left
37:13 well there's code that is left so once
37:16 you add your go file package of JSON in
37:19 that config file then you're ready to
37:22 start building your components so you go
37:25 to the web part and you build a hello
37:26 world weapon and then the L world web
37:31 part is just the following hello world
37:35 with a name with the regular SharePoint
37:39 frame word type of parameters that is
37:41 available in your panel and he'll work
37:45 that is ladies and gentlemen
37:48 a custom web component the L world
37:51 custom web component that has a name
37:53 attached to it what about I show you
37:57 actually what's happening so I'm gonna
38:00 go here I'm gonna do
38:01 gulp serve and I will open my browser
38:06 here so I can actually see it coming
38:09 away in 3 so I'm gonna build it
38:13 finally right now I'm using the local
38:16 workbench which is it which is
38:17 absolutely ok so it's gonna load as soon
38:21 as it's ready I will be able to go in
38:24 and see my own it's in reloading and see
38:26 my hello world right there and then I
38:30 will click on it
38:30 and then I see welcome to angular
38:33 elements in SharePoint customized
38:35 SharePoint experiences using webparts
38:37 using angular and it's all about the
38:40 angular angular ok so it's all about the
38:43 anger it's all about the angular baby so
38:47 here you see I have a full refresh of
38:51 that so by using a web components that
38:55 will get overridden every single time so
38:57 that means it's gonna be extremely
38:58 performant to use I one of the things
39:02 that was I was telling earlier is when I
39:05 was clicking on that second web part
39:06 everything would go boom oh here I have
39:10 two different web parts it sounds about
39:12 the angular magic so here we have two
39:16 different web parts that I can see in
39:18 preview mode and add all their own type
39:21 of configuration I'm very happy about it
39:24 this is exactly what I was expecting in
39:27 terms of anger integration and it's easy
39:29 so let's go see the code of how this web
39:35 component is actually generated so here
39:38 you see I'm using the web component ok
39:41 so what is happening actually where's
39:44 the magic happening well the magic is
39:45 happening right here I'm importing
39:48 elements I'm importing angular elements
39:52 also and I'm importing my actual element
39:55 which is my component which is used as
39:58 my type from my base side Weber
40:01 based client-side web part so first I'm
40:03 going to show you that elements here
40:06 which is the following it's actually
40:09 nothing it's very very empty in there so
40:13 very simple it's just an element module
40:15 just an empty module that we're
40:16 leveraging that will automatically
40:18 bundle everything for us we're also
40:21 leveraging the shim here so here if
40:23 you're using IE or ad or any other
40:27 browser that does not support web
40:28 components we will include automatically
40:31 to support of web component Derrick in
40:33 your browser so it means that even
40:35 though you're using an old-school
40:36 browser like IE or whatever you still
40:39 get angular elements in there so there's
40:41 no worries about over there by the way
40:43 this is the same one is being by the
40:46 polymer project polymer is also a
40:48 project by Google that is aimed at
40:51 providing web components also type of
40:55 framework so we're kind of very similar
40:58 to them and make sense that angular is
41:00 working with polymer for that and then
41:03 we have the last one the hello world so
41:05 let's go see what's in there so here you
41:08 see in my elements sorry about that my
41:11 elements here I have an index a hello
41:13 world the index is actually nothing to
41:15 say a registration of the rest I will
41:16 show you the afterwards I have a hello
41:18 world at TS and actually ask nothing I
41:22 have a selector that's gonna be the
41:23 sector I will use I will use that will
41:25 become my Dom element hello
41:27 - world I also use a template URL cause
41:31 I'm probably like you guys you don't
41:34 want use it you don't want to create
41:36 your JavaScript HTML all mixed up in the
41:39 same file for a long time I was being
41:41 told please do separate your concerns
41:44 please separate HTML from JavaScript
41:46 please do stuff yeah that's how angular
41:50 works it's at our reactors working I
41:51 would really prefer the window for
41:53 angular working and also have that s CSS
41:56 file so this is where I will define all
41:57 my styles for that specific hello world
42:00 application here I have my contract or
42:04 my interface we're gonna say have a name
42:06 and here have my module that will
42:08 automatically bootstrap and that's it
42:11 all the rest is taking care by taking
42:14 care of by my HTML
42:15 with my HTML I have here very very very
42:19 simple div class helloworld container
42:22 row column title here at my my dad and
42:26 here I have the regular templating
42:29 syntax of angular so hey I can do it's
42:31 all about the angular whatever the user
42:34 puts as the name variable that will be
42:37 automatically bound to my here to my
42:42 name here that will be automatically
42:45 transferred from my web component here
42:48 from the panel in my SharePoint
42:50 framework my part that's it and here I
42:54 have a ton of different artifacts here
42:57 to style it I changed my case I'm not
42:58 even stunning it but I could be able to
43:01 cite it I can also import part of parts
43:03 of the espy fabric core pretty cool and
43:06 that's the only code from my web part
43:09 that's it
43:10 the rest is on that index that TS that
43:15 exists at the elements for my hello
43:17 world component and here what it does it
43:20 influence of that and it does the
43:23 automatic bootstrap for me so I'm not
43:27 using ng zone reducing zone here I want
43:30 to register that as a custom elements
43:33 and this is the glue this is exactly
43:37 where everything is actually happening
43:39 and then afterwards when I build
43:42 automatically I will generate my energy
43:45 factory this is using a OT so ahead of
43:49 time compiling with angular meaning that
43:52 you will only have in your resulting
43:56 bundles and your web pack bundle when
43:57 you bundle your SharePoint framework
43:59 solution you will only have what you
44:01 need which is very cool so if you don't
44:04 use the if statement in angular inside
44:07 your templates you will not have the if
44:09 statement in your bundle which will
44:11 bring your bundle from like two
44:13 megabytes to 10 kilobytes which is
44:17 absolutely fine for a web pack bundle so
44:20 we're very excited about that
44:21 and then when we run it we have this
44:24 specific environment and works very well
44:28 but it is very simple that's a hello
44:30 world so let me show you something a bit
44:33 more I would say insightful for you guys
44:37 so I will go here and I will move to
44:40 another folder which will be my side
44:43 provisioning example and then this is
44:45 where we'll leverage our asura function
44:46 so let me go to code and that's gonna
44:51 open the code of that solution so I will
44:53 skip everything around I will close
44:56 everything actually here I will skip all
44:58 the packages and config cause it's
45:00 exactly the same
45:01 I will have my SCI provisioning web part
45:03 very similar approach the only
45:05 difference here is that I put it dynamic
45:08 in terms of tag name here so I'm gonna
45:10 render the tag name here using sorry
45:16 here using that here so I'm gonna get
45:18 the custom element and I'm gonna create
45:21 an app in the child right here bypassing
45:24 all the different things here the good
45:25 thing here is that I could pass in
45:27 complex object using this approach no
45:31 just strings literals if you're using
45:33 the regular printing of a web component
45:37 the issue is you cannot put in like a
45:40 JSON object in that case I might want to
45:42 use the JSON object so it might be
45:43 easier to use that and then I refer to
45:46 my side provisioning web part which is
45:48 my site provisioning that TS that exists
45:50 right here let's go see it
45:54 well here I have a lot more stuff a lot
45:57 more elements in there so I'm using a
46:00 lot of Matt so Matt a result all Matt
46:04 step method but those are all material
46:06 design component that I'm using in to
46:09 really really enhance my UI I'm
46:13 referring to my site provisioning HTML
46:15 to my site provisioning scss I am using
46:18 a provider so if you're used to
46:20 providers it's exactly the same things I
46:22 can have generic providers dynamic
46:25 providers mocking providers so very very
46:27 cool I have a full article on mocking in
46:29 my on my blog so if you want to check it
46:31 out it's it's great how it enables you
46:34 to code very quickly instead of having
46:37 access to the pager function or even
46:39 when you're in a plane you can use all
46:41 of that
46:42 um all my inputs of those will be the
46:44 one that will be provided by my custom
46:46 element so I will be able to refer to my
46:48 function URL function key in my
46:50 templates list ID and what I want to
46:54 really show you today is what is
46:56 happening so I will show you an example
46:58 actually of this solution working so let
47:01 me golf serve no browser because I don't
47:07 want that to pop in my local workbench I
47:09 will serve that element and I will
47:13 create everything I need to create and
47:17 using that so here its current currently
47:20 web packing so I will go here so I will
47:23 use my hosted workbench directly in my
47:26 office 365 tenant just want to make sure
47:28 here it's still packing so we're still
47:31 building here as soon as the building
47:34 part will be done we're gonna be ready
47:36 to to to push to push our code and there
47:43 we're ready everything is done then here
47:47 I will reload my workbench and I will
47:50 have that right here so let me show you
47:54 how this is actually working so here I
47:58 have the title of my office 65 group so
48:02 here I have my web part you see it I
48:03 have the title of my office 365 group
48:06 let's put it es pc e SP c Rox ESPC Rox
48:18 I will have my url ESPC Rox as you can
48:21 see this is not good SharePoint stuff or
48:24 office to buy fabric or whatsoever it's
48:26 really really really really the material
48:31 design very easy to configure all
48:33 different types of themes if you want
48:35 you can also make the things that your
48:36 office uses very fabric very cool and go
48:39 next to say I want that group to be
48:41 private or not
48:42 Nike start keep it public I want that to
48:44 have an Associated templates I will
48:46 select my template 0 1 I was already
48:50 connected guys here actually it you see
48:52 here I have my function URL our in there
48:55 my funk
48:56 in there and also my template repository
48:58 so it knows in which template repository
49:01 to go so I'll just put it back here
49:03 because I open it any ESPC rocks
49:07 yes PC rocks go to next here template
49:14 zero one I'm going next and here have a
49:16 nice recap before I complete so we'll
49:19 hit complete and what's gonna happen the
49:22 same exact thing is going to happen that
49:25 happened later on so here I'm connecting
49:30 to my office six five my as a function
49:32 is actually running and I can prove that
49:33 it's running because you will see here
49:35 that the log will actually pop in so it
49:38 should actually I should see in a couple
49:41 of seconds the fact that I will have a
49:46 new I'm not in it right in the right
49:50 function actually so if I go here you
49:53 will see that stuff is actually
49:55 happening in here it is quitting my
49:58 office 65 group it is applying my
50:00 different templates and as soon as this
50:04 is ready I will be provided with a brand
50:09 new site that I will come back later on
50:12 so you can jump to the code and I will
50:13 come later on to see if it actually
50:15 works so what happened well the thing
50:18 that happened is the following this is
50:19 what I really want to show you that's I
50:21 think the most impressive piece that
50:24 isn't there and that's that one when I
50:29 hit on that create site button it does
50:31 the following
50:32 it creates an object called a I site
50:35 creation info I'm getting all the
50:38 information from my form and because
50:41 we're using angular we can have what we
50:43 call the two-way data-binding so the
50:45 form the are formed text box is
50:48 automatically connected with my object
50:53 so here my group title of my group
50:54 description
50:55 everything works automatically temperate
50:57 you are L I open the dialog and in when
51:00 I open dialog I just call this site
51:02 service my site service will create a
51:04 site so let's go see what's that create
51:06 site here and here
51:09 I build my URL I like simply post to
51:14 that URL a JSON version our swing a 5
51:18 version sorry of my site information
51:20 that was passed in so I'm just doing a
51:23 simple HTTP post with the information
51:27 that I just created automatically my
51:29 address functions will work once it's
51:32 ready it's gonna be subscribed to it I'm
51:34 gonna say okay that was success close
51:39 the dialog and maybe move to our next
51:42 screen to show what just happened and if
51:46 I'm going back here I see here
51:48 congratulations
51:50 click on the following link to visit
51:52 your site I can click on ESPC rocks
51:55 right here and we used to here it's such
51:57 things as ESPC rocks I can go in my site
52:00 contents and see that again my valid
52:04 documents library was just created so
52:08 this is really how it is it is simple to
52:11 publish any type of environment and here
52:15 the good thing I want to show that here
52:19 it's cool because we're using actually
52:22 all the different math inform so if that
52:25 is really angular regular type of
52:27 application that we're using to build or
52:30 HTML and all of our form right in here
52:34 so how cool is that
52:36 I I really think that is an amazing
52:38 piece of software that is now available
52:42 to us directly in there and now that
52:48 this is done we were created that we
52:51 really accomplished what we wanted to do
52:52 today which was to play with a Azure
52:54 function as our back-end element create
52:56 an angular web part as a nano world
52:58 would also ask something that does a lot
53:00 more using external API is external
53:03 libraries so very very very cool stuff
53:07 but should you use it in production
53:09 that's a good question
53:13 today the this approach is the only
53:16 approach that works and will be the only
53:18 approach that works so should still use
53:20 it in production I really would not
53:23 silhouette for now as long as angular
53:26 elements are in preview I will hold any
53:28 prediction code you can start to
53:31 experiment though to learn and ship when
53:33 framework and how it's it's an angular
53:35 but please nothing around playing that
53:39 layers into productions so it will be
53:42 your next steps out of the resources I
53:44 showed today are in there there's one
53:47 thing I couldn't show today is the last
53:48 one which is a YouTube video go check it
53:50 out this is called the ng rad the
53:52 angular rap and just a funny thing about
53:56 angular so you can check this out
53:59 if they want to know more about what is
54:02 happening in the angular and office365
54:05 development space please feel free to
54:07 follow the following a hashtag so ash
54:09 like angular ashtag office365 dev ash
54:13 like marks of Wrath I just like astral
54:15 functions and ashtag SP FX this is where
54:17 you will get the latest and shiniest
54:19 from even from the team of Microsoft so
54:21 this is really really where you should
54:23 be looking at to know more about all of
54:26 that have any questions about my repo
54:29 about my code lung any issues in the
54:31 github repo I'd like to thank you so
54:34 much for sticking with me for this
54:36 entire time Shane do we have any
54:41 question it could be my pleasure to be
54:42 able to answer them at this point thanks
54:45 Sebastian for a great presentation yeah
54:46 we do have some questions and should you
54:48 wish to ask for busking any question
54:51 type it into the questions window okay
54:54 first question Sebastian when will angle
54:56 er elements be released as part of
54:59 angular okay so very good question so
55:01 angular elements is currently being
55:04 worked on it is not yet are ready so
55:08 they're expecting to ship angular
55:10 elements within the angular 5 time frame
55:13 which should bring us to the end of
55:15 March if not that's gonna be shipped to
55:18 angular 6 which should be before the end
55:20 of September so it's coming in the next
55:23 few months I would say great it looks
55:27 great but what will that work on will it
55:29 work on on-premise also good question it
55:35 is something that
55:37 we'll work on premises absolutely so
55:39 using the ship went to a sixteen or ship
55:41 when 2019 just make sure you're on
55:44 feature-packed to to actually have
55:46 access to the SharePoint framework there
55:49 are some different differences because
55:51 of the way the the packaging is done for
55:56 one point one for HR point front with
55:58 one point one compared to one point four
56:00 so that is something we're still working
56:02 on to make sure it's gonna work but it
56:04 will work in the end okay how have you
56:07 imported P and P module to function up
56:10 oh that's a good that's a good one so
56:14 you need to add your your you can import
56:19 directly in your function app your
56:22 common let's and your modules directly
56:25 in there so you can just use the file
56:27 explorer drag and drop of your files
56:29 right here in there and then in the end
56:31 you can just import the PSD one or the
56:34 PSM one the module file directly inside
56:39 your function and then it's gonna make
56:41 it available for all the for all the
56:43 session in partial okay
56:46 next questions wash about react support
56:48 oh it actually works alongside we
56:53 actually if you want to play with
56:55 angular and react is possible not sure
56:58 if i would do it but it is absolutely
57:02 possible the the exact same thing for a
57:05 sure function let's say you want to use
57:07 as your function at your back into a
57:09 react component that is a hundred
57:11 percent supported that is exactly the
57:13 same way you would do it with react or
57:17 with angular but it's really on the the
57:20 mix between angular and react this is
57:22 the part I'm not 100% sure where I would
57:24 do it but it is supported okay
57:27 after a way to do the same an SP 16
57:30 on-prem yes absolutely so that's the
57:33 same question earlier when you can maybe
57:35 like same thing with SP 16 on for
57:37 absolutely okay how would annular
57:40 elements work with reusable react
57:42 controls on github oh that's a good one
57:47 it would I
57:50 the word would add some dependencies
57:52 especially on the property controls are
57:54 done by Elio I would not see angular
57:59 take that responsibility and I would not
58:01 build them using angular angular is more
58:03 of a complex solution it's not a
58:05 component solution so if you're building
58:08 complex components I would stick to
58:10 angular if you're building more like
58:12 controls
58:14 I would probably more stick to react if
58:16 anything how comfortable you are but I
58:18 don't think the reusable controls will
58:20 leverage angular because just of a style
58:24 of coding they started with react I
58:25 think they should continue with react
58:27 also okay I can we insert JavaScript
58:31 code and new community side SharePoint
58:34 Online yes it is possible it's exactly
58:37 what I was doing actually here by
58:39 building a web part so there's two
58:41 different supported scenarios the web
58:43 parts and i/o like the one I showed
58:44 which is typescript or JavaScript that's
58:47 up to you and the extension so it's
58:49 SharePoint framework extension so you
58:51 can actually add it sure about a
58:52 framework extension that can run
58:54 JavaScript on the page so that is
58:57 something that those are the two real
59:00 supported scenarios for communication
59:02 sense okay what about using ng office UI
59:06 fabric it is so you can actually use the
59:15 office right fabric in there you can mix
59:18 the styles in there so that is
59:20 absolutely possible something with
59:22 Google material you can also use that so
59:25 it can actually be mixed together there
59:29 in there so you can leverage the theming
59:30 options of office 365 in the canisters
59:32 okay in a general way should I use SPF
59:36 x4 developed for develop enterprise
59:39 applications yes that's absolutely yes
59:43 specially if you're targeting SharePoint
59:46 to a 16 and shipment online I would not
59:48 hesitate to go to share a framework
59:51 especially if you're more into the web
59:52 part type of solutions and extensions
59:55 type of solutions there are some still
59:58 limitations that are the frameworks that
59:59 they've complete but yes absolutely
00:01 that's the best code quality you will be
00:04 able
00:04 to get using SharePoint framework
00:07 absolutely okay and just one more
00:09 question how can display elements of
00:12 lists
00:12 how can you display element of lists
00:15 with PHP oh so that might so inside
00:21 SharePoint that is not possible if you
00:23 want to do that using PHP in the azure
00:26 function though so you might want to use
00:28 PHP as a scripting language in Azure
00:30 functions then you would use the
00:32 SharePoint REST API is directly in there
00:36 there are some very very good examples
00:39 on the dev office.com on how to use PHP
00:43 to connect to SharePoint Online so I
00:45 would use that as a starting point and
00:48 then sky's the limit for you pregnant
00:51 sebastien thank you so much for your
00:53 time today we're pretty much out of time
00:54 for today so we're gonna leave it at us
00:56 and for everybody else thanks for
00:58 attending thanks everyone
01:01 okay brilliant so just let me come back
01:04 here okay so um that is it for today
01:13 join us for our next webinar on Tuesday
01:15 March 6th 2018 at 1:00 p.m. CET see
01:20 sharepoint europe calm forest / register
01:23 - four - webinars for further details
01:27 thank you all for attending and have a
01:29 great day
01:38 you
Leave a Reply