SharePoint Framework: Getting started with extending the UX

[music] Hello everybody. My name is Esaan. I'm a

Hello everybody. My name is Esaan. I'm a

principal product manager for Microsoft working on a SharePoint uh platform side of the house uh as one of my roles actually. So there's multiple roles like

actually. So there's multiple roles like many of us do within our day-to-day work. Now today we're going to focus on

work. Now today we're going to focus on SharePoint framework which is the most [music] widely adapted and used uh extensibility platform within Microsoft 365 where [music] we too have tens of

daily tens of millions of daily active users [music] every single day. That was tens of millions daily active users every single day. That makes sense in English doesn't

day. That makes sense in English doesn't it? Now um so super widely used uh

it? Now um so super widely used uh worldwide [music] uh by a lot of our customers across the different big customers, mid-size customers and so on.

And today again we're going to focus on uh showcasing uh some of the latest and greatest of few demos and thinking points on the SharePoint framework. Now

SharePoint framework has existed [music] uh to be available for customers and partners to use since 2017. So quite a few years and [music] so um many of you might actually know what it is. Um so

we're going to keep it still pretty casual today. Uh and we're going to

casual today. Uh and we're going to focus on SPFX within the [music] copilot and AI consumption. So what are the different scenarios which where we could use for example SharePoint framework.

Obviously [music] you can use SharePoint framework in many many ways. You can extend the list and

many ways. You can extend the list and libraries. You can have web parts. You

libraries. You can have web parts. You

can do Microsoft [music] themes extensibility and many many or adaptive cards extensions for Viva connection or within the my shareepoint dashboard and so on. So there's a lot of options

so on. So there's a lot of options available for you to take advantage. Um

but again today we're going to focus a bit about copilot integration [music] scenarios as one of the new scenarios which are available obviously also for SharePoint [music] framework. But let's

dive into the demo and let's have a look on uh what do we see today. So uh this is an example uh portal uh beautiful design portal for a example uh solar

panel component just showcasing the home side experience within a shareepoint and of course with shareepoint framework uh we can extend uh or introduce extensibility which could be in the form

of web ports or it could be in the form of list extensions or capabilities. So

it depends really on the use case uh what do we want to actually show but in this case again uh it is a shareepoint home site uh which is having a dashboard uh resources available some links um

some news and an updates and of course uh focusing on the people and company objectives as well we can use the shareepoint framework really easily in the context of AI and this is basically

being done using the Microsoft graph uh co-pilot APIs uh well like in this particular case in the demo now there's certain new APIs coming depending on when you're watching the video there might be other options

available as well but these options uh uh are great as well. So of course uh with SharePoint framework uh together with copilot APIs we can actually build

uh a custom chat experiences like this one. So have we done any projects from

one. So have we done any projects from California for our panels as in the solar panels and and of course the AI is capable of giving the responses back using the co-pilot API. So technically

behind of the scenes uh it's the same API which we actually are using out of the box uh but you could be actually creating uh or using that API within uh

your specific use case. So in this case this is relatively simple web part but you would actually configure the web part to have different sources different settings different configuration options only on specific pages and so on. So

again simple example of using a shareepoint to build a custom experience as a chat experience or a static experience or dynamic experience I would say um but then targeting that and

crowning to the data within SharePoint uh depending on your use case. Now uh

that's a relatively simple case uh but then uh here's a good example of a bit more complicated case. This is uh now we're using SharePoint framework in the context of a single page application. Of

course it could be a web part as well.

I'll show you in a second. Uh but this is a a nice example of using an AI for implementing my daily brief for example which is powered by the office Microsoft

365 copilot. And the idea of this web

365 copilot. And the idea of this web pon experience uh in the context of shareepoint framework is that it gives you the all the time the relevant context what you should be focused on.

So depending on the time of the day it's going to show either the morning right now or tomorrow. Since we're after 5:00 p.m. it's going to show tomorrow. And it

p.m. it's going to show tomorrow. And it

gives me then the insights of what's coming up tomorrow within my calendar.

It also gives me an an AI summary related on what's going to happen tomorrow. What are also the meetings

tomorrow. What are also the meetings which I should be preparing for the model and there also tomorrow's schedule and few additional notes for example for

recommended focus blocks or evening uh prep checklist. Uh and always remember

prep checklist. Uh and always remember to have a good night's sleep. But again,

