Microsoft 365 Community PnP Webcasts, 21 Aug 2016

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Webcast - Converting existing JS apps to SharePoint Framework

Description

In this PnP Web Cast we concentrated on high level steps around converting your existing JavaScript application to SharePoint Framework or to be hosted in SharePoint Framework. Web cast uses existing angular app as the sample to be converted to hosted as a client side web part in SharePoint Framework. Process is pretty similar regardless of the JavaScript framework which you are using. In this case we also only hook in the existing application to SharePoint Framework, without converting it to TypeScript, which would provide additional development time support, but is not a required step, like shown in the demo.

Notice. When this webcast was released SharePoint Framework were not yet available in Office 365 tenants. This recording was done using internal preview release of SharePoint Framework, so some details might be slightly changed by the time when SP Framework is released for first release tenants (summer 2016).

Presentation covers following topics:
- Transformation process for Angular apps
- Steps to migrate vanilla Angular Web Parts to SPFx Client Side Web Parts
- How to expose app configuration options using Client Side Web Part editor panel
- Web cast demo shows following details

Demonstration of the angular app hosted in script editor web part
Walk through of hosting angular app in Client Side Web Part
How to expose app configuration options in Client Side Web Part editor panel

Web cast presenters: Waldek Mastykarz, Vesa Juvonen

Presentation used in this web cast is available from http://docs.com/OfficeDevPnP.

Additional resources:
See following resources around the upcoming SharePoint Framework. We'll release more detailed documentation and step-by-step guidance when SharePoint Framework will be released for preview in first release tenants. This will happen during summer 2016.

- Open and Connected Framework - The SharePoint Framework - YouTube - https://www.youtube.com/watch?v=T_bGyqKwT4g
- PnP Webcast - Getting started with web stack in SharePoint Development - http://dev.office.com/blogs/getting-started-with-web-stack-in-sharepoint-development
- PnP Webcast - Getting started with SharePoint Framework - http://dev.office.com/blogs/getting-started-with-sharepoint-framework
- PnP Webcast - Preparing for SharePoint Framework - What should I learn? - http://dev.office.com/blogs/preparing-for-sharepoint-framework-what-should-i-learn

Thanks for your interest on the PnP initiative.

If you have any feedback or comments related on this web cast, please use the Office 365 Network at http://network.office.com to provider your input. Thx for your interest advance.

A

Welcome everybody: this is the Shepherd Patterson practices of webcast, essentially also known as the office 365 developer buttons and practices, and this time we're going to talk about something around the shipment framework, so we're using the SharePoint patterns and practices branding within the slides one more time today we're gonna talk about. How can you convert your existing JavaScript applications or apps to the SharePoint framework so obvious?

A

A lot of us have done implementations and applications already using javascript, and now that the shipment framework is coming out or has come out depending on when you're watching the video, how can you actually take those existing applications and make them to work together with SharePoint framework and implement them as a client-side web part? My name is Lisa. You wanna I'm, a Senior Program Manager in the shipment engineering site and with me today, as the main presenter is Waldeck mastercards who's, an MVP and javascript. We start in the title well, doctor.

A

We want to do a quick intros as well. Well,.

B

You've just told me so actually repeat you so hi everyone. My name is oliver steakhouse I am MEP this time around I am JavaScript with his art and I work as a developer, rancour.

A

Excellent and Baltic is one of those guys have been doing JavaScript and development for a longer time and specialized on the untangle are startin and react and SharePoint framework as well, but anyway, let's actually get on going with the presentation and deep dive on the on the things. We're gonna spend quite a lot of time in the in the code today.

A

So while there's kind of walk through us on a X and a real example on an angular and how that's it's, then getting hosted or converted as a ship on framework application or ship on Cramer client web part, and but before we actually gets done it just to verify that everybody gets its aware of this sharepoint patterns and practices is essentially a nickname or a second name for office, 365, developer buttons and practices, akms office, def, B&B or sharepoint BMP. They they actually both land.

A

