Microsoft 365 Community PnP Webcasts, 22 Aug 2016

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Webcast - Building simple SharePoint Framework Client Web Part

Description

In this PnP Web Cast we concentrated on covering how to use 3rd party JavaScript libraries with SharePoint Framework client side web parts. We'll use simple weather web part as the scenario on implementing configurable SharePoint client web part, which shows weather for location, specified in web part property pane.

Notice. When this webcast was released SharePoint Framework was in Developer Preview, which means that the client web parts should not yet use in production at SharePoint Online.

Presentation covers following topics:
- How to integrate to external JavaScript frameworks with Developer Preview
- How to control property pane behavior with property panes

Web cast demo shows following details:
- Walk-through of the sample weather web part
- Code to integrate external JavaScript libraries
- Code changes for the property pane to disable reactive behavior

- Web cast presenters: Waldek Mastykarz, Vesa Juvonen

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

Source code for used client side web part is available from https://github.com/waldekmastykarz/spfx-weather-webpart.

Additional resources
See following resources around the upcoming SharePoint Framework.

- SharePoint Framework tutorials for Developer Preview - https://github.com/SharePoint/sp-dev-docs/wiki
- Open and Connected Framework - The SharePoint Framework - YouTube - https://www.youtube.com/watch?v=T_bGyqKwT4g
- PnP Webcast - Integrating Angular v1.x to SharePoint Framework client side web part - http://dev.office.com/blogs/integrating-angular-to-sharepoint-framework-client-side-web-part
- 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
- PnP Webcast - Converting existing JavaScript apps to SharePoint Framework - https://channel9.msdn.com/blogs/OfficeDevPnP/PnP-Web-Cast-Converting-existing-JS-apps-to-SharePoint-Framework

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 (SharePoint developer group) to provider your input. Thx for your interest advance.

A

Welcome everybody: this is the SharePoint patterns and practices webcast, also known as office 365 developer webcasts. Today we're gonna talk about how to create a simple SharePoint framework web part on and we're gonna use the weather web part to add.

A

As an example, it's a relatively simple example, but it's one of those things, but typically when you build an intranet or a portal or customizations from the SharePoint, that's one of those things when everybody is asking I want to have a way they're shown within in the front page of one front page of my portal so and it and it's actually relatively nice, a simple scenario: the show also the power of SharePoint framework.

A

My name is Erin and I'm a senior program manager in ship and engineering and with me today doing the demo is wall deck master cards? Well, they really do a quick intro.

B

Mvp and I work, as rancour today, indeed,.

A

Indeed, so, let's actually get started on the on the actual content. So a few things before we'd be time on the content. Sharepoint patterns and practices is a initiative which was has been existing for few years, we've been using the office dev tree office, 365 dev, as the naming right now, when we're pushing more and more SharePoint elements. We, especially in a SharePoint topics, we're gonna use to SharePoint, Patterson practices term or a plant SharePoint patterns and practices provides two code, samples, guidance, documentation, monthly community calls by weekly office hours for Q&A case studies.

A

The themes others who are in the SharePoint framework more and more will be spent time on the shell upcoming SharePoint framework, which is already available in Developer Preview. Also, the ship on deadens will be there as a big role, because the add-ins are not going to go away, so the shipment framework is gonna yeah. It's an additional option to implement certain scenarios in the UI perspective, but the typical shape and adding scenarios are not going to go away fully supported and we can evolve those in the future as well.

A

The PMP also provides guidance, Microsoft, Graf office, 365, API usage in general, and it's really around the remote provisioning clients, our development in general, but let's actually get moving on the on today's topic. So, like mention, we kind of use the simple scenario of a wet, a wet part, and this is a super super classic case, but that's for a purpose and because we do know that a lot of the the audience a lot of people watching this videos and going through the tutorials and going through the code.

A

