Microsoft 365 Community Viva Connections & SharePoint Framework, 22 Sep 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections and SharePoint Framework community call 21st of September 2023

Description

Viva Connections & SharePoint community call on September 21st 2023. Recap on news and updates from Microsoft and community projects, followed by demos by the community.

✨ Call included three demos:
• João Ferreira | @joao12ferreira – Embed Teams chats in SharePoint pages
• Martin Lingstuyl (I4-YOU) | @martinlingstuyl - Building a SharePoint New Site Form Look-Alike
• Dan Toft (Evobis) | @tanddant - Editing Properties with a Tenant Wide Extensions Manager

Q&A takes place as always in chat throughout the call.

💻 Screenshot summary for this call | https://warner.digital/pnpsummary09072023/

Please see the blog post for details on demos, project updates and activities.

👏 Host:
• Chris Kent (Takeda) | @thechriskent

📃 Agenda
00:00 Introduction
04:57 Latest on the SharePoint Framework
06:48 PnPjs
09:05 CLI for Microsoft 365
11:00 Microsoft 365 Developer Proxy
11:48 Reusable PnP SPFx controls
12:28 Viva Connections Toolkit VS Code extension
14:05 PnP Search web parts
15:20 New samples
17:41 Picture time with Together Mode!
19:17 João Ferreira | @joao12ferreira – Embed Teams chats in SharePoint pages
28:45 Martin Lingstuyl (I4-YOU) | @martinlingstuyl - Building a SharePoint New Site Form Look-Alike
40:41 Dan Toft (Evobis) | @tanddant - Editing Properties with a Tenant Wide Extensions Manager
51:51 Closing

📝 Learn more
• Dynamic site form sample shown by Martin - https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-dynamic-site-form
• Dynamic site form with location picker shown by Martin - https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-dynamic-form-with-location-picker
• Build your first SPFx Form Customizer extension - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-form-customizer
• Editing Properties with a Tenant Wide Extensions Manager shown by Dan - https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-extension-manager
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call

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

Sharing is caring! You are awesome! 🧡

A

A

Connections and SharePoint framework uh call here uh it's very exciting: we've got all sorts of exciting stuff move on to the next slide. There David gotcha good, all right great all right, so we got all sorts of community updates project updates, it's gonna be exciting, we'll take a picture uh and then we've got three awesome: demos from John, Martin and Dan. uh We got one on betting teams, chat SharePoint. You thought you were bringing SharePoint into teams now. I could bring teams back into SharePoint we're gonna, go full team section very exciting. All right!

A

We've got a new site form lookalike, very excited about that and then Dan's coming in with a tenant-wide extensions manager, very, very cool stuff. All right, let's go!

A

Thank you! I'm, not gonna, explain that for the recording right. Why I'm doing that perfect great all right? Well, if you haven't had a chance to get involved just yet uh be sure to check out all these awesome resources we got for you. I got a ton of videos, including this one, all right, you may be watching this right now. What that's crazy right! We've got a LinkedIn group, so, if you're over on LinkedIn, you want to do all those uh I, don't know professional type things you can do that with us too.

A

We also have a Discord group, uh we're gonna talk about at the end, uh if you're a little cooler than the LinkedIn group, uh and then we've got all sorts of different open source repositories for you, a ton of sample Galleries and we've got literally hundreds and hundreds of samples available for you all for free for you to take advantage of uh to to use in your own Solutions or to give back to the community, and you can check all of that out and get all those Links at that primary link there that AKA dot, Ms, slash, Community, slash home.

A

Do that perfect and then, of course, we're on our calls here right. So this call uh is the uh the last one there uh you want to check that out, of course, but if you go to that Community slash calls link there right at the bottom of the slides, you'll find links to all of these things. So you can join. uh We do this one, every other Thursday. We rotate with that uh General Dev, which I think we're calling the Power Platform community in M65 call right, but then there's also.

A

These Microsoft calls on Tuesdays and we've got monthly calls with Power Platform and off standards, and all these get recorded and posted to YouTube, if you're not able to attend at the time. So do it.

B

Okay, I can follow, you don't have to keep grunting, but I think everybody does love. It all right. Think.

C

About the people who have no idea, why we're doing this.

D

So no clue yeah.

C

Join two minutes late and it's like what. What is why? Because.

B

It's just grunting.

C

Because David's sharing Chris.

B

Is talking it's a team effort, everybody? Yes, yeah.

A

I mean it's probably for the best I've got a message, because I did activate my windows right now, so you know it's great, that David's doing this all right, but make sure you check out our Power Platform weekly call the next one here is on Wednesday the 26th of September. We got three awesome demos there as well Tuesday, so.

C

A

E

A