On the same location, we provide code samples, guidance document monthly community calls where we culture. What has happened within the previous month and case studies as well? The themes are obviously on a SharePoint framework and the SharePoint add-ins, but also Microsoft graph or 365 API is in general and remote provisioning and clients are developed and is the future direction more and more within the SharePoint site, but check out the URL and to get access on on all of the other webcasts and videos and guidances and samples around to SharePoint development as an example cool.

A

But let's actually get started on today's topic, so I'll, let valdek elite at the presentation or the to talk and I'll start asking question whenever suitable on the on the topics what has being covered. So, let's get on going Thank, You, baalbek, yep,.

B

So over the last few years, we've been already developing angular applications and that can be from as small as a single part on a page to complete single page apps, with multiple routes and views and over the last few months, I've heard quite a few folks wondering so. If they have built anything in the past, will they be be able to to migrate that to the same work and everything else that will become available in this which are or not? Will they need to rebuild all of that from scratch?

B

The great news is, you can actually quite easily migrate everything that you have built in the past to the sharpen framework, and we will illustrate illustrate that in doing this webcast using a simple angular, pepper and the approach that we have in mind for this is that, although, ideally, you would rewrite all of the code to make the best use of the available tools, but we realize that that might not be the real-life approach. So instead we will show you the least effort approach to migrate.

B

Your existing angular web part to the SharePoint framework and we will use two-step approach for that. So first we will migrate the code as is, and the next we'll show you. How can you integrate with the SharePoint framework to actually make use of the new web API few.

A

Things to kind of an add-on on the discussion, obviously, in this case we're going to use an angular as the example, but just as well, it might be something what you implemented, using knockout or or reactant, and so on. So that's not really anything specific for angular right well, dick! Yes,.

B

That's correct and, and everything is that's exactly- the same approach applies to whether you would use knockout handlebars react, angular or anything else right. You would first move your code, get it to work on the SharePoint framework, and once it does, you would actually take the next step to integrate that with the new API. Yes, and that's.

A

Actually, that's a nice kind of a crotchal way of doing that. So as long as you get the application first to work within the shipment framework, even though it hasn't been, let's say, transform to pay typescript or whatever, because you can run a typical JavaScript out there as well, and then you can think about the the investments on on how much do you want to spend time on converting your existing application to native SharePoint framework functionalities, yep.

B

Absolutely so with that, let us show you what we have built, what we will use as a demo apart to illustrate to illustrate you, the migration process for vanilla, angular applications into SharePoint framework webparts move over to the browser. Here. You can see a very simplistic to do web part that is based on a task list. So here you can see some items and we can really easily add some some some additional tasks like show demo web part, and we can really quickly add it to the list when it's done.

B

We can pick it as a done. If we do it too fast, we could I'm ticket so that that is an easy effort that we have built with angular and we embedded that on an classic team site we use for that. A script editor web part and if we go to the page, if we added that you'll actually be able to see that all of that is done as a angular template or an app that we've embedded directly on the page. So here you see that we load angular from CDN.

B

We also use Energy, Office, UI fabric directives for easy implementing of his wife fabric and angular. We also load the office life fabrics CSS and then we basically and that directly on the page, our angular template and we load some additional files and we'll strap the app so.

A

We commented at the notice on this one, so this is just a con or reinforce the message. This is actually using the script editor web part not a. This is not an app script. Sorry, this is not an apart using an iframe, because those things do not scale that well in the responsive device within the response of us- and this is actually quite more and more people are using this kind of an options already today within the SharePoint Online and in on-prem absolutely.

B

Going to show you how to migrate that into a new SharePoint framework that part that that looks exactly like that in the SharePoint workbench. So before we die. Let me just quickly show you the code of this angular part, so that you can get a better overview like what it owns it ins this solves, so here is our HTML, which is which basically isn't something else. The links to angular ng office UI fabric CSS, then, is our template. This web part has only one route, one template so there.

B