Examples do not necessarily have that significant experience on the web stack development or SharePoint framework development, because it's relatively new topic within a SharePoint area. So the way the web part is then a good example, because actually it's almost like production-ready typical requirement is that you need to show a weather within a one location. The the follow-up requirement is, then, that okay, let's evolve this based on a user per user profile attribute so, for example, reading a user profile, location, attribute location and then evolve the web part to be dynamic.

A

We're not going to go that far today, we're going to start with a typical setup where you configure and the web part to show the weather in a certain location, what to say no doubt relatively typical use case before we go to the actual code, and while it's going to show the basics and how do we actually implement the stuff?

A

There's a few things which one of pin point so right now we are in the developer preview of the SharePoint framework and there is actually a native simple way of adding remote JavaScript libraries to your SharePoint framework solution in the developer preview. This does not, however, work. Yet it is a preview. It is an alpha or beta, depending on your perspective, so we need to do a slightly additional work on this. We luckily have a module loader available within the SharePoint framework, and this is directly taken from our use case and there's two things.

A

A few things to notice within this render method. So this is the render method in a client-side web part in a SharePoint framework. First of all, there's the if this render once Eagles false- and this render once is a property within a base class which you can use to check. Have we already rendered the web part? So we don't reload those dependencies which we need to do for the first time, wouldn't pay that the right way of winning that one day yes,.

B

That's correct the way the render works is that it executes initially, when you add the web / to the page, but also every single time you change properties of the web part. So that way, without that Clause we will just load these scripts every single time. Someone would change location, so we don't want to do that. So that's why we wrap the loading part of the scripts in that, if Clause, yes,.

A

In this end date, and then we inside of the the, if Clause, we're using the module loader, which has been imported to the visual studio resource to their code project or whatever, the your Qi, whatever your tooling, is so in the ship and framework project or in the class, so you're, using the import module loader for Microsoft /sb module loader and after that, you're able to then request certain scripts to be loaded in external Citians or whatever the location is quite simple stuff still.

A

But after this you have in this case as an example, you have then the jQuery available. You have then also additional simple, with a wither in a mini fight, javascript file available within your implementation.

A

The other thing what we wanted to kind of a pinpoint explicitly on the slide is say a option within your client-side web part. So by default, when you have a a property pane properties within a client-side web part, those are reactive. What it means is that whenever you modify the property, the modification is reflected directly and the DES client side web part. Essentially it is actually react.

A

Securing the render method within the client-side web part like well that mentioned, so this isn't always the right behavior, because, for example, in this way the web part case you want to write, for example, the weather of Helsinki or Los Angeles or Montreal. You actually don't want and that the text to be read at well. You don't want that property chains to be reactive, which would mean that when we type housing every single time you tithe h-e-l-l-o rerender, the wit part, that's not optimal.

A

So what we want to do is that somebody writes the property and then clicks a button to actually apply that and to be able to transform the default based behavior to this on-demand behavior. So to say, you actually overwrite a property which is disabled, reactive, probably change this, so it's actually disable the reactive property pain behavior. And after that it will actually show you the apply button for the web part, and this is obviously added on a web part class, so you're able to modify that case-by-case within the web part.

A

But let's move to the demo itself. So what it's going to do? The demo I'm gonna ask certain questions and we're gonna walk through how to build a typical weather web part, which is like mention relatively common scenario and a great use case to learn how the for example integrates a jQuery and how to implement. Well, almost like production, like implementations, using the SharePoint framework developer preview.

B

So you see the source code of our wet weather have part built using the new SharePoint same work as as I said, the first thing that we do, because we want to love jQuery and jQuery plugin that we used to show the weather from external.

B

Cdn we import the module holder into our class. We do it with the import module loader from Microsoft, slash, SP module Hodor, with that it's it's available in our class for us to use the next thing that we do is we load the external scripts from CDN. We do that by calling the load script function, that's a part of the module hook, order class, and here, as you can see, we also pass the name of the global variable to which the contents of that script will attach.

B

So we load the contents of the script and attach it to a query, and we do that for the plug-in to be able to load because plug-in is not an AMD module and that's essential thing for you to understand the way these scripts work.