Well, you could go on Tuesday or you can watch the recording on Wednesday. Look how I I spun that one all right and if you are wanting to be one of those presenters, well good news. If you are able to communicate, uh you don't even have to click on the next slides button.

A

It turns out- uh and you can present you just come over here to this uh this link here and you can fill out this form here and we'll get you scheduled to the call you can demo off something that you've contributed to the open source Community, but also demo, something you've just built. That's really cool that you want to inspire others with. It's all good. All right, I think this one is, uh let's see David talking about this one.

B

Yes, yes, I will cover this one. Thank you Chris. So friends sharing is caring. You know it well and if you don't what it is, it's a program that's going to provide you Hands-On guidance. What does that mean means? We're going to join teams calls together we're going to walk through a number of things that you may not be sure how to accomplish right. Now, things like submitting to GitHub doing those pull requests. What is a pull request?

B

We're going to do it together, you're going to be feeling confident and comfortable, and you can leave ready to contribute to this community. We've got a sample contributor session scheduled for October just right after the Power Platform conference. So when you go get all those exciting Innovations and ideas that you want to do we're going to be here, for you so definitely go get scheduled for that AK dot. Ms sharing is caring. Do I grunt it myself to move to the next slide Okay.

B

So now, let's talk about how you are going to be recognized, we want to recognize you. We have a community recognition program because we want to give you the opportunity formally and officially show off all the amazing work that you're doing and we're getting into the fall. So that's going to bring lots of fun thematic badges. So you can see. We've already got our spunk up, spunky pumpkin spice a lot of commits ready to go. You can earn that anytime between September and December and, of course, we're already prepped for Oktoberfest.

B

It's right around the corner. If you contribute to any any of our repos, you are going to get a October Fest badge, but it's only available in October, so go get signed up, AK, dot, Ms, slash, Community, recognition, Chris.

A

Yeah, so uh all right, I'm, just gonna turn it over to vessel for some SharePoint framework updates.

C

There we go excellent, so uh we announced the SharePoint framework 1.18 ga uh on 12th of September, so that's one and a half weeks ago. So please use the 1.18 we're not aware of any uh issues related on this one and simply working fine. It is also using node.js 18 version, which is now the recommended versions to use. Let's go to following site, and here we go so a few examples of 1.18. So the key point there was really the focus on Viva connection.

C

There is a lot of a lot of flexibility now on the Viva connection card, so you can really build those engaging dashboards. uh So there's a lot of options to do, for example, text boxes and combinations of things. So a lot of article stuff there, let's go to the following Slide the following slide is quickly showing you uh the close button, which is pretty amazing.

C

Actually uh we are curving to this moon right now uh on the worldwide adoption on Facebook FX, so um SharePoint framework does give you the pro developer, storyline for Microsoft, trace sd5 and it's cool to say that the development is growing. So the adoption is is going off the roof. The following slide is quickly listing what's in 1.10, and also we're working on that River connection Advanced card designer, that's a really cool feature and more details on that.

C

One, we'll get more demos on that for sure in the community course and then there's the both part Vivo connection Aces, which is coming pretty soon as well on 1.8 in 19, there's nothing! We can share at this point too much, but there's going to be cool cool stuff across the stack. So a lot of a lot of awesome stuff. Let's then move to the project updates across the uh individual initiatives.

B

That's I think everybody's waiting for a vesa grunt.

B

Classic love it respect.

E

B

A

Makes any idea? Yes right.

F

There you go so so what you're saying is just breathe in and out of a paper bag and I'll be okay, all right! um Oh sorry, yes, version 3.18 was released. September 11th, uh we did fix a small little bug. There was a couple of JS extensions in the queryable package that were missing uh to allow for node uh common J. Excuse me node.js Imports, so that got fixed um mostly. We are focused on version four, so that's well underway.

F

uh If you are interested in what's going on with that issue, 2678 uh links to our project planning board. So you can see we update that regularly when we come up with find new things or come up with new ideas or whatever, but also there is a V4 branch and you can see the changelog is underway there.

F

So you can kind of get a preview of what's been happening happening and what's what's upcoming, if you are interested or have used, our queryable extensions feature in V3 We believe We will be deprecating that for V4 uh we believe it's unused uh and it's causing some extra work in the pipeline. The standard pipeline that we'd like to remove because it adds a little overhead that we think we don't need anymore, so we're thinking about removing that if you have an issue with that, please do comment or reach out to us in some way.

F

The V3 nightly builds are still out there. So any bug fixes that do happen are pull requests that do get merged on the V3 uh Branch will show up in that nightly build the next day. You can always follow us on LinkedIn the Microsoft 365 platform Community. We do posts there for any updates or listings and if I feel like it, I will sometimes log into X and post on on that and 365 pmp.js account, but we'll see how long that lasts.

F

All right, um I am not going to grunt I'm going to go like lay down with a cold compress and I will see you all later back to you. Chris.