So it's not that big, and then we also load the module configs data service and controller which are here so the module does nothing else than to instantiate the angular app and load ng office UI fabric into that which we see here in line five and six, then we also have config where we specify URL of the API to our site, so the web production is placed on a sub-site called tooten to do, there's also a tasks list that we have added called to do, and we have that name here and the also in our option that allow us to control whether we want to show tasks that are done or not on a screen.

B

So we can change that between true and false and with that control, how the web part shows the data. Then we also have data service that we use to interact with the SharePoint API to get the data and and updated, and there is also our controller that we use to control the page and to actually interact between the data and the model.

B

So with that, let's start migrating that to a new client side web part based on a SharePoint framework. So the first thing that we do is to create a new project. So here let's create a new folder called SP P and P 16 and CD into it, and then we will call the yeoman generator and so currently I'm I'm doing that, based on the pre-release version of the tools, and it could be dead by the time that that will ship that command will change.

B

But but basically the basic status step is here to create a new project. So we call yo, add ms sharepoint: we create a new project, the yeoman generator will run. We don't want to change the name so we'll just stick with the SV PMP 16, and here you see additional prompt that you won't see when the tools are available. Let me do some.

A

Additional settings and adjustments in the preview of release of this one- and this will look slightly different when stuff is getting released, fully released, but will absolutely make a may make a proper messaging around that so that people know how to get started, and we do have a simple videos at that time available as well. In.

B

Them done and because we'll be migrating a client-side web part, let's choose to actually add that to our project and let's call that s SP, P and P. To do we want at an the description and we don't want to use any JavaScript anymore and with that we are done so, but before we start Mike eating ledges have a quick look at what we've got yet created so because I have already proposed her open I. Don't want to open it from here.

B

I did this one want to start the workbench and be able to see what I have in there? So let me refresh this page and I will start developer tools just to ensure that there is no cache so I disabled cache. Let me remove this webpart refresh the page and add it to the page. So here you can see our SP PMP to the web part, and if we edit it, we can see that it's working, because if we change any tax, you can see that appear didn't correctly here on the screen. So.

A

Just a quick clarification on that one. If somebody is actually kind of looking into the URL and saying hey, that's not a localhost. What are you actually showing so the JavaScript itself, which is now hosted or running in the localhost, is actually being shown in the context of SharePoint Chevron, hosted SharePoint workbench, just kind of horrified. Yes,.

B

Why we did that? We did that to actually be able to interact with SharePoint REST API yeah.

A

Right we have the contacts, we can actually access the SharePoint, because we have also the permissions and the tokens to do that. While we are in the context of SharePoint. Yes,.

B

Exactly so with that, you can see that we have baseline, that we can now use to migrate the webparts. So let's close this one and let's cancel this and let's open actually the folder, where our project is located, let's move it to the right and then let's go to our angular web part that we had. Let's open that false older it as well, and the first thing that we will do is to copy all files of our app into the new SharePoint framework client-side web app part, and what that migration is done. Not really.

A

Doesn't quite look like a Windows, File, Explorer or Bursa. The process is exactly the same, even though it doesn't matter if you're using a Mac or Apple, or we.

B

A

We'll work exactly the same. Yes exactly yes, yes,.

B

That's correct so now let me open the coded editor and to actually be able to edit our project. So as I've told you first, the web part that we've build the loves, angular and Energy Office do I've ever it from CDN. So let's do that as a first step. Let's add that to the configuration of our head part, and we do that in the manifest. So here we can add another property called three load modules and, as we've said, all that is based on the pre-release version of the tools.

B

It could be that by design they ship, these commands will change right. But but what we want to do here is to add a list of modules and scripts that we want to load before the web part. So here we add angular and we add ng office UI fabric and, as you can imagine, we are not done with that, because we only specify the names, but we didn't specify any path. So we do that by adding additional property called config, and here we first specify paths so with path.

B

We use, for example, the identifier of angular, and we say dear SharePoint framework you can grab angular from this URL. Let me get the CDN URLs that I have here so here I have the CDN URL for angular and let me do exactly the same for ng office. You are fabric and it's really important that these names match, because otherwise SharePoint rare homework will not be able to load load your script.