B

When you start working with the SharePoint's paym work generally, scripts are built as modules and that you can think of that as a way of dll's right and you can just embed them, but there are also some scripts that I just scripts and they will love within within the whole scope and that way for these scripts to work. You have to assign them to a name right, because otherwise they would just add and and same work would would not know how to register them on a page.

B

So here we create the variable that we used to register CH h a query with, and then we use exactly the same name here to actually load the simple weather plugin that we do here. Another thing that we also do is to assign the jQuery to a internal variable that we have here for us to use right, because now we only load the script, but at some point we also want to instrument a piece of the page, a tag on a page to actually load the weather right.

B

So we need to have the reference to it and after these scripts are loaded on a page. We actually move to rendering the contents alright, and another thing that we mentioned in slides- is that we wrap all of this into this if this under one's Club Clause, because the render function is triggered every time initially.

B

When you add the web part to the page, but also every single, you change property of the webpart and because we only want to load these scripts once we, we use the internal information that that the webparts makes available to us to check if it's loaded initially or if it's rear-end during due to a change of one of its properties.

B

So once all that is done, we actually move to our internal function that we use to actually show the weather on a page, and here we make use of our jquery function or jquery property that we start internally here or that we toast our art art here. So the script that we got from CDN we assigned to this variable and now we are able to use jquery within the web part.

B

And here the thing that we do is that we get the location from properties and we initialize the plugin to actually reach leaf and show the web part on a page. So the way it works is if we go to the page here we can see the letter and if we go here, we could change that to unit and then apply it, and then we would see that that it will change the weather info.

B

As you can see, we use the apply button here to have the problem property pane work in a non reactive mode. That means that it will only show the weather whenever we click click apply without it the way it would work, let you see how it would would work out of the box. So let's just uncomment this save it. The workbench will reload by itself because it runs in the background and let me just open developer tools so that we can see how requests will be done whenever we change it.

B

So now, let's clear that and let's change location back to a house in key and let you see how, as I type for every single keystroke, the webpart issues a request. Why? Because, as I said on, every single change, the render function is being called, the web part is being rendered and location and the weather info is being retrieved for whatever we have there right. So that's exactly that case is exactly why you want to have property pain in non reactive mode.

B

Whenever you reach leave data from some some API right, because you don't want to re-render it all the time on every keystroke on or on every change. You want to change the things to do the way you want them to be then apply it, and then only have the webparts show the data so with that I give it back. Elisa.

B

A

You well dick and let's move back on the presentation. I think this good coverage on the on the both of the topics which you mentioned in the slides and over that there's, some technical details on how the che query, weather modules and all of that work, but that's not really related on the on the SharePoint framework.

A

I think the key point was to cover: how do we get those external JavaScript's loaded in the CDN and also having that how to disable that reactive, probably pain, which makes a lot of sense, because this the end user experience when you're typing the string there? It would be horrible when it's refreshing all the time the UI and and the processor would be doing additional calls. But thank you Volvo for this one. Let's switch back on the slides and close up the webcast.

A

Thank you and going back on the slide, so we don't have anything more than actually covered within the slide perspective, rather than just a summary of the of what we went through within the slides and also within the demo. So thank you Waldeck for joining me. I think this is a a create, a webcast around the how to get started.

A

Writing this simple web pods and quite often, actually especially well in my perspective and I, think a lot of people perspective, keeping things simple is always a good thing and I personally I really like this kind of a scenarios as well that that they show the simplistic way so that people can actually start learning more complex scenarios.

A

So we don't want to actually deep dive on on super super complex and super flashy, even though this is actually a flass, a wet part I really like the UI design, but we don't want a really deep dive on a super super complex scenarios at moment, because it might be really difficult to actually understand what's happening. So hopefully, this webcast will help you to get started on integrating external for external framework and building your own client-side web parts using the SharePoint framework already today.

A

So thank you ball deck and will come up with their new webcasts to order later. Thank you.