G

I'll do a Julie.

A

Grunt, that's my first Sula.

H

Cheers Grace, uh so we are basically on our way to releasing V7 of CLI of Microsoft 365 at the end of the month, so we are uh releasing the next version into beta. So if you want to try out V7 now, you can just use the uh the next tags for installing from npm or from Docker to get the latest uh CLI major version.

H

So this has a few new commands, so we've got Azure ad command for removing Azure ID groups, uh a new command for getting tenant information from your M365 tenant and also we're supporting the project upgrade to 118 for SharePoint framework. This is a huge update and I just want to show on the screen how many lines of code and files this has changed. It's huge.

H

um This is the main reason is. We are moving from common JS to uh es modules, which is going to give us a massive performance increase as well, which is fantastic. So ever everyone who's been involved in this code side, dark side. You know it's been a massive effort to get to V7 I highly, encourage you to look at the release, notes, go to aka.ms, CLI, hyphen, M365 notes where you'll see some breaking changes, we've kept them to an absolute minimum, but there are a few that you might want to take a look at.

H

um We have our first office hours, call as well. That's happening on Monday. So if you're interested you've got questions around V7 as well, please jump into our Discord server that you can join at aka.ms and slash CLI hyphen M365 Discord. You've got the event on there and you can just sign up and join in and come and have a chat um and with that on to the next slide.

H

Okay, Microsoft 365, developer proxy. uh We don't have any new releases or updates to really talk about this week, but it's more about what's coming and what's coming next week is the new um 0.12 release where we're going to have the ability to Mock and enter request. So that's Mark, like the second or third request, simulate the slow API responses mocking the graph batch response.

B

H

For unlocked requests.

B

H

For custom rate limiting uh so again that's going to be arriving at the end.

A

All right be sure to mute yourself thanks all right. Let's go do this one all right, good, all right! So, uh let's see am I talking about this one yeah, so reusable spfx controls, if you haven't, had a chance to use these uh and you're using spfx at all. uh What's wrong with you right, you got to get on these. You got to get into them. So there's all sorts of awesome things. So don't write your own people, picker I, don't write your own list, picker!

A

Don't write your own file, picker or any other type of picker. Perhaps uh there's way more than just Pickers in there, uh but again start with those uh you're gonna get a whole lot further along right. Don't have to recreate you know a taxonomy picker for the 1000th time right start there, and then you can work on the stuff that you actually have to get done all right so check. Those out there's been some updates very exciting. Moving on search connections, who's this.

I

This is Adam Adam you there yeah. That's me yeah I'm, here so uh Viva connections toolkit we released a new major V2 on a day in the in in the past, not so long ago. So, if you are, if you are already using this extension, you don't have to do anything. It will update automatically. If you don't, do it don't use it, please give it a try. We added some cool features that will help you create a cicd GitHub workflow for spfx project and action that will help you rename your your spfx project.

I

We support now site level up catalogs to deploy your package and many many more like code Snippets so be sure to give it a try and if you are interested in all of the details, be sure to scan that QR code or go to the release blog post in the bottom right corner of the slide. We are already looking ahead for the V for the next minor release, 2.1 and this will be more technical updates or no new features rather expected.

I

Maybe some bug fixes I hope not because currently we don't have any and we're already looking ahead for the V3, so we are getting ideas if you have anything that is like daunting and you would like to be to do better automate some stuff regarding spfx be sure to join the discussion. Let us know- and maybe we'll do something for you in this area, and we already have a bunch of those ideas.

I

So if you want to vote on something that should meet the V3, because we cannot do anything at once be sure to give this link a check at that. Also, okay, I! Guess: uh that's about it! uh Grumping.

J

All right, thank you um well release this Wednesday I probably should I remove that, because that was probably two weeks ago uh or maybe.

A

Four, even.

E

J

A

J

It was a Wednesday right, um I would. If someone is up for it, we need to update the pmp.js of these web parts to get on board. I think we're on version 2.0 or something right. We're way way way way back um so that'd be good. If someone wants to help out, we have some other things which should be added as well. I have very limited time myself to do development and same as Frank so contributors contributors contributors.

J

If you have a feature you need for your customer, please do a PR and don't do custom, work and I know people do custom, work and custom solutions for the customers and not contributing back. Don't do it. Sharing is caring and I saw. There was a hand up by my good friend Cosby.

J

Do you have something you want to say.

B

I think he was just accidentally hitting that yeah instead of the clap.

I

Maybe he wanted to Grump here.

E

That's right so was that a reference to uh developers, developers developers that was impressive. All right. Let's talk about the spfx samples, uh we have two repositories for extensions and web parts and you can find them all under aka.ms spfx web parts, and these are the latest updates. We have a new application extension uh that is hidden for guest user by Muhammad Mayar. We have an update to the rhythm of business calendar by Dan Turley uh uh accessing Azure, table storage data using Azure API management by ejaz.