B

So let's do do that in general. This is the moment when we would be done, however, oh yeah, and we need to change it to 1.5 5.5, because ng office, you, like a break you realize on angular one point: five point: five anyway, as I said: there's one more thing that we have to do and it has to do with the fact that angular is not unusual. It's just a Lowell script.

B

So with that, in order for that to load, we actually have to specify additional property, and that's the thing that you will have to do for all JavaScript scripts that are not model modules, so like jQuery, jQuery, widgets, plugins, angular, UI stuff.

B

All of that that- and the thing is that that might change, but whenever you see that you cannot load additional script there, the odds are high, that it has to be set up as a mobile script and the way you do that is a bit different because you use the URL and then for that URL you have to set two properties. So first one is format global and then you also have to say exports angular. So with that that will be the variable available to other scripts in your part.

B

So with that, we are good to go, and now whenever we love the web part we'll get these two additional scripts. So the next part is actually to do something about the files that we've added here right. So we can actually include them here within the web part, and there are in theory there are two ways in which you could do it. So the one is to do it here.

B

So here you would say: import app and here we'll say F, modulo, GS and in theory that would work, except for the fact that we use that data module. Here is a self invoking function that already depends on angular and because we will load angular from CDN. It could be the case that it takes a little longer to load and it would come in too late for this script, so it would throw an error that it does not know what angular is so in order to work around that.

B

Another approach that we can use is to go here to the body and here we say require app app module dodge yes, so the net effect is exactly the same. We will run the contents of this script and, as I said, is a self invoking function. So there is nothing else for us to do, except to include the contents of this page, because, whatever it's parsed, it will already run right. So that's how we can do it and because we are in in the render function. Angular is available by that time right.

B

So we can include all of that here. So let's do that for app module app config. What else do we have there? We have the data service and we have home controller. So in your anger application, you would do this for all scripts that you want to load up front right if you would have angular and you would like to load scripts on on the man.

B

You would do all of that in angular, but this is for scripts that you want to do up front and, as you can see here, there is, it seems like I've. Script does not know require require in this case comes from wet-vac and it's there and it would work. But that way we would keep having this error so one way to work around that is to install piping's for nodejs.

B

So we can do that by going here and saying TSD install node safe. So that way we will get some additional piping's for I script and when we now modify the file the error is gone. Nothing has changed how this works. This require function does not come from node. It comes from wet web pack, but that is an easy way to trick typescript and to tell it everything's all right. There is no need for you to worry so with that. The next step is to include our template here right.

B

So let's replace this with the HTML template of our angular application, wheat, which we had here. So let me just quickly change screens go to index.html, and here is the container that we use. So let me copy all of that. Let me switch back and replace this like we just formatted here alright. So now we have our angular template directly in a page. So the last thing for us to do this to actually bootstrap the angular app, and we do that by saying let angular Annie.

B

Currently we don't care about that hi pings and we can get yet the reference from the loadable modules variable passed into the constructor or actually the instance variable of this web app or class. And here we can use exactly the same name that we use in our preload modules here. So because we use this name.

B

That's exactly the same name that we can use here to get instance of angular and then what we have to do is we say angular bootstrap, and then we pass the the element, which is the dump element, which is the HTML element that we have here and we pass the name of our app one thing: the chance to keep in mind is that render function that you see here runs every single time. You change config of your web part right.

B

So every single time you change, property or settings value or or anything the web part will render, and one thing that you might know about angular is that you bootstrap your app only once so. In order for that, for this code not to run every single time, what you can do is you can make use of the rendered ones property which is available within the web part and then, when it's already done when it run this code. Initially that will equal true. So we convey basically skip that.

B

So with that we should be good to go. We have included our files, we have included the module configs data service controller. We have included template, we have our app and we love angular and ng office UI fabric from CDN. So let's just say that and let's check if everything is run. So, let's just clear this one and then we will say: gulp serve no browser which will basically build our app run it on an local web server so that we will be able to to the page.

