Microsoft 365 Community SharePoint, 30 May 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Latest on using SPFx on building extensibility for SharePoint

Description

In this 20-minute Maker/Developer focused demo, Vesa Juvonen delivers an elemental review of core SharePoint capabilities to showcase how the platform retains its backward compatibility as the UX evolves. Core SharePoint elements are cards, web parts, extensions, app pages and more. GA extension options include Application customizer, Command set, Field customizer, Form Customizer and Search Query Modifier. Glimpse the new UX version of SharePoint Online announced earlier this month at Microsoft 365 Conference.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 30, 2023.

Demo Presenter
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Article - SharePoint in the AI Era: Introducing Copilot in SharePoint & 10 more innovations for creators | https://techcommunity.microsoft.com/t5/microsoft-sharepoint-blog/sharepoint-in-the-ai-era-introducing-copilot-in-sharepoint-amp/ba-p/3806069

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

A

Effects on building extensibility for SharePoint and and I'm going to show a nice demo, uh something what we showed as part of the Las Vegas as well on the future of the SharePoint ux and what it also means for spfx, because there's stuff uh evolving there as well. Now this will not be super.

A

Super super super cool demo, heavy I'm going to just call our destinibility points as we go through within the demos, but I do have few slides, which I wanted to go through as well typical set of flights typical set of things, so SharePoint framework uh is from our perspective and the easiest way to build your Enterprise solutions for Microsoft Trace is defined. It is a pro development storytelling and but it gives you the capabilities of of packaging.

A

Your code stop needing that code easily to anybody else or your customers or from a 110 to another, and you can deploy that and that's because of the automatic automatic hosting which is happening behind off the scenes. So so really The, Core Power of SharePoint framework comes from the fact that you do not need to call anybody in your I.T and say: I need to set up an Azure website if you're in a smaller company yeah, it might not be a problem for Enterprises.

A

Quite typically, it's a different organization which manages the Azure and one organization when it says to Microsoft 365.. So getting that additional configurations in place might be a problematic SharePoint framework has also the automatic single sign-on.

A

It is based on industry, standard, tooling, meaning a web stack development and a lot of our samples are based on a react, which is a good and a bad thing, and the reason why a lot of our samples are based on a react is that Microsoft itself implements and the native SharePoint online experiences using react and react components, and that gives us some level of benefits and potentially even on a paid size level and that's kind of giving us the influent controls and react controls which people are using as well.

A

Technically, you don't have to react. You can do angular, you can do amber. You can do whatever you want within the development and it provides the consistent Dev experience across the Microsoft 365 as well, which is really really cool now, a classic slide as well. uh On the on the let's say, historical things on on how we are approaching things so SharePoint framework is a modern, client-side development. It's a light web and mobile it. It is adapting on both sides. It Powers our own experiences, which is a really really important thing for us as well.

A

um So SharePoint framework is a safe bet, because Microsoft builds its own experiences with SharePoint framework as well, so, rather than giving you an alternative way of doing development, uh which Microsoft does not use it by itself, it's also Backward Compatible in a level which is actually quite unseen before, and so, even though today you would have a tenant where you use SharePoint framework version, 1.0 back in 2017 to create the web part, it still works in the SharePoint online and there's some awesome awesome magical things happening behind of the scenes as you're building or using the web part.

A

We actually do a runtime magical things um to to always use the latest version of a SharePoint framework, but for you, as a developer, you don't need to worry about things or you. As a customer or an Enterprise who've been deploying this. You do not need to worry about what happens within your tenant. It is Backward Compatible from that perspective. uh Sharepoint Frameworks reports, open source, tooling and JavaScript web Frameworks as needed, and it has it's it's a pro development, tooling for partners and customers.

A

Now we've been showing this following picture quite a few times with SharePoint framework, and it is extend it from just only from SharePoint to a numerous other areas as well, so originally first to Microsoft teams, then Microsoft Viva and the latest extension is Outlook and Microsoft 365 fan as the Microsoft teams. Apps are also extended to be available in Outlook and Microsoft 365. Using the SharePoint framework. You can just easily access the context where you are so you can double check. My SharePoint Mi and demo am I in Outlook.