E

That's a new web part, and then we have a new web part called cascading drop downs and it seems like a classic. uh We have an article on this in the Microsoft documentation, but uh someone from the community reached out to me and said: hey I, just can't get this to. Where can you give me a sample of it? And so now there is a sample that shows a maybe more up-to-date version of the cascading drop downs. Go.

E

Take a look at these new samples, they're all available at akms, spfx webparts, and we look forward to any of your contributions. If you've got some cool samples to share, please don't hesitate and reach out and submit a pull request, and that's it for me back to you.

A

All right Derek you there!

A

No! No! Yes, sorry! Well, uh there's some Aces and uh you want to check those Aces out. Oh.

B

A

Okay, good I'm right here better than I did there.

K

You go I I'm, not grunting, though um all right so Aces we have some great new um 1.18 GA Aces from Alex um showcasing some of the new functionality that we've got. We've got an input card for people, search a survey prompt and a way to start a chat, all sort of using this new functionality in 118.. But if you have more samples or you're doing stuff with 118 and Aces, this is the place where you can put. Those I want to be doing some new PRS and get those new sites up.

K

So please, please, please submit new stuff and next Chris.

A

Perfect all right, I think it's uh time for you to turn on your cameras and we'll take a picture of all the pretty people and do other ones it'd be great. uh You know everyone as we're waving, feel free to grunt.

C

No, no! No! No! This.

A

C

Monkeys yeah: there we go. Oh, oh now, the monk has gone, no idea: okay, fine, okay,.

L

We have 50 cents.

C

A

And there's a bear.

B

A

Else see the bear okay.

B

Yeah, oh I'm, sitting right next to the bear so.

C

So I'm literally trying to stare at it right. What's going on, okay, a few more seats, a few more seats and I will put the recording on and let's do some hand-paping everybody um annual, crap, okay FUNimation, that welcome to be and awesome to have you in a call just been a really weird intro. uh Hopefully we will not continue the grunting in the future.

C

Excellent thanks, everybody fullcraft AKA FUNimation! Out of that. So let's go to the demos of today who are those Chris all right, so Chris.

A

David Chris, it's me forget David, he's out of here all right. Joe you've got the embed teams, chat and SharePoint Pages take away whenever you got it.

D

D

D

Let me know when you can see it yep.

A

We see it go for it.

D

All right so uh hello, everyone, my name, is I'm from Portugal and I'm, an office or Microsoft 365 development, MVP and today I'm here to um Talk a bit about an experiment that I did a few weeks ago um to show how to embed Microsoft teams chats um in SharePoint pages, I've been thinking uh in a solution similar to what um LinkedIn has for quite some time.

D

So um if you are not familiar with LinkedIn, uh there's this messaging um option in LinkedIn, where you can chat with people and quickly open, um chats and and have conversations, and my idea was to do something similar to um SharePoint, bringing Microsoft teams to the context of SharePoint Pages, modern, SharePoint Pages across uh all modern um sites. So if I was working in SharePoint in the browser, I would be able to quickly access to the chats without the need to open um the the teams.

D

Client, a problem with the solution of that that um preventing to implement is that it required a lot of work to implement something native. It would. It would be basically reinvent uh Microsoft teams, inside um of SharePoint, with a SharePoint solution with a millions of Articles to Microsoft graph and um I. Never did it uh because of that huge uh work.

D

Few weeks ago, or probably two months ago, I think this was around Microsoft. Build I saw this um announcement where external links from Microsoft teams um conversation would open in Microsoft Edge. If you are a Microsoft Edge user. If you are not to that, this feature doesn't work for you.

D

um This would open the team's conversation in the context of the link, so you would be able to read the page that someone shared with you while at the same time um you would see the conversation uh right next to the page and you would be able to quickly reply uh or add relevant information um to this. So I looked to this approach from Microsoft, officially supported everything that I was planning to implement already built, and this was too good to be true, so um I went um to think a bit more about it.

D

I did a quick, inspect and I found that this is actually a usable um URL that you can get um and display inside of SharePoint. So for those of you that were thinking that I did a huge implementation of this solution. Building everything manually, no I didn't I'm using what Microsoft has um so. This is uh what is happening behind the scene so now to get this inside of SharePoint.

D

uh What I did was uh created a SharePoint framework um extension to add Microsoft teams to the footer of the page. So basically, the SharePoint framework extension uh injects Microsoft teams um in all modern Pages. This well, at least in my um in my tenant I deployed it globally, and um it adds that component to the bottom of the page. So, rather than seeing the PowerPoint slides, let me bring um up here the.

D