B

And the one thing that you have to keep in mind is that the manifest of the web part as well as the world bench, but also its heavily cached. So it could be that in some scenarios you won't immediately say or see the less changes that you have applied to the code. In that case it always helps to reload the page refresh the page and then add the web part and based on that, we are getting an error.

B

Error, it does not to do that, actually call it to do. Yes, it's called to do app not to do sorry, mayor, Goodway,.

A

It's actually cute that there's always an exception. Yes,.

B

There's always exception in demos exactly why.

A

Be sign within the webcast in this highly scripted webcast mode, exactly.

B

And that's actually proved out. Yes, we do understand the code that we write so with that you can see now that's there, but there are actually there are two things that don't really match.

B

So the first that you see is that, while it seems styled, there are bullets here that we didn't see before right, and that has to do with the fact that the pre-release version of chevron, rule workbench uses an older version of office UI fabric in which you had to style a list with a div and not with UL and Li, which we use here. So there are two ways in which we could go around that, or there are actually three ways.

B

Would you change our code to this, which is we, which is what we don't want to do, because we don't want to change our app another. One is would be to raise an issue to Microsoft.

A

Which is ferrous well.

B

Yeah sure, but how about we actually include our own version of office UI fabric to prove how XML all of that is, and it actually offers you a full control of what you want to use yeah. So with that, let's actually do this. Well. First, let's install office UI fabric in the project. So let's stop that and let's say NPM I, which is install office UI fabric s, which means safe. So we will save office. You like fabric as a dependency in our project, and that should be done by the moment. Now.

B

It's really really fast on the Mac.

A

B

Interesting that.

A

It's it's must typically, this are faster in Mac than they are in Windows I. Don't know why? Yes,.

B

Yes and I have no idea why either, but it's just the thing that I've seen Mac.

A

Would be actually faster than Windows because that's not what it implies, but.

B

So let's now include office UI fabric CSS in our project, so we do that by saying import, and then we say this and believe me: that's the right path office, not modules of this UI fabric, this CSS fabric of CSS, and we need to do this twice because we need to CSS and we need components, fabric, dot, min that CSS and fabric up components, but min- and this path is exactly the pad that you can see here.

B

So, on the left hand, sides we go to node modules, we scroll all the way down through all the packages that we have in our project and we go to office UI fabric, this CSS, and here we have a buret min dot, CSS and fabric components min. So all of that and with that we should have the latest version of Office. You I've ever it available right. So let's try and see. If that will build golf bumble and three two one whoa. What happened error if scroll all the way up, we will see error.

B

We will see that wet, wet, wet back, does not know how to parse the star comment in CSS. So does that mean that we cannot add that CSS in our pet parts or how do we have to go around that? Well, it turns out that what web pack is really flexible and it knows the concept of odors that you can use to embed additional types of files within your bundles, so for CSS it has two of them.

B

So we do that by installing NPM I and then we install style, loader and CSS loader to our project and we install them as developer dependency. So we don't need them on one time. We only need them drink handling. So we basically add these two tools to a pack in order to be able to button humble CSS within our pepper and they're, installing they're almost done and three two one they're done.

B

Okay, no errors here, and you tell happy that you want to use the loader by typing its names of style, exclamation mark and we actually want to use two of them. So we use style, exclamation mark CSS, exclamation mark, and we did it twice. So we do that here. We type here- and we say, go bundle just just check that everything's built right, because we could run it directly, but that's an easy way for us to check whether everything is built.

B

We have no errors here so how about now we try to run it again by calling gulp serve no browser. So once again we will rebound all the whole thing. We will package our authorize, a break in it, the latest version, and now, if we go back to SharePoint workbench, we reload the web part, and now we can see that the bullet marks are gone. The only thing that still is in there is the fact that items that are done, which are these two, are shreekant screws shouldn't.

B