we're using the AI to doublech checkck the current users calendar and information and tasks um what the person should be doing. And then those tasks

are driving the UX in here. So it's not a chat, but it's still using the AI and co-pilot APIs behind the scenes to get the relevant information which is available. So this is a single page um

available. So this is a single page um application uh but of course you can use SharePoint framework in a multiple other ways as way uh in the context of SharePoint um and actually across the

Microsoft 365 as well. So let me go to the homepage um and let me actually scan the page a bit. Uh so we're loading all of the capabilities and UX and elements on the page. Uh just making sure that everything is rendering properly. There

seems to be a white space there. It's a

good location for us to put that that wet part in. So let's put the page in edit mode.

And that's going to then load the page uh in the editing experience.

Excellent. So now we are in editing experience. Um I can actually modify the

experience. Um I can actually modify the configuration or update the text uh in that uh layout. If I scroll a bit down, I think we have a a wide space here. Uh

because we've been adjusting the the page content a bit. Uh so we can actually use that wide space um to add that web part in. As we can see uh it is a flexible layout section. So we can

actually put any web parts directly within that flexible layout. Um and that could be out of the box web port or it could be uh custom web parts as well. So

in my case I'm going to put a my top priority web part which is the one uh which is the custom web part which I've created uh listed uh to be available for end users um among the first party web

part and I can just drag and drop that to the page um and drag it in and drop it in. Since it's a flexible layout, uh

it in. Since it's a flexible layout, uh I can put it in anywhere I want within that boundaries and then it will actually load uh the web part and experience and directly within the page.

Um and you can basically see that it's the same experience which we were actually accessing using a single page experience directly within the page as well. So uh we can adjust this uh it

well. So uh we can adjust this uh it will render itself dynamically based on the size what it has. And of course this experience adapts really nicely also on a mobile experience. So you could

actually really easily access this in a mobile view uh where we can see the relevant information what's happening again in the morning right now or tomorrow. And because it's already after

tomorrow. And because it's already after 5:00 p.m. now it by default shows

5:00 p.m. now it by default shows tomorrow's plan. So I can actually start

tomorrow's plan. So I can actually start planning that. Now what's really cool

planning that. Now what's really cool about SharePoint framework before we close up uh for for making sure that uh everybody is up to date on that one I will just clean up clean up the page a bit. Uh so let's actually get rid of

bit. Uh so let's actually get rid of that space. Now what I wanted to show is

that space. Now what I wanted to show is the SharePoint framework uh also is not just only for SharePoint. It actually

does work uh even in Outlook or it works in the uh office.com experience uh or any other application which supports this kind of application capabilities or

accessing the application directly within the uh solution. So as an example, I will start my teams instance and that exactly the same implementation

without any code changes uh needed. Um

that experience is available in teams if we want that to be available in a team maybe in a teams channel. So you could actually add that experience for example as a custom tab directly in the tab but

that doesn't really make sense but it does make sense uh for example for mobile experience to have it as a personal application. So you can click

personal application. So you can click that on the left menu. In my case, I've already pinned that to the teams menu.

So it's actually loading dynamically there. And then uh as I access that I

there. And then uh as I access that I can again see the relevant information uh for me. Um and again it has the morning right now, tomorrow dynamically switching between the time of the day.

But that's a quick kind of a recap and update uh on the uh SharePoint framework. What do we actually have on

framework. What do we actually have on SharePoint framework? First of all,

SharePoint framework? First of all, again automatically hosted. You can use whatever JavaScript libraries you want.

React, Angular, so on. Typically,

Angular is most widely used, but again, it's not locked on Angular. So, if you have any other preferences, you can do that as well. And uh you can [music] deploy all of these centrally. You can

manage them centrally. There's

governance in place for the IT to make sure that you are approving [music] the right permissions and accessing uh right things. You can also pull them uh from

things. You can also pull them uh from one centralized location. And so if you have any concerns on a web part or permissions of a web part, you have a one centralized location, your app catalog to control that behavior. The

same app app catalog is the same location where the all of the application [music] code is automatically running. So the

code is running again inside of the tenant uh with compliance security in place uh so that there's no external access uh to the customer tenant [music] information if you don't want to. Uh

there's multiple options in here as well. But that's a quick recap on

well. But that's a quick recap on SharePoint framework. Uh hopefully you

SharePoint framework. Uh hopefully you enjoyed that.