um Browser- and let me show you exactly what this is so, as you can see here at the bottom, exactly like um linkline has there's this component that opens and closes and reveals the chat um it works uh quite well. I was impressed that it worked um this well, um but there are a few things uh that we should take into consideration um in this solution.

D

uh One of them is that this link doesn't work uh and um it picks the windows where the Mac OS theme that you have on your computer automatically so I'm using the Park theme. So this displays um in dark mode automatically and um if I was using the um normal team, this would be white so other than this you can have chats uh wherever you are inside uh of SharePoint.

D

This follows you along uh follows, along with you um throughout the modern SharePoint pages, and it actually opens uh and closes uh with a smooth animation like LinkedIn. This was the part that took me the most uh to get done here. This is not the other, um a finalized solution. I don't um have it yet um in the repo. So I still need to work a few things out here, but let me just bring up visual studio code, uh I think I have it with enough Zoom, so everyone can see it uh basically, there's nothing!

D

There's nothing uh too crazy in here. uh What this is doing is basically creating the uh bottom placeholder in the application, uh customizer and I'm, using uh PNP um just to get the um user photo. So each user gets its own profile picture exactly like the one in LinkedIn and then um there's this um react component that has the iframe here. This is the part that does automatic.

D

um So this is the secret sauce of this solution. uh All the other things is just the the the drawer to open and to um close this out. So the solution, it's in reality, super simple, but I've I've been I'm finding it a lot um useful inside of Microsoft teams, I've been um using it in my own tenant and I've deployed it in a few other tenants uh actually uh internally in the company as well. Just the test and people is loving it and it works uh quite well.

D

The problem with it and the reason why for me to not have yet submitted it to the repo is that um I need to work a few things around to make it uh work. So one of the limitations that I told you already is this open in Microsoft teams?

D

um If you click on it, it doesn't do anything. um It shows an error in the console. Well, this is a nice frame, there's not much that we can do in here. Another thing is that if you have been chats, sometimes they do not show up in here um others it does, but the main thing that uh prevented me from submitting this to um the repo uh yeah is what happens when you go uh to a SharePoint page in Microsoft teams.

D

If this happens, then you will end up with teams within teams, and um this is the part that I need to take care of still I need to get the context of teams from the extension. It's not that easy or um free to do like it is with weapons.

D

um I I wasn't able to get to figure out a previous solution to do it from the extension and I don't want to load it, uh or at least I want to create an option uh for the extension to allow the extension to either be loaded in Microsoft teams. If that's your goal or to prevent it to load from within this.

D

So if you are already in teams uh well, you can have the access to chat here, but there's no purpose on it, because it's already here um well, this is the reason, and this this is the only thing that um I I have to do so.

D

I hope that in the next few days, there's an UPR to get this available, so everyone can contribute and move this forward, um and this is pretty much um how what it was done. It generated a lot of um noise when I posted this um on on Twitter a few weeks ago, uh but now you know the secret behind um the solution and hope uh you like and hope you you will soon um contribute to move it forward. All right guys back to you.

A

Very very cool: uh that's kind of uh awesome solution, I like to see for your moon stuff around and figuring interesting ways to do stuff. It's awesome. uh Let's take a look over uh Martin got a SharePoint news site form lookalike for us all right.

L

Yes, all right, let's first try to get you seeing my screen and everybody sees it correctly: wow, okay, so um building a SharePoint new Sci-Fi form lookalike! That's the subject of the talk today. um I am let me click I am Martin link style from the Netherlands I'm, an MVP in uh M365 development, I'm.

L

Also a Microsoft 365 architect at the great small company in the Netherlands called eye for you, business solutions uh and my daughter just drew this the other day, so I thought I, just I'll show you you could even see that that she heard that I was an MVP. So if you want to follow me, just look and look me up in the all the socials or uh uh I've got a Blog where I post some things and I also posted some things about the subject of today.

L

So the scenario so SharePoint contains, of course, some lovely features like creating a great looking site in minutes. You get this nice wizard for and form that lets. You create a nice site with a good looking URL and group mailbox, which is superb, of course, but for many organizations this is of course a bridge. So far, they feel like the creation of sites should be restricted because it often leads to HR enormous mess and they are not wrong. I've seen it happen with a lot of our customers, so these organizations apply governance rules.

L

You know disabling self-service, site creation, one of the first things the first things to go: restricting access for creating sites to people with the appropriate admin permissions so far so good, but now they require a good process to help users get to those new sites to let them request new sites in an orderly fashion and not that need to go to the it support desk and you know uh knock on the door. You know. So can someone create a site for me now?

L

You can, of course, do all this manually, but it's also a great area to apply automation too.

L