You is that the right word there is a strikethrough style applied to yeah it's right. There you go yes, and all of that has been done in our custom, CSS that we haven't moved yet. So if we go back to folders here is the style.css file that we did not apply so I'm going to show you that so here is here in our angular apart and we haven't moved it to our angular app or to our SharePoint framework apart. So let's move move that, let me zoom out and back to our project.

B

We can that the file is available here. So the only thing left for us to do is to go back to our web part and actually embed the style in our bundle. So we say style, exclamation, mark CSS, exclamation, mark dot, slash Styles dot, CSS we save it. All of that is actually being rebuilt in the background. So we don't need to do anything about that, except for reload, and now we can see that the web part is styled and that we actually have exactly what we had initially.

B

So we have the same web part that we had first actually migrated now to a client-side web part based on SharePoint framework. But there is the great thing is that this is great great already, but there's actually more. That can be done well or, if imagine that the config that you have seen here, let me just show you that. Let me just close the no module folder here here.

B

You can, for example, see some properties that we had sat on the a part what if we could actually set them not via code, but here using the property pane. That's.

A

Okay and I'm typical request in our doubts, yeah.

B

Absolutely- and that would definitely be this- be the thing that users would expect of it, because that's the way web part in fish would work right so before we start doing that, let's have a quick look at the slides.

B

How you would approach that. So here we had the demo slide, and here is just a quick reference of all the steps that we have done. So that's for it for you as an after read and then there's also additional part for that. But first, let's go through that right. So, as you have seen in in angular, the config is basically passed. I have two options.

B

You can set the value or constant right, but these values are set initially, and the thing is that in webparts they can change, whereas an angular, you said them once and they're set code and data's work and when they are passed, for example, services which are created only once during the lifetime. There is no way to update them right, which is exactly what you would like to do in angular or in in a part.

B

So one way to work around that is display and there's also one one more thing that you have to keep in mind is that the would the values of these properties are set in the web part outside of angular and in order for us to use them in angular, we actually have to pass them from the web part into our angular app and one way to go around, that is, to broadcast a change event on the root scope within the web part and subscribe to that event within controller.

B

So let me show you how that would work, let's go to our code, so the first thing that we do is we want to have all of that in our codes. Languages split screen so that we have easy access to these variables and then, in our web part. The first thing that we do just to be sure that we don't use any of that is comment out, config right. So here we are in our web part, as I've said that every single time we change a property, the render function would load right.

B

So that would change. So we have to take into account that we won't be applying this config one, but but we actually have to do all of this. We do it once, but then we also have a way to pass our config from the web part to angular right.

B

So whenever you want to implement properties in your web part, the first thing that you have to do is you have to go to manifest and specify them here. Out-Of-The-Box. There is one called description, so let's actually change that through the properties that we use in our app. So let me just quickly copy paste here and, as you can see, there is small P here and we are not changing anything. This works.

B

So, even if there's about we're not changing anything, and we will pass same values that that we have here to our and manifest the reason why we passed them here is because dividers that we sat within the manifest will act as default values when you add web part to the page, so we could keep them blank, but that would would would basically mean that every single time someone would add the web part of the page, it wouldn't work, it wouldn't do anything.

B

You would have to set the values first right so, depending on what you want to build, you want to choose for yourself whether you wanna provide the values are not then also add the little list name option which is here and that's called it to do, and then we also set the high finish tasks, property and we will set it to false. Initially next step is to add these properties to our interface, so this interface is used whenever you want to get or set properties in code.

B

So once again we specify the names and their types. So this is a string to do list. Name is also a string, and then we have the high finished task property, which is a boolean.

B

The last thing that we have to do is to actually add them, add controls for these properties to the property pane. So here we replace the description, one that we had with SharePoint, API and I. Just really quickly change this string directly here in place, SharePoint API URL.

B

Then we will copy that for the to do list name so we'll call that to the list name and to list name and then the last one we'll use for our high finished book pasted in wrong place for our no sorry again place yes still wrong place exactly, but still.

B

Yes exactly and we do understand the code that we write right so here we say the his tasks. We set the label to hide, finished tasks and we actually changed the type from text box to bubble.

B

A

