Hi. I'm Mike Camelin on, the office ecosystem, marketing team and today I'm going to talk about building applications, on top of SharePoint, SharePoint. Provides the intelligent, workplace in office 365 as, a developer, you can extend SharePoint in many ways to build for several scenarios you, can build customized, site experiences, for teams and departments and across the organization, into, team sites and communication, sites you, can integrate your application, with SharePoint 8 including, using SharePoint as a launch point for connecting files and items to your applications. SharePoint. Also holds very valuable content, in an organization, file, documents, and spreadsheets the. Critical aspects, that, are critical to many roles and responsibilities. It's, perhaps not surprising, that developers, often build extended, processes, and workflows around, content, finally. SharePoint, can make a great choice for building business applications, as a developer, you can take advantage of structured lists built, in user experiences, integrated. Security and the knowledge that SharePoint has all the governance, and robustness of office 365, giving. You as a developer a huge, boost to resolving, how to get started with the logistics, of hosting your own enterprise. Applications. Now. As a developer when you get started with SharePoint there are several flexible, options for building user experiences, working, with data and building, business, logic and processes. For, building user experiences, add-ins, let you Rijo stand frame in existing, experiences. Power. Apps let you as a developer and also the users in your organization easily. Craft apps and forms that are connected, to SharePoint lists and finally. The new SharePoint framework, which will dive into today lets, you build fast, responsive, user experiences, using, modern client-side, script technologies, to. Connect to SharePoint data, there, are arrest and client object model based options, a new, option is to be able to use Microsoft, graph rest-based, API, s and SDKs, to, connect to site endless data as well giving. You a consistent. Way to access, SharePoint, data along, with the rest of ADA across office 365, like mail users. Groups, and more, finally. There are several options for building processes, and workflows on, SharePoint including. Ways for team members to design notification, processes, using, Microsoft, flow and, as a developer web, hooks are available for list items and files that give you an opportunity to respond, to changes, in your own web services, now. Let's get started considering, how to extend the user experience of SharePoint, for. Web developers, the rated change in evolution, of frameworks, across web development is quick new, practices, and new libraries, evolve every week a key, tenet of SharePoint, development, is to, make it easy for web developers, to build applications, using the latest script. Libraries, frameworks, and tools to. Support this we've released the SharePoint framework a set, of tools and libraries built into SharePoint that let you harness, the, latest web technologies, for modern client-side, development, SharePoint. Framework or SPF X is also, designed it to be responsive, and adaptable, for mobile scenarios including, both mobile web browsers and the SharePoint mobile app we. Use SharePoint framework, to build many default, experiences, in webparts and SharePoint will, help which helps make sure that, the experiences, you have are battle-tested, and robust by the time you use them they're. Also backwards compatible including, existing sites as well, as supporting new modern site experiences, across SharePoint, and finally. SharePoint, framework comes with tools for developers to help them easily code, in the, JavaScript, frameworks of their choice within SharePoint, let's, take a look at SharePoint, framework in action. So. Within SharePoint, we have new modern, experiences, for team sites and communication, sites web.
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.
It Actually gets executed, it's going to call a bunch of functions in this case a to-do but the other one has a function, which will show an, open, dialog that, you can then do. The the preview, of that particular adventure, and how will look on the public facing website so. This, just shows you how you. Can essentially register, a new command set actions and. Then you can write JavaScript behind the scenes that will intercept those actions and you, can you know write scenarios to your heart's content using, the power of sharepoint framework and javascript. Now. Since, we've launched the SharePoint framework the set of changes and updates since then have kept on coming we, recently added support for SharePoint, framework web parts and the on-premises, SharePoint, Server 2016. Product, via, feature pack 2 this, makes it possible to build web parts that run across both SharePoint, in office, 365 and, on-premises, from, one code base we've. Also added recent, frequently, requested features such as Application Lifecycle api's, to, make it easier, to manage solutions, a site, collection app catalog that provides new flexibility, for managing deployments, asset. Packaging, that makes it easier to host applications, and new connections from SharePoint framework, to graph api's all of, these are coming soon, now. SharePoint, framework makes it easy to extend and embed web experiences, within SharePoint, but what if you want to access course SharePoint data listen, files outside. A SharePoint for example maybe you want to build a web service or create, a custom mobile application, for that, we've added extended, support for SharePoint sites and lists within Microsoft, graph, Microsoft. Graph is an easy to use consistent. Rest-based API for, accessing key, data across Microsoft, and including office 365, you. Can access SharePoint list API in the Microsoft graph but, starting, by accessing a site now to access a site you'll use the v 1.0, sites, api at a URL, or a site ID for, that site and from there you can add the list api's, to enumerate lists and you, know use the list identifier to get specific list data you.
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.
And Some, additional labels in a table view that. Are gonna hold some additional data that I'm going to pull into this application and. Then I'm gonna go into my main page sam'l code behind and add some additional code for that as well so let. Me go scroll down here this, is basically the code that it had before which took some you know information about me and put it into some sam'l controls I'm, gonna add some more code that's, what it's going to do is it's going to call this endpoint graph top Microsoft comm sites, slash, the name of my tendency this is my developer, tendency I'm, gonna go find a specific sub site in there slash sites slash adventure equipment, I'm gonna go find a specific SharePoint, list called organization's and then, finally, what I'll do is I'll say give me those items and then pull down all the custom fields in the data that are associated with them I'm gonna say expand, equals fields and then. From there again, just standard, rest requests, I'm going to go pull down that data and then go fill out some some, xamarin. Some, zamarons my UI with, the results of that so now when, I start this project up. You. Know just pulling in a little bit more information on top of that what. You'll see is it'll pull some basic information, about the site the title but then in addition. It's. Now gonna pull in sort of the set of list items that came from that SharePoint list so. You can see here it gave me the site URL the site last modified time and then I have this scrollable list of the different organizations and their logos that, came from my SharePoint list now it's not the prettiest thing in the world by a long stretch but hopefully. You can see how you can get started with you, know using SharePoint list api's in your applications. Now. One more different example I want to show you is you. Know building SharePoint data and pulling that into Microsoft, teams so, teams has a way to extend it called a tab and so with a tab what you can do is actually, go build additional, tools, for your teams so, for example in this case if I go to my. Let's. Go over to my bike sales team what. You'll see is I've actually added an additional tab here called supplier, organizations. And this, is a tab that I've developed and what it will do is it'll reach out to my list of organizations, that I have up on my site and pull that data in and show it as a tab so if I'm working together with my team and I want to do a quick lookup or find some relevant, documents, you can embed that inside of Microsoft teams now, tabs are implemented, essentially as web pages so, if you can build a web page you can build a tab inside of Microsoft teams, now in my case what I'm doing is I'm actually connecting, that page behind-the-scenes, back to some SharePoint list data so, let's take a look at how that works you. Can do things like drill into organizations. As well by the way equals, stuff so. Let's take a look at that implementation. Now this will look very similar, to the example I just showed you it's just in JavaScript, and it has a lot more you, know sort of details to it but what. You can see here is the first step is really to authenticate. And have, the user sign in and make sure that they're logged in to. Do that again I'm going to use my application, identifier that I've retrieved, and. I'm gonna go use some JavaScript. Libraries, to then go handle the sign-in process so there's this authentication, context, library that came with my authentication. JavaScript, library. It's, going to do all the things to say like oh by the way if you're not signed in go acquire a token, and sign you in and, this case I'm gonna use some Microsoft Team specific, API is to pop up authentication dialogues, if I need to and so. That's a way to sort of really get started and to get that authentication, token now, there's some other user experience, items down here but let me just scroll down just a little bit and what. You'll see here is when, it comes time to go retrieve a list of documents, so one of the things this tab did was showed a list of relevant documents, again. You can see here that the actual request to retrieve data via Microsoft, graph is just simple. JSON, rest-based. Requests, so I'm gonna go instantiate, this graph API @v 1.0 / slash. Site ID slash lists, and, then pass in my list identifier and then I'm gonna again, go retrieve the set of items with, their fields expanded, I'm gonna pass in my graph token in to the bearer header that you can see over here and then.
In JavaScript, again it's, just parsing, of those responses, and then, populating. Out my. HTML user experience, from that so I'm gonna go loop over all those document list items that I got back from SharePoint and then, go fill out the various, divs and HTML, elements, with that content, so you can see it's very similar to the same ran example, in in a sense just JavaScript versus. You, know c-sharp if you will but, that shows, you hopefully how easy it is to get started using Microsoft, graph to, retrieve data from SharePoint lists. So. That's a tour of the ways that you can take advantage of the latest SharePoint, api's and tools to build hyper productive experiences, for your users from. Web parts to site extensions, to applications, that integrate with SharePoint you, can read more about SharePoint, at dev dot office.com slash SharePoint experiment. With SharePoint graph API zat graph Microsoft, com now, SharePoint has a large community starting, with the SharePoint developer, tech community and you can provide suggestions to our team at our sharepoint user voice I want, to especially call out the SharePoint github repository, at github.com slash, SharePoint, which, has dozens, of community, contributed, samples you can access and get started with it's really an unparalleled. Community, contribution. You should take advantage of take. A moment to review all the ways you can use SharePoint in your next project and use, these resources to get started in building your first parts and extensions, happy, coding.
2017-11-23