So, and plenty of solutions have sprung up to fill these requirements. They allow users to request new sites in an orderly fashion, with approval, different site templates, etc, etc. For example, a very well known, uh one, of course, from the Microsoft 365 platform. Community is the provision assist solution which I can safely reference without the danger of product placement. I guess so. This is recently published. It provides a very nice experience in teams combining a power app for user inputs and logic apps for automation, etc.

L

For exactly this purpose, but of course, we can also do it in different ways. So what I'll be showing you today is a way to allow users to request new sites based on a SharePoint list and list form. It does not actually create the size. It just allows the possibility to lock the requests or in an orderly fashion, and that's what this solution is about. So this is what you need. You need a of course, a SharePoint list to save site requests.

L

You need a spfx extension, a form customizer, and you need a very nice control from a uh from another open source repo in the Microsoft 365 Community, a dynamic form which you can find on the on the site as well, and the dynamic form is really a fantastic thing um and I would like to show you how it works. It's uh it's in a very easy way to generate an Empire form for you without writing, um so much as multiple lines of code. So let me just jump over to what I have here.

L

So, as you can see, I've got a vs code open on my screen.

F

L

I just did was generate a very basic form, customizer and SharePoint framework extension. So this is a solution as you get it when you generate when you create it, you know using the yeoman templating when you run this and apply it to a SharePoint list. Form This, Is, What, You Get. So it's completely empty right. So uh it's very nice that we have been offered this opportunity to create new forms, but you have to implement everything yourself from loading the list item to viewing rendering the fields to saving the list.

L

Item back everything you need to do with everything yourself, so the dynamic form is actually something that's very easy to snap in here and get a fully functional form. So let me just jump back into vs code and show you how this can be done if I can, if I just paste this in this is the dynamic form there's one line of code. Of course, I have to reference ceramic form from the package that I have also, of course installed just now and if I now save it, it will look like this.

L

So this is just a fully functional form.

L

Which is loaded or generated by the dynamic form based on the fields or of metadata that are available in my list now you can see that all all kinds of scenarios you can use this, for this is really brilliant.

L

Currently I've just loaded a few I've just added a few Fields, you know, there's a URL field, there's a people, picker, there's a term store. Picker everything works like a glove and, if you hit save you can just automatically save it back to the list. So this is really a very cool thing.

L

So let me jump back to the presentation because um having having seen this, how can we use this to create a new site form and what we need is a an easy form with metadata, just like what we have seen it should have, but it should also have similar features as the out-of-the-box form, which we have right, uh of which I have a picture right here. So I want to be able to to write a name of the site and it for it to to validate if that URL is available to us and to validate.

L

If that group mailbox is available to us, this I want to do so. For this to work, you would need to alter the functionality of the dynamic form a bit. Fortunately, there's a few fantastic features in a dynamic form that allows you to do this, and this is called These are called the field overrides.

L

So this is actually just a a thing. You can an object, you can inject in your Dynamic form, and you can say you know uh if the list contains this field with this internal ID called some fields in the screen here, and let me let spfx render it like this and I've just returned a render field function here, but you can you can go nuts on that you can. You can generate entire react, XML or reactor nodes and do all kinds of things that you think about. So the field of Rights is a really powerful.

L

You can do all kinds of things with this, and the second thing you need is, you can just include it like this. The second thing you need is a couple of events and those are also available.

L

There's a list item loaded event and then before submit events, and using these events you can you can take care that the data that's coming from the list form is being shaped to fit in your rendered field, and you can use the state for that and when saving the formula you can, you can make sure that the data is shaped back into the uh into the uh the uh the data shape that SharePoint SharePoint will expect.

L

So, combining these two things you can make a fantastic form. So let me just show you how that works. I've got another solution open here, and this is actually just in the I have submitted this to the spfx extension samples repo. So you can download it over there. As you can see, this Dynamic form is a bit bigger. It contains a couple of extra properties, but if I run this, it will look as follows.

L

So, as you can see, this is the same form that I had just now. It's actually rendering on the same list and I've got a few interesting features here. I can just type in a title, so let's say how shall I call this test I'm very creative today now you can see that that the form is is looking up if this URL is available and it will just show more or less like how the SharePoint new site form works as well.

L

It will show you that the URL is indeed available and that the group Alias is available and if I like to do it in a different way, I mean I have got some other sites. I can just try out if those are available and you'll see that it will check and you'll see that it will say. You know this. One is not available.

L

And if I would click save, it would just save the content to this to the list.

L

So, as you see, this is very powerful. We've got a very simple form for the most part it will. This will be rendered exactly as the the list is is built up and for the parts that I want to change. I can just change them up and be creative about it and create something very nice looking with which we can generate proper requests for new sites, uh just a quick words on the API. So there is this um I just checked.

L