So so that will absolutely do the the boolean way of presenting that the typos, the variable now to follow a questionable at this point for the audience with Peter. Oh wait a minute! So what kind of types do we actually have there? Just out of curiosity.

A

B

There are available check box like custom which might indicate that you can create actually your own. There is drop-down multi-line text, box, text, box and toggle, so these are available now and you can expect that as things evolve and SharePoint framework atures new types will be made available right and still there are things not available out of the box. You can build your own.

A

Yes because, for example, the selection of the the list, it would be a nice to have a selection of the list to say well as a drop-down or as a picker, which you can actually write by yourself. But that's fine. You can absolutely do that in the future as well. Yes,.

B

You could imagine that you would like to use the economy taker people, people pick her and in and all that right. So there's really a lot of scenarios for these types of controls to make it really easy for users to work with the web part true-true.

A

And a lot of opportunities actually for the community to come up with a a reusable editors as well. That's a customer absolutely.

B

Absolutely or for ISVs to build them and sell them absolutely.

A

Yes, that starter side of the story there we go. Yes.

B

Yes, so the last thing left is for us to pass these properties that we sat within to pertain to angular. So, as we said, one way to do that is through podcasting an event on route scope in angular. So first, let's define a new variable that we will use for storing our injector private and we won't get to us. I can quote that exactly.

B

Next, whenever so, whenever you call the angular bootstrap function, what you get back is an instance of injector and there's basically the reference that you can use to get some objects from your app or actually get events right. So here what we want to do, and- and that's exactly that's the thing we want to do all of this adds up initially once, but we want to pass properties that we sat in the property pain every single time they would change. So, let's change this to, if not ready and at once.

B

So that means when the webparts runs initially do all of this. So we will set template. We will include files, we will load angular, we will set our injector and let's close, that and form a code and then what we will do is we will say this injector. Yes, so that's how we get root, scope reference and then we broadcast an angular event on the root scope. So let's say configuration changed and in that we'll pass arguments, properties that we have changed.

B

So we say: SharePoint API is this properties, and here you can see everything that we have defined on our interface here comes now as a part of the object right. So these three properties that we have specified here in the properties interface are now available to us here. So we have SharePoint API. We have to-do list name, which is this properties to the list name and then finally, hide finish: tasks, properties, high finish tasks all right.

B

So now, currently we have mechanism to pass our properties from the property pane into angular, but now we actually have to do something in angular about it right. So here we go to our home controller and let's subscribe here to our event. So so, first of all, we have inject the root scope because that's where the event is Brooke acid on so we add root scope and we add that to the constructor of our controller and then what we say is root scope on, so we basically define event handler for our event.

B

Configuration changed and the handler, for that is event, is a function with event and arcs, and here we say so. If arcs SharePoint API is not now so if that's been set and SharePoint API a length, so URL is not empty and arcs the same for the to-do list. Name, if that's not now and arcs to do this thing has been set, then we will do some stuff. Otherwise we don't want to do any stuff. Otherwise we want to prompt the user that they should set the weapon.

B

So here, on our view, viewmodel, let's define some properties that we will use to store the values right, because these event occurs or triggers only once, and then we have to keep track of these values right.

B

So we will have share with API will set it initially to no to do list name also to no hide finish, tasks, finished tasks we set it to false and we also define additional property that we can use to actually prompt the user, whether they should set up the web part or not so needs configuration, and we will set it initially to true.

B

So here going back to our model or to our template, we can go here and we can say this ng show, which is how we show things in angular, based on a value or based on a condition, needs configuration. So whenever, whenever configuration is needed, we would say please configure this webpart and when we don't need any country, so we say ng-show vm needs configuration equals false.

B

Then we do all of this and we just end them that for easy tracking and we closet it. So we will show all of this. We will only show the web part whenever it's had a problem. Probably so we say that we go back to our controller and here what we do. Okay, so we just checked that these values are set, so we can now set them on to our new model. Rx sharepoint api to the list name is arcs to the list name.

B