A

Oh then, I behave a bit differently or I will render myself differently and and the polit points on the lower level. We actually went through our related single sign-on automatic code hosting and Industry standard tooling. Now, if you're wondering that is SharePoint framework, still a thing are people building, intranets and experiences. And answer is yes: yes, they are they're building a lot of intranets and taking a SharePoint framework powered extensibility into your use.

A

It is growing in a really really consistent way and there are certain bumps- and there are a few data hiccups there and then there are typical bombs related on the holiday series in the northern hemisphere, which is always visible within the adoption. I cannot say how widely it's being used, but I can say that it's been used by tens of millions of monthly active users for the customer parts. So, of course, anything in SharePoint online, which is modern, is actually built using SharePoint framework.

A

um So technically there's hundreds of millions of monthly active users for SharePoint framework, but for the custom pieces implemented by customers and partners. There are tens of millions of those uh users who are using them within SharePoint online. Today we wanted to actually focus a bit more on coming back on the basics. So to say: let's just talk about SharePoint framework in teams or, let's just talk about SharePoint framework in Viva: let's go back in Basics. So what are the scenarios which are supporting in SharePoint?

A

And this comes back on on maybe after the demo, even more, precisely because we're going to talk about a bit about the future of SharePoint as well, which is uh having really interesting- uh let's say: Futures tips related on the graphical interface and options and branding as we're going to say within upcoming video as well. Now in SharePoint you can build guards, so you can basically surface those same cards in a dashboard web part in SharePoint, which will be our building for Microsoft Viva.

A

We can, of course, build web parts, that's the basic thing and basic kind of an object within a SharePoint framework. We can build extensions and these are basically extending the list, components or Library components or they're, adding placeholders within the ux layer within a pages.

A

Okay, great option as well, and we can do app pages and we can do well actually, technically, we would be able to say even more in here, because we have the list formatting and all list overriding options and all of those, but we're going to show those in a second as well. So a lot of lot of options to build custom experiences, engaging experiences for customers and, of course, all of these options could be in store as well, which is really really cool.

A

We're not going to Deep dive again on the on the how the web part actually works. There's no point for that, but these are really good examples of building a web part. So webpart by default has a access on the user information. It has access. On the user token, it can be act on behalf of the user. It is actually being it's a JavaScript component which is being rendered in the ux, and then it can do things like accessing information in Microsoft graph or in apis and then surfacing that information within a basis.

A

So you can build really different kind of scenarios and options uh using that experiences. Of course, out of the box, there's a lot of features, but quite often customers are willing to say or say that well, I want to have that feature, but I still want to adjust that to be a different else there and that's that's an extensibility option for sure or if you want to build something like a dashboard. A bi dashboard for customers surfacing relevant information from backend. That could be an easier punch framework that part as well.

A

Now we talked about the extension options and there are technically five different main extension options in SharePoint framework for SharePoint, which are all G8 G8, meaning that they're production ready. We have the application customizers, which are basically giving you the options to inject components in the ux layer or the of the SharePoint.

A

So, basically, in the header and footer I'm going to do a pretty ugly demo on that one today, but there's a nice picture right now, showing like, for example, a global navigation which is embedded on the sides or a footer which I followed on the on the side as well. Common set extension is mainly for adding extensions in the menus, so, for example, in the context menu of a file or in document library or a list, you can add buttons there and execute code whenever actually that button has been clicked.

A

So the main difference here, comparing for example, for a list formatting, is that list. Formatting is Json. You cannot execute code with SharePoint framework. You can execute code, you can open up a panel. You can open up an item. You can connect to your backend in Azure. You can connect even to your own premises, using Azure connectivity as a completely seamlessly. So there's a lot of a lot of options to integrate from a library, management perspective or List management perspective uh field. Customizers gives you the option of overriding at the field, presentation value.

A

