Coming up
we'll take a look at updates to the SharePoint Framework.
with the introduction of new SharePoint Framework extensions
that give you richer customization options
including a banner at the top of the page
to support site metadata and notification scenarios
for your SharePoint team sites.
Adding actions and custom fields within SharePoint lists
and we'll show how you can harness Microsoft Flow along with your custom business logic
to automate business processes
and incorporates Office 365 data
using the Microsoft graph API.
Finally, we'll compose sophisticated user experiences
using connected web parts.
The SharePoint framework
lets you create engaging SharePoint pages
by building modern web parts
using open frameworks and your preferred tools
such as React, Sass, Gulp and more.
Since the general availability of the SharePoint framework in February,
we've seen some really fantastic web parts.
And coming later this year,
you can use these web parts and on-premises environments
with Feature pack 2 for SharePoint Server 2016.
Today we're going to go beyond web parts.
We're expanding the SharePoint framework
with extensions to support new site and app customization scenarios
that will be available in SharePoint Online.
These SharePoint extensions let you do more across SharePoint sites
including adding custom metadata,
customizing the presentation of list views,
and extending the command services of SharePoint.
In this example my company, Contoso Adventure clothing
has an upcoming training class for beginning rafting.
For each class we have a group in a site.
Now you'll notice that this site has the details around the training event.
Right at the top and always in context for view.
It includes the level, an Associated logo,
and a mini map that shows the location where the events is taking place.
This metadata is being pulled from a central repository.
Let me show you how you can use SharePoint extensions
to help you deliver this branded custom team site experience.
Now here I am in Visual Studio code.
Now of course you can use the editors of your choice.
SharePoint framework lets you customize with modern JavaScript.
Many facets of the SharePoint experience.
Here I have an extensions folder on the right-hand side.
And what I'm going to do is drill into this component we have called Training List Header.
Now within this component you can see that this is derived
from something called a Base Application Customizer.
A base application customizer lets me register custom script within the site
and from there I can use it to override certain placeholders
that are well chosen within the page.
Now scrolling down to the render function
you can see that I'm going to go find that placeholder
using context.placeholders.
I'm going to look for the page header.
Let me make sure it's valid and not null.
And then finally I'm going to instantiate a react component
which will actually have the real rendition for this element.
Now going to my actual react component here,
you can see that this training list header is really just a simple set of markup
the will take the data that I'm retrieving from a custom web service
and render it inline.
So that's a brief overview of the application customizer.
Coming back to the site,
you can now understand how it was built.
Let's take a look at a different scenario and focus on list customization.
In our case for each of these training sites we have a list of attendees.
Now sometimes these lists can be viewed in public settings,
so you want to ensure that for each of these lists they're always private
and we hide personal details from folks who might be peering over our shoulders.
Unless the instructor specifically looks at them.
Now this is my standard list.
It's got details like phone numbers and emergency contacts and emails
and that's not what we want to show.
Now to implement the privacy customization,
we can use a field customizer
to modify the presentation of the field.
In this case, add a blur effect until the instructor Mouse's over to reveal the data.
Now this is just our scenario for Contoso.
But you can imagine many other types of Lists visualizations you might want to implement.
Also, the header we just built
now displays an additional warning
to the viewers of the site to keep confidential information private.
Let me show you the code.
Now here I have another folder
called privacy shield which has this list field customizer customization.
I'm going to select the privacy shield field customizer class
and just like that base application customizer that you saw earlier,
it derives from a base class which has all of our functions and utilities.
Now specifically there's a method called On Render Cell
What I'll do here is simply override and use a react component.
to display that blur effect.
That's contained inside of privacyshield.tsx
and here you can see very simply that
if we should show private data
in other words if the user has their mouse hovered over
we'll render it with a regular style
otherwise we'll use a blurred CSS style to give it that blurred effect.
So that's the field customizer another new sharePoint extension type.
Again you can use it to implement many of your own desired lists customizations.
Now let's go up a level to our main training manager site.
We're a store manager and we want to see and manage a list of training courses.
We have a simple process where people can approve and open up a class
for external attendees to register.
I've added this custom action called
Open this class to the public to the menu.
We've added a new SharePoint framework extension type called Command Set,
which implements and adds this capability for you to add those custom actions.
Now as you can see here when I click the action
it will give me some brief detail about the class
and what the presentation will look like for incoming visitors.
And If I'm interested in opening the class up,
I'll just click the open class up button
and this will update a SharePoint list item.
Now let me show you the code behind this.
So again I have another SharePoint framework extension folder within my project.
I'm going to expand class commands
and I'm going to go show you this JSON object
which returns all the metadata about my custom actions.
I've got an open class action right here
with a title and an icon.
and it's got an identifier.
Now within my code, I've implemented this on execute class
where I'm going to have the actual implementation of my open class dialogue.
It's going to again instantiate a react component to implement my dialogue.
So here I have my dialogue react component
which actually renders out that dialogue.
What it does is it pulls in information from the SharePoint list
to represent a view of the list item as the user would see it when they register their class.
So again, standard react components here easy to integrate data
Now what this has done is actually update a list item with a new status.
Now as that list item changes,
I can integrate custom behaviors.
I could build a web hook or I can integrate workflows.
One option is Microsoft Flow which has new integrations into Office 365.
Specifically you can see here that as an end user
I've added a number of different notification behaviors
as things change inside of the SharePoint list.
And as that status becomes available.
Now what I can do in addition is add custom code to this using
a custom flow action.
So in my particular case,
I want to make sure that when this item is intended to be published,
we update our training management system
with this new data.
So I'm going to add an action here.
I'm going to call it Publish to training system.
Which is a custom action I previously registered that connects to an Azure function.
Now let me show you the Azure function.
Recently we've updated our Microsoft graph endpoints for lists.
They provide a great way to actually go and access list data
within your SharePoint site.
Now this is standard web request semantics.
I'm going to add some headers and then I'm going to parse the response that I get back.
Now in my case,
for our custom learning management system.
We store all the data in Azure storage.
So here I'm using some Azure storage simple objects to push that data up to the site.
So that's a little bit of how you can build custom actions
using Azure functions and plugging in to Flow
Now finally, new improvements to
SharePoint framework make it possible to
build even richer user experiences.
SharePoint now supports web part connections
that let you create web parts that can work together
to achieve more sophisticated user experiences.
Now let's take a look at this experience on my phone inside of the SharePoint app.
One of the biggest benefits of SharePoint framework
is that it's designed and supports
responsive mobile friendly experiences from the start.
Now here's a list web part
which will display all of our outdoor activity classes.
And it shows some very basic details of the class.
Now beneath this part
I have a detailed web part which shows enhanced information about a particular class.
This web part automatically connects to the outdoor activity list
to show and bring in those details.
So all of this is pulled in through the Microsoft graph.
Now let me show you the code.
I've got some web parts listed below
in my SharePoint framework project.
Specifically I have a training detail web part.
Now within this component
I have a specific line of code.
It basically allows me to get the set of events and information and updates from that training list part.
Specifically, I'm using this event aggregator class
I'm registering for the specific item selected event.
Now in addition I'm also updating the user information
and to do that I'm going to call into Microsoft graph.
Now Microsoft graph lets you get a whirl of Office 365 information
including calendar appointments, files and tasks.
Now here I'm just getting some specific profile information.
I'm going to use a graph HTTP client
to call this particular endpoint with details about a particular user.
And then I'm going to update my react State with those details and display
that custom instructor information.
So that's a little bit of using SharePoint framework
with web part connections and Microsoft graph
to build really powerful user experiences.
I hope today's overview on our latest SharePoint framework updates
with extensions helps you imagine new ways to customize your sites and apps
within the SharePoint modern experiences.
And then automate activities through Microsoft flow and the Microsoft graph API.
Now you can start using SharePoint framework today to start building web parts.
We'll be releasing a preview of SharePoint extensions
with the developer framework soon.
So stay tuned.
To learn more you can visit us at dev.office.com/sharepoint.
Thanks for watching.
Microsoft Mechanics
www.microsoft.com/mechanics