Then we do hide finish tasks, our highest finish tasks and we say: needs configuration, that's false load to Deus. Otherwise we say needs configuration is true and we remove the load to this here. So we don't want to load produce every single time to the leopard will start. No. We only want to do that if it's set and then the only thing left for us to do is to actually pass the values that we now have within our controller to our service.

B

So here we say: VM, SharePoint, API, VM to the list named VM high, finish task, because when we get items we might choose not to get the items that are already sad if we are not going to do anything with them right. So we do that here and we actually have to pass it into a few more places. Someone when we add new item.

B

We also have to have the URL and the name of the list and when we get the items, but still one is safai, what do we need when we delete items exactly the same? So we need here the URL and the name of the list and when we get we need to have all of them and also here we need to have URL and the name of the list, and these three guys and we need to have URL my name of the list and we need to have all three parameters to get.

B

And then, if we go to our service, we remove the constants that we had initially and before we remove them here. Let's do a sneaky intelligence based on the contents to actually add them here easily so to the list. Name and hi finish tasks.

B

So now we can remove these parameters here and we can go to all functions that we have here share my API to the list: name, SharePoint API to the list name and the let's change, SharePoint API to do list name and with that we should now be able to control configuration of our angular app through properties of the web part, so just check that we are not using config here. All that is set. The web part is still running.

B

So if we now refresh, what we should see is that the web part won't work, that it will say, please configure the web part. So how come that? We see this error, even though we specified the values here in the manifest well. This has to do with the fact that the web part was already on the page before we changed the manifest, so the manifest was with which it has been added to the page does not know about these properties here.

B

So if you want to see that let's remove the web part reload, the page add the web part, and now we can see that it works, and if we edit it, we can see our option and if we change any of them, the web part reloads and hides the items that we have finished, because we chose to do that.

A

So it's so functional nobody's shown back to the next point. Yes,.

B

Yes, we are getting really good at this, so, as you can see, I hope this that this really illustrates how you can really easily extend the application that you have to integrate with a point framework and to actually make better use of the API available to us. Yeah.

A

B

A

There's the logical kind of a follow-up step would be no doubts, the bundle or package that as an for Canada deployed and then we were able to get it visible in the SharePoint site as well. So, but that's something which would again take additional time on the demo, and we didn't want to go completely long within this video. Even though this is actually relatively long. Webcast yeah but I.

B

A

Successful a story no doubt and we were able to with relatively small steps, get the existing angular application included there. Yes,.

B

So so what we've done is we've took a new angular application, so no typescript, no well epic. We migrated that over to a client-side web part based on SharePoint, same work and when it work, we actually extended it to add its config to to the web parts property pain, so that editors of the page can actually configure that Kephart in UI and not encode yeah.

A

Oh good, actually, that's nicely sums up the webcast great Jeff waldek once again on on showing how things are getting done and we'll get there and, together with the community, will get additional guidance out there and samples around all of these topics over slightly depends when you're watching the video has to SharePoint framework being released or not. It's gonna be released on summer 2016.

A

We cannot disclose, unfortunately, at this time, during recording of this video at the exact date, but it's coming out relatively soon so patience if it has not yet come out for first raise tenants and when it's out you will absolutely see additional guidance and their hands on laughs and getting started guidance on the on the SharePoint framework, but I think that's it. Thank you Baltic. Thank you for great presentation, any any last words from your side.

B

Absolutely I think that it's great to see that we can that we can truly use any framework that we want to build church to build solutions on the same work, and it's also great to see that everything that we have built in the past is not a waste of time and money and that we can really easily migrate. That on to everything. That's that's about to come. Yeah.

A

That's absolutely a really really important thing to realize that all of the investments what people might have done in the past is related on this kind of an applications you do not have to rebuild or start from scratch. You can use that existing code as such or then you can start doing additional integrations like we did today within the webcast. That's a really really important point distress, but okay I think, that's it. So thank you. Everybody who's watching the video and we'll come up with a a new video sooner or later. So.

A

Thank you guys, bye.