You know, there's no I, think no public apis for this, but I just checked the the actual new site form from for SharePoint, and it contains a couple of uh a couple of endpoints that you can use to validate. If a group name is can be used to validate if a site URL can be used, and these two um I just implemented these two and hung them up in my solution.

L

Of course, you know if Maxwell changed some changes, something up about one of these, then it might be that my solution drops out on me because it's not a public API, there's no backwards compatible backwards, uh whatever All Nets no guarantees from Microsoft. So you need to be. uh You need to keep that in mind, but still it's very a very useful API to use.

L

um If you want to see how I did it just look up the two look up, some any of these to uh any of these two folders into here. Spfx extensions, repo I've got one on the dynamic site. Form and I've got a simpler setup for a location picker, which just shows how the how you can use the dynamic form in in another simple way um and I've also included some of these documentation points well, I, think that is it back to you, Chris right.

A

Yep you did it very cool Martin. Thank you very much and uh Dan you're up. uh You got your 10 wide extensions manager and that's all yours. Whenever you're ready, absolutely.

G

G

um So yeah I built a uh first I should mentioned. Who I am my name?

G

Is Dan uh I'm, a Microsoft, 365, developer, consultant kind of thing based in Denmark I am mostly active over on Twitter X, whatever you want to call that by now um and I do a bunch of spfx stuff, um so the sample actually kind of came about um in a weird way: uh they're they're sort of a thing where you have these properties when you do attend white deployed extension um and what I realized is that a lot of new developers don't actually know they're there um and then leverage the options they give.

G

So you might actually be able to save yourself some time save a couple of API calls um and for those of us who are familiar with them and used them in the past uh they tend to be quite frustrating to edit because you're editing Json in a quick edit in classic SharePoint, which is um always a fun experience, and uh if I recall correctly during a committee, call I think it was editing it and everything sort of fell apart on him uh and I realized. Okay.

G

This is not just an issue I'm having because I don't understand classic SharePoint, it's a general issue. People are having um and I thought. How could we solve that? um So I went ahead and I uh I built a tool to handle just that um so I figured. We should initially start looking at uh just how things worked if you're doing it manually today.

G

So what we have is um I've just deployed a basic stfx on 1-18 command, set extension web part or a extension, build it straight up from the Yeoman generator. So what we have is a a button in here. If we select an item we have the command one and two: that's it.

G

um Let's say we wanted to edit these properties. That are the text. uh What you traditionally would do, um you would either go to your classic app catalog. You would go to site contents and you would then scroll down, find the 10 and wide extensions list. uh Microsoft actually made this a little bit easier doing uh with the modernization of the app catalog, where we now have a more features and we can press open for the 10th white extensions, but we do end up in the same editor.

G

um So let's say I wanted to change this. One item is selected in the list and I wanted to add a exclamation point into that. What I have to do is I have to press edit and sort of Click into this thing. Hope that I'm uh I'm not missing anything uh big out of it, stop editing and it works, and sometimes you'll find it will add a bunch of like Escape characters and they're trying to to avoid Jason.

G

um Now, if that worked, we can go in here. We can do a quick reload and we should see the exclamation point and that's one of those things that are hard to demo, because it sort of fails. Sometimes there we go um now. I thought that process is kind of tedious, um there's a lot of things you have to know, for instance, the list template. You just have to know that 101 as document libraries, uh you have to know these uh remember these things that are command bar.

G

You could say, context menu, so I sort of packaged those away. uh So what you get is with the uh the web part, you got a full list of all your 10 and wide deployed extensions.

G

um What we have now is just one extension on this tenant. I can click that uh another thing is I flip the thing and inside SharePoint it's called disabled to set to True, which is really frustrating, so I actually flip that Boolean for you.

G

So you can clearly see if it's enabled, um then we have the option to move the location to the concepts menu edit, the Json, with a little bit of like a bit like theme to it, so you can actually see what's going on, we could add a couple of more exclamation points here: hit save uh and there we go now. If we head back into the uh document lock or the list in here, which should eventually see it moved to the context, menu.

G

And it is not moving that I not set it to the I did not move it there we go. Maybe if I do that, all extra work.

G

ah There we go I, think yeah. There we go, it's moved um other than that. um We have the option to move it to a different type of list.

G

um This is the documented uh I think they're called like base types of lists, um so I just essentially mapped those in to drop down to make it easier for people. um In case you don't have the documentation on hand um yeah, you can move it over to a document Library if you want to, and that will work um so I think that's about it for, for like the demo, what I'm gonna talk about next is just a little bit of the technicalities and how I got to the data and how I'm doing it.

G

um So, let's move on and look about look into some code, um so the first thing I needed to do was to find a way to get access to my tenant attendance, app, catalog uh and I was actually starting to spoof around a little bit in the uh Network traces. Seeing what's going on until I realized.

G