Unfortunately, for now it's only for presentation value not for the editing controls, but you can basically do a custom rendering of the field information. What you can see on the list form customizer is overriding the actual form of a list item, so you can override a design. Whatever kind of experience is using Pro code development Tooling in typescript and react on creating those forms, as you want, of course, you can use powerapps, you can still use alternative.

A

Other options as well, but SharePoint framework has is certainly an option to provide a pro development experience for overriding these things as well and then search query. Modifier is the one relatively actually recent. uh It went GA in 1.16, which is today's date. Query parameter modification on runtime when search query is performed in their site level, not necessarily A widely used things, but it's a good example of an extension which is based on a customer business requirement and so and then it was provided to be available.

A

There's good comments on the question on the chat just making sure that those are being converted. Ga basically means generally available production ready, and that means that you can actually use it in production so safely.

A

Now, from a demo perspective, let's have a look on some of this stuff uh in our tenants, so I'm going to do to use two different uh demo tenants- and this is just for showcasing the different web Parts behavior and, of course you can combine the web Parts anyway, you want so, for example, in this case uh we have a nice looking uh example layout for recruitment sites coming created, actually based on one of the templates which are available so I I just applied a site template from the site templates and if that actually adds some of the out-of-the-box web Parts on this page, and now that the box of capabilities and we can easily then change the behavior of the sites now with the web parts, we can of course, then modify what are the pieces.

A

We can modify the layouts and all of that stuff, but specifically for web part development. Let me actually go back on the on the sample page. Let me actually create a page from here and we can. We can create a new uh plank baits and, of course, in the blank page, we can then see the artist Works web Parts, together with uh the together with the custom web Parts as well.

A

So there's other works web parts available and then there's custom web bars, and this this case not too many web Parts, but still those are available. One of the latest features in the webpart side uh is, is that we're able to use also in a custom layouts we're able to use this? uh What are this top navigation top menu items and what it means is that we're trying to simplify the end user Behavior. So this is a really good example.

A

This is another box with part, but just as well, you can take advantage of these things within your custom web part. So if your web part has multiple layout options, we can show them as a quick, easy truck down and directly within the uh within the menu item, rather than making it too complicated to open up the proper domain and then selecting from there and adjusting things.

A

The settings are exactly same, but it's it's basically simplifies the options from an entry subspective and to provide them directly in the top menu, rather than forcing always the proper domain to get open so having those key options available and exposed in here now, in our case, uh we we of course can do the web Parts themselves are super super flexible, so the web part can actually be used in multiple different ways. They can be used as a uh individual web Parts. They can be used as a full page web Port.

A

They can be used as a full screen web part um or just a typical web part on a page and they adapt directly on the layout. So, depending again on the size of the of the layout, we can do different kind of implementations now, partly dependent, obviously how the web part is being implemented, how it adapts, but by default all of the web parts are responsive, and that is a great great, great uh good thing, because you can access the information, then using any device which device you want to use.

A

Of course, to be fair, it's still true that if you go back on the uh on the Viva scenarios and and Microsoft Viva connection dashboard, let me actually open up an example in here. These are much more fine-tuned for the mobile rendering.

A

So as an example in here we can say the dashboard in this case, it's pretty big, because I have a pretty high risk resolution, but now we can say that it makes more sense in a mobile to have a more dashboard driven design than actually the the layouts or squeezed of the web part in this case again, depending on the customer case, depending on deployment.

A

Now, what else can we do with uh which SharePoint framework in uh in the SharePoint? uh Of course, we can do things like a placeholder, so this is a typical ugly placeholder and, in my case, I just enabled A1 Central uh extension uh to be available within all of the sites within the tenant. So we can do header sections. Typically, that would be something like Mega menu or a placeholder or notifications like the factory has an alerts or whatever, whatever is the customer case, or we could do menu down here.

A

In this case, we can actually see two different extensions getting stacked, and that was intentional as well, so they do stack in so you can include multiple extensions in the page. If needed, does it make sense debatable? Maybe it makes sense in this case only to have a one one folder and not the second.

A

On top of that, and of course the footer is over uh floating on the page, and if I go to select contents, it's actually still there as well, so it's kind of making sure that the placeholders are always visible, regardless, where you are on a page. What's really cool about these extensions, and this is the application.

