Modern, intelligent workplaces with SharePoint | T190
Parts Are the foundation, of these sites they provide the building blocks that people can pull together to create really great functional. Sites so in this case for example for contoso adventure, travel we have this this web site which gives you a bit of an overview of contoso. Adventure, travel program and. If I go ahead and edit it what, you can see is that there's a number of different web parts that come together here, for example an image at the top a header people. Profiles, web. Part a contoso, adventure, travel a bit of text, and then we have side by side images, and text we have you. Know slide presentations. Picture, libraries, and then, things. Excuse-me like for, example webparts, a map, that you might have here that you can sort of zoom in and zoom out on and, of course you can either imagine, other webparts things like visualizations, charts. And. The like and. Great news is that you can build your own custom web parts using the SharePoint framework so, in this case I've gotten an adventure equipment site over here where I wanted to track the set of equipment that we as a company are lending, out to people in addition to having a change request system so that people can file issues with maybe some of the equipment, that they're learning these, are custom SharePoint, framework webparts that you can download from github comm slash, SharePoint there's a SharePoint developer solutions. Repository. There in, this case I've got a change request web part I can say your, raft has a small. Leak like. So you. Know click create say. You. Know near, the the. Front. Section. And, you. Know this will create a new SharePoint list item behind the scenes and that, will get added into my change request web part so you can build blood parts that are similar to this let's, take a look at how you do that now, with the SharePoint framework it uses modern libraries, and tools so, when, we want to start a project we're going to go to the command line and use a tool called yeoman, which allows me to create a new project so I've installed the SharePoint framework and I'm going to use yo at Microsoft, slash SharePoint, to start a new project in this case I might call my project facilities. Let's say I want to track a list of facilities that we have I can, choose to either target the latest and greatest SharePoint framework version or, target the version that was. Included with SharePoint Server 2016, if I want to build cross, on-prem, and, office.
365 Types. Of webparts I can choose to use this folder, I have, options about whether I want to make this tenant administrator, to deploy able and then finally I can choose to build a web part here and this will go, ahead and do everything it takes to go provision, a new SharePoint web part project for me so this is a lot like file. New project inside. Of Visual Studio. Now. This takes a while typically to go and provision your site so I'm actually going to go to a project that I've already created and we're, going to open up visual studio code in this folder and. Get started editing our web part so. I'm, gonna open up visual studio code you can use your own different types of editors if you so choose this. Is basically the project that was created as a result of that yeoman tool and so, when, I open up facilities web part es here what. It's going to do is behind the scenes use typescript, as the fundamental scripting, language for creating these web parts in this, case it created a facility's web part based class and empty essentially, that. Derives from this basic client-side, webpart base, class where all sharepoint, framework webparts derive from now. Because I chose react as my developer, framework for the user experience it's. Going to turn around and in this render function go instantiate, my facilities, react. Component, which I have stored. Over here in facilities, TSX, and this, is a very basic sample, let. Me go start my build tool called gulp I'll type in gulp serve and so. What, this will do is it'll take all the resources that are in this project compile. Them behind the scenes do all the web, packing, to make sure it's a very compressed. Project, of only the code that I'm using and then, go host this webpart inside, of a debuggable server so this, is my hello world web part that you see popping, up in edge here it's, going to open up a tool called the SharePoint developer, workbench which is a local, tool that allows me to essentially. Simulate, SharePoint so.
That I can do some very quick debugging, and see how this part works and, I'm gonna add my facilities, web part and you see I get a you know a basic hello world web, part that comes, when I first created this project now. What we want to do is go ahead and customize this, so to do that I'm gonna go extend, it in a few different ways now, the, way, the. Way that the. React framework works is that it uses a concept of state and this concept of state is where all of our variables are tracked and. All the sort of the information behind the scenes you know will flow into your user experience components. So, in this case I can add this I facilities, state. Object where, or, what we're gonna do is track a list of facilities this items object here and a selected facility. Next. Up what we're gonna do is we're gonna then, go add, some. Imports, now there's a set of libraries you can use as a developer, to make rich robust. Webparts quickly called office UI fabric, and there's a particular library of office UI fabric react components, that includes a lot of the things that we use and our out-of-the-box, SharePoint, user experience, things, like command bars and buttons and, document. Cards that are available for you as a developer to use in your own SharePoint, framework components and so that's what we're gonna do here next. Up what I want to do in this web part is add a very simple almost. Trivial constructor, that will go ahead and pull in data from a web service so in this case I've got a constructor, it's going to go fetch some data from a JSON file on the Internet, so you'd have probably a more sophisticated data retrieval algorithm, here for the sake of demo I'm just doing something very simple and then. We have our render function so I'm going to go overwrite this render function with something completely different, but, what you can see here is this is some react, markup, that I have here for doing things like instantiating. Some of those various components, and then binding, them to the data that gets retrieved from, that web service so I've got a command bar up top and then I've got this details list control where it's. Got a set of columns and, you know a set of items and it's bound to this dot state data items that set of things that have retrieved from my web service and it's got some actions that fire when I happen, to actually click on an item through an item invoked and when, I do click on an item what it's going to do is it's going to fill, this document, card with a preview of the facility, so that I get a very rich view. Of that particular facility within my web part so I'm gonna go save this and what, will happen behind the scenes is that my gulp build tool will automatically, pick that up you, know start rebuilding the project, it run lint tools around web packing tools if I have an error I'll get a little message that tells me that I've got an error in this case the project actually works fine and so now I've got my facilities web parts so it automatically reloaded, it in the workbench and now you see my rich list. Of facilities and so when I double click on these you can see that it will upload update, that document, card on the right-hand side of this web part 2, then, the selected. Item so. This just shows you a little bit about how you can get started with SharePoint framework to build SharePoint. Framework web parts and get them into your sites so, from here we'll talk a little bit down the road about, building.
SharePoint Framework extensions. When. It was released about nine months ago SharePoint, framework let you build web parts which as you've seen are a key part of the SharePoint experience, recently. We've extended the ways you can use script to customize SharePoint with SharePoint, framework extensions, SharePoint. Framework extensions, let you customize various, additional, facets, of SharePoint application. Customizers. Let you add scripted, pages including, the ability to add things like analytics scripts you, can also customize the top and bottom of SharePoint pages across a site to, add things like metadata, displays, or advanced compliance, notifications. In addition. You, can extend the menus and options of lists and libraries to react to them with scripts through, a technology, called command sets, finally. You, can the, presentation, of SharePoint lists by adding custom filled renderings, for example to add new visualizations or command options to list items let's, take a look. So. Here is a site that I've customized, using SharePoint, framework extensions, across, the, application customizers. The command sets and the list field customizers. So. Let's say that we've got a set of adventures that we're planning from the contoso adventure, travel company, and, so I'm using a SharePoint list to track that now, at the top of the page what you can see here is a custom, control that I've embedded into the page with a set of announcements, and an overall status for this particular site you can see it's, got an announcement announcing. Accepting. Summer, 2018, trip ideas and a bit of a status, now. That's one type of customizer, the application, customizer that you can add to your page next. To actually customize the list itself what you can see here is that I've added a couple of actions called open this adventure site and publish, this adventure to the public these, are custom, command set options I've added to the page and when I click them what it'll do is pop up a dialog where, it'll give me a bit of information that gives, me a preview of what this adventure will look like when we publish it to our website this, is powered by a bit of script that I've added along, with that SharePoint, framework extension, now. Finally, what you can also see is that we've added a set of locations here, and we've given a map based visualization. To them so, rather than just simply saying Belize City or France reservoir, we actually have a little bit of a map preview that, is embedded, within the list that when you click it will give you a draggable, type, of map that you can use to see that, particular adventures, locations, in more, detail so, these are three types of of. SharePoint, framework extensions, we've added to this site now. If I come to see the code behind the scenes it's very similar to that web part example that we saw earlier it, you can see that in my visual. Studio code project, there's a fuller called extensions, and have added a number of different extensions, to my, project. That implement, these different types, of extensions so. First up I've got my training list header that header at the top of the page it, starts, with a typescript, base class called, training list header application, customizer that like, a web part actually derives from a base application customizer. And then. What it will do is when, the X. Actually, gets initialized it's, gonna go look for this placeholder, it's, gonna hook. An event to do that and. Then it will then go look for the top placeholder, which represents, the top of the page so, if this placeholder exists, if we have a pointer to it then from there what it will do is it will instantiate, our react control, that, will then go ahead and render and place that, custom, component, at the top of my page and you know what you can see here is this is a very standard react component, very similar to the example I just showed you on the web part it's going to go fetch some data and then go render it with a react template, now. Let's take a look at one more that, command set customizer. That I added that added additional menu options, now this, SharePoint. Framework extension starts with a JSON file where I've added a couple of actions and described things like their icon the image and their title, next. What will happen is your command set will. Also derive from a base class this one derives from base ListView command set and then, what happens is when.
Could Also inspect things like content types and custom columns, for a list let's, take a look. So. One example of using SharePoint, list API is in mobile applications maybe you're building something for iOS for Android and you want to build that let's say with xamarin so, to get started there's a project called active, directories Emory native - v2 which is a project you can find on github and what, this does is it's a very simple xamarin project that implements, a way to connect, it to Microsoft graph, now, when you want to build an application that connects to Microsoft graph you need three things first. You need an application registration, which, you can get at apps dev Microsoft, comm or you, can get from your azure portal if, you look in Active Directory you can register new applications, this, will give you an identifier, in a set of basic permissions that your application, requests, next. Up what you need to do is authenticate. Against, your Active, Directory and have the user sign in now to, do that we use a library called the Microsoft authentication library, or emcell or also known as Microsoft that identity client, now, what this will do is I've got some simple lines of code that use an EM cell up top what, this is going to do is it's, gonna say hey has. The user already signed in let's go acquire their token silently, if possible, and if they're signed in it or return a token, now, if the user is not signed, in we're. Gonna present them with a button to ask them to go ahead and sign in we're, gonna call the M cell library called acquire token. Async. Method which, will pop up a dialog where the user actually goes ahead and signs in and if, that's all successful, and if we get a. Authentication. Token back then. We're actually able to do part three which is use, that authentication, token that we got from dedication library2go make, some Microsoft, graph calls, so. That's actually contained, down here and you can see that this is just really simple rest calls in this case I'm gonna structure, a new HTTP. Message and it's, gonna go to graph Microsoft, comm site review 1.0 slash me I'm gonna, pass in that token that I got into the bearer header and from. There it's really just simple, JSON, based rest calls and so when I hit f5, and open up this application, what. You'll see is it's a very you know just brutally simple zamarons, starter application I'm, gonna have a blank form in this case I'm running it within. The. Uwp version of xamarin so you'll. See it as a Windows application but, of course this would also work as an Android application or, as an iOS application, so. It's going to go start that up and. I think in this case I've probably already signed in so you're not going to see the sign-in process, but, you, know what you would have seen is that a dialog, popped up I typed in my name and password and then you, know that the application continued so in this case it's accessing, Microsoft, graph and pulling in some information about me, just. Just basically, now. What, we want to do here is actually now add some SharePoint specific, information and we have a list of for, example organizations, that our company is working with that we want to connect in to this application so. To do that I'm just gonna go edit this and I'm going to come to my zamel and I'm. Gonna hit and. Add some markup in here a simple layout a label.