That uh tntjs has actually figured that all out for me and I could straight up just go ahead and say, give me the tenant at catalog whip um now that that gets me as far as to get access to the app catalog, uh which is great, but I need to find that that list that we were just talking about uh so it's down here, it's named 10 and white extensions.

G

um The obvious thing would probably be to just say get by title, um but we also all know that that is not a good idea, especially because I have seen people rename things for all kinds of reasons.

G

um So the first thing I did is I, went through the the documentation. Well, that's definitely the wrong one. um Thinking that these list based types would definitely be mapped in there, and there surely is one for for the uh 10 and wide extensions list.

G

Well, it turns out there is one, but it's not in the documentation, actually there's a lot of lists, types that are not in the documentation, um so I found another guy on the internet, who scraped a bunch and had a way longer list, uh unfortunately, that it didn't even help me either. So what I did was I just pulled the list on my tenant and verified that and I saw that it was uh 337.

G

um and then I did a bit more digging.

G

I went to a couple of different tenants and found that that's like the common thing is that that list is always 337., um so I added it to my uh to my list types of course, making sure that the next developer comes along knows that it is uh not a documented way to do it um and then from there it's it's pretty easy to to get the list because it essentially just going base template equals the this type um and then it's what I'm doing here is just selecting the ID and selecting sub one being considerate.

L

G

The amount of data that we're pulling um since we're only going to use the ID and the next step, where we're going to work with the the extensions uh that seemed like the best way to do it um so from there. What I found was that it is essentially just working with list items, I pulled them. I mapped them into a model that I like and I can from there update anything, I want on them um and yeah. So I have a service method.

G

Here, that's called clean extension that will remove all the odata tags and stuff that are coming along with any rest of the apis that we're using in SharePoint other than that no magic is happening, uh calling the two other methods we just saw and we're solving in a list of all the 10 and wide extensions which I guess is.

G

Unless you have more than 100 you would you wouldn't get those uh there's, probably a buck there to be fixed at some point in case somebody has that many extensions um so to summarize, um there's a list on your in your app catalog that contains the tenant-wide extensions and all the properties of them.

G

um Of course you can install something on the site and you can override it, uh but I guess this is something that I think it's not that well documented. It is mentioned in the documentation, but I found a lot of new spfx developers. Are unaware of this option.

G

um It is a really nice way to work with data that you might want to use in your solution and not have to do an API call to get such as a message of the day or something like along those lines um and yeah. Sometimes you have to go The Unofficial route to get the data you want, but make sure you like document it put a little note in there. uh Marketing was pretty nice in his presentation as well. Mentioning hey I'm doing this thing. That is not the official way to do it.

G

uh Unfortunately, there's just times where that is the best way to do things um and uh yeah rounding off as sometimes we just have a lot of fun when we go hey I, wonder if I could do that with code, which was essentially what triggered this, because I was just frustrated with that classic experience uh yeah. So I guess I am a little bit short on time.

G

um But if there are any questions, feel free and I will pick those up.

E

G

uh It does not.

F

G

Any back it doesn't backfire on security, since it is using the current user's permission. uh So so it would probably just fail pretty hard and throw an exception if you, if you try it and you're not authorized to edit in there uh or most realistically, it will probably just not actually update anything I'm, not sure any words of the user, because I didn't handle those.

G

um So so no I don't see there being any real security issues. Since the users do have access to the information they are they're being portrayed here.

G

Yeah um and I think that's about it. For me,.

A

All right, thank you, Dan that was awesome and I'll shift. This back over here. I really appreciate it very, very cool stuff. uh You built a modern manager for our modern uh customizations right I mean nothing better than editing Json in a quick edit view, but uh I suppose we get a little bit. That's awesome! Thank you very much and let's talk about uh the exciting uh other slide. Oh man I took back over the slides, but now they don't move. Oh there, we go all right.

A

If you have feedback on this, uh so you are interested in telling us how we did uh you can go to this link here. This community slash, call slash feedback with the AKA dot Ms on the front I'd like to do my URLs backwards for you. If you go there fill that out, you can let us know. What's going on what you'd like to see different, uh that you would like Hugo to talk less understandable, make sure you put that in there Perfect all right and then finally make sure you join our Discord server.

A

So this is something that's growing, quite a bit we're getting a lot of traction there. A lot of people coming in not a whole lot of discussion, yet so be brave, be uh be posting! Your comments, uh there's a lot of experts in there they're looking to to help you, you know talk about things post, a blog, whatever you got in there, that'd be great, and uh finally, here this recording of This will be available in 24 hours.

A

Of course, if you're already watching this on YouTube, you know that what oh crazy all right, you can go to that link right there to find these videos anytime and then join us next week for some more calls and uh that's it for today. Thank you so much for all of our awesome presenters and everybody else and catch Luda, bye-bye.

E