A

Customizer extension is that you can control them in a tenant level and what we mean with that one is that you do not need to deploy this application, or this footer or even the web Parts in a specific site level, which might have been the requirement in the past for SharePoint, add-ins and all of that stuff.

A

We have this really cool tenant-wide extension list, which is available in the app catalog there's more documentation, obviously in our docs how this works and I can control what are the extensions which are available and visible within my antenna and what I mean with that? One is that, for example, if we edit this one, that's actually the hello world message. I can say that this is now disabled and just in case, let's actually disable that one as well, and then we stop editing there we go, those are now disabled and disabled.

A

The global folder is enabled and Global footer, let's actually modify that a bit. If we, if we don't run out of time, let me actually do here. Can we do this? It's pretty ugly, there's a spacing, but can we do? Where do we actually have something? Some text where we could change Contours or sharing is caring. Let's not a explanation mark. Actually there oop not the whole thing undo. No, no, no, no I'm praging it! No!

A

ah Let me do this demo effect. There we go there we go so we can modify these extensions um as any way we want as we as we from the centralized location. An idea here is that you do if you want to have a centralized definition, that's a periodic definition, centralized control, for example, for x, uh for the the footer or, for example, you want to make sure that every single document Library within this tenant would have a certain button or it would have a certain context menu in them.

A

You can do that from a one, centralized location. You don't have to deploy the solution to every single site you deploy that to a tenant and it will be available across the across the whole functionality. Now, in my case, I, disabled, those header and footer that we can say that those are now gone and do we actually still get where's our footer footer.

A

At least we got rid of the the ugly extensions and they are no longer visible within a page now. The applyment of those settings from the tenant white extension might take a few minutes every now and then, and that seems that that's could be the reason why it's actually broken. That's got to be pretty ugly anyway. Let's not worry about that too much. Now, that's a quick, quick uh kind of a recapping on the extensibility points. Again, we can do overriding of the new menus uh for lists and libraries.

A

We can do the menu items, there's many many options, how we can extend the functionality and get them available, for example in document libraries now. What I wanted to also show is that in the Las Vegas within a few weeks back it's not too far from the Microsoft 365 conference.

A

We did announce that we're actually working on a new ux version of SharePoint SharePoint online and I'm, going to show the video first and then I'm going to talk about and call out things and the video does not have sound, but I think the frame rate should be good enough for saying the different options.

A

What we're looking into making possible in future within SharePoint I'm gonna talk about things, but you can see that the graphical elements, what we're seeing here are not exactly the same or the flexibility is not exactly the same as we can do right now in SharePoint. So this is a new ux version of the SharePoint which is getting currently worked on.

A

So a lot of new options, a lot of new layouts, a lot of new, more engaging ux, more options, more graphical elements and all of that stuff. So again we are kind of a modernizing uh the SharePoint ux, even though currently I think we still call it the modern UI. Currently. So is this then Modern Motor. uh But the idea here is that we are.

A

We want to make sure that the SharePoint, the ux, is flexible enough for customer branding elements, so we're introducing a SharePoint uh print center uh with the custom phone support, we're introducing a lot of lot of additional capabilities, and there will be more announcements coming up in Autumn So within the next semester. Ignite will be obviously a big big conference where we will be showing some of the stuff live as well.

A

Now the cool thing about the reason why I wanted to show this is that the cool thing is we're not introducing a new development story. We will be using an evolving SharePoint framework and all of the SharePoint framework components which you have implemented already will be working within this new ux and the new experiences as well. So, rather than introducing again a new model, we want to have a perfect, compatible layout and Backward Compatible options. Whatever your Investments are.

A

You can actually take advantage them in the future as well, and that's really the core mental mindsets from SharePoint framework from a day one. So we want to make sure that, whatever code you have may be implemented in SharePoint, you can actually extend that to be available and exposed, also in teams or in Outlook and Microsoft racist file. Rather than forcing you to rewrite any of the extensibility foreign.