Microsoft 365 Community Viva Connections & SharePoint Framework, 6 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections & SharePoint Framework Community call – 6th of April, 2023

Description

Viva Connections & SharePoint community call on April 6th.

Two demos: A SharePoint document generator as Microsoft 365 app with SPFx and Productivity Studio: SPFx accelerators used in Microsoft to speed up SPFx development cycle.

Three project releases: SharePoint Framework (SPFx) – v1.17 (GA), CLI for Microsoft 365 – v6.5 (Beta), Microsoft Graph Developer Proxy – v0.6 (Preview), plus 7 SPFx samples, 3 conversations.

Register for Power Platform Samples Contributor training on Monday, April 10th.

Please see the blog post for this call for project updates, news and events details. The host of this call is Paolo Pialorsi (PiaSys.com) @paolopia. Q&A takes place as always in chat throughout the call.

Agenda
00:00 – Intro – Paolo Pialorsi (PiaSys.com) @paolopia
06:33 – SharePoint Framework – Vesa Juvonen (Microsoft) | @vesajuvonen
08:07 – PnPjs Client-Side Libraries – Julie Turner (Sympraxis Consulting) | @jfj1997
10:40 – CLI for Microsoft 365 – Garry Trinder (Microsoft) | @garrytrinder
12:49 – Microsoft Graph Developer Proxy – Garry Trinder (Microsoft) | @garrytrinder
13:32 – PnP SPFx Controls – Paolo Pialorsi (PiaSys.com) @paolopia
14:55 – Viva Connections Toolkit for Visual Studio Code – Paolo Pialorsi (PiaSys.com) @paolopia
15:51 – PnP Modern Search – Paolo Pialorsi (PiaSys.com) @paolopia
17:04 – PnP Samples - Hugo Bernier (Microsoft) | @bernierh
18:17 – PnP SPFx ACEs Samples - David Warner II (Microsoft) | @DavidWarnerII
18:33 – Together mode picture – Vesa Juvonen (Microsoft) | @vesajuvonen
19:41 – Demo – A SharePoint document generator as Microsoft 365 app with SPFx – Markus Möller (Avanade) | @Moeller2_0
35:46 – Demo – Productivity Studio: SPFx accelerators used in Microsoft to speed up SPFx development cycle – Daniel Turley (Avanade)
49:49 – Closing

Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/community/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• 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

B

To the Viva connections and SharePoint framework by weekly, sync today is April the 6th 2023 and today I'm your host. For this call. So let's see what we are going to cover.

B

First of all, uh we'll start with an update about the SharePoint framework ecosystem, and then we will see what are the latest news about the parliament practices, community, libraries and tools. Then we will have the well-known picture time with the together mode and then we'll have a couple of demos today, two demos, one from Marcus Miller and one from Daniel Turley, both of them from avanad, and we will have a lot of fun looking at how they use spfx to create real-life Solutions.

B

So, let's say, let's move to the actual content and first of all, I want to remind you that there are plenty of resources available in the Microsoft 365 community ecosystem and specifically we have a YouTube channel and we really heavily suggest you to subscribe to that one, because you will find a lot of useful video and content as well as we have a new LinkedIn group. So if you want to have a discussion with the whole group, join it today, AKA dot, Ms, slash, Community, slash, Li.

B

There are also a lot of Open Source projects on GitHub and we have a huge amount of samples available for you to take inspiration from under the sample gallery and if you don't want to have all of the links, uh but you just want to focus on one link to rule them all. Just go to akms, slash, Community, slash home and from there you can get access to all of the content that you see on this slide as a community and not only as the Microsoft 35 and platform Community.

B

We have plenty of uh calls on a weekly or bi-weekly or monthly basis. For example, we have the Microsoft Firepower platform weekly meeting with Microsoft speakers, and here you can see the URL to join it. We also have the Power Platform monthly Community, call the Microsoft identity platform, monthly call and the office add-ins monthly. Then we have this one, which is the Viva connection and SharePoint frame or bi-weekly, as well as the Microsoft 365 and Power Platform Community bi-weekly.

B

So plenty of community calls where you can find peers, share your experience and learn from the others, as well as sharing your own experiences with the others and again an easy link to go is ak.ms, slash, Community, slash calls and from there you will find all of the links to all of the other community calls talking about the Microsoft, 35 and Power Platform Community weekly call the next one will be April the 11th, and in that one we will have three uh really cool demos, one from icabas and Gary twinder about uh the uh teams, toolkit Cloud skill challenge, one by John Miller, who will introduce the Microsoft team, toolkit V5 and one from Osama ayadi about the hack together winners in the micrograph, and they should form area.

B

So if you are willing to contribute to the community course- and you want to present a demo, your ideas, your content in the either the micro certified Power Platform or this one, so the Viva and SharePoint framework call please go to this URL aka.ms, slash, Community, slash, request, slash demo and from there please submit your demo, and we will be more than happy to find the slot to let you share your knowledge with the whole community.

B

Talking about sharing the knowledge with the community. I think that David want to tell us something about. The sharing is caring initiative right, David.

A

I do what do you know? What are the odds? Thank you Paulo. So friends, we are here to provide you Hands-On Guidance, with this program called sharing is caring.

A

That means that we're going to get together in live sessions, safe space opportunities, which means they're not recorded we're going to work together on doing things like a pull request if you've never interfaced with GitHub before and you're, not quite sure what those things mean like fork and raw and blame and pull requests, we're going to walk you through it together and because it's not recorded you can ask any and all questions that you want you're going to meet with other like-minded passionate individuals, MVPs Microsoft employees and we're going to see how we can do more together, they're all free, we're trying to schedule more sessions and we're getting more involved by the way.

A

So, if you're interested in helping out reach out to myself or Hugo, we would love to be able to scale to more sessions and to do that, we need more help. So thank you. All you can learn more at aka.ms sharing is caring and we've got a Power Platform samples contributor coming up next Monday Paulo got something I.

B

Was are going to say you or ask you give me one more reason to be involved in the community, and here is the next slide and reason why you.

A

Got it exactly because we want to recognize the work that you are doing everyone in the community, so we have set up the community recognition program. What this does is it recognizes you for all the amazing work that you're doing in a formal and official way powered by credly. uh It is badges that will sit right alongside those certification badges within credly. There is no cost.

A

All we need to do is have you, opt-in, AK, dot, Ms, slash, Community recognition, we've seen some going out in the wild recently on the new uh or on the hack together program that had started, and then uh we've got more that are processing now we're getting into April and we've been processing them so you'll be seeing those keep an eye on those emails for those badges Paolo back to.

B

You thank you David and still talking about the community and the content to learn from keep into account that we are really close to the Microsoft 365 conference, which will take place in Las Vegas in May from the second to the 4th of May this year, so uh register attend the conference in order to learn a lot of content about Microsoft 55 in general, there will be a really cool keynote from uh biggest names in the area like Jeff, deeper, Rogers, Charles, lamanna and so on so forth, a lot of vpe cbps from Microsoft, and there will be also people from the community.

B

So, for example, there will be uh David, Hugo I will be there. There will be Visa, so a lot of content, a lot of fun, a lot of opportunities to share your knowledge with the whole community. So let's see you there.

B

That said we can talk about the news about the SharePoint framework area. I think that Visa want to share something with us right, Visa.

C

So I can update these slides quickly, I walk into. uh First of all, we do have a new version which is SharePoint framework 1.17. It was released two days ago on Tuesday, uh so basically 4th of April. It's not April's fourth thing, so it was 4th of April, not first of April, and that is now the recommended in production uh version and check it out. Give us feedback. If you find something- and please do report them to us as well. Now, let's go to the following site, and this is basically the growth chart of spfx.

C

We did have a small data issue in early March, but it is growing rapidly and so it's cool to say, the the growth all up worldwide. We have tens of millions of customers using uh extensibility built with spfx third-party custom extensibility built with spfx on top of, of course, the first party experiences, which are also built with the same framework. Let's go to the following slide: quick update on what was in 1.17. We are going to keep on updating a bit more details on 1.17 theaters.

C

We found out few more things which we might actually put in the release notes in upcoming dates, but there's basically updates across the stack for Microsoft teams, with spfx Microsoft Viba, with spfx and SharePoint, with spfx do check out the release notes which are public in the Learned platform. Thank you, Hugo, for sharing the link in the chat. That's it for my sign. Let's continue on open source projects.

B

Yes, thank you visa, and so let's talk about the open source project and, first of all, let's start with the PNP JS client-side Library I think we have Julie if.

D

I'm not mistaken yes, I'm here, hi hi, so uh we are announcing officially today that uh our friend and colleague, Bo Cameron is officially joining uh the maintainers team for pmpjs. So we're super super excited to have him he's already been a huge help. It's uh it's great to have him on the team uh version 3.14 to be released, uh April 17th! So that's a Monday pushing it out a couple of days due to to travel.

D

uh We have some bug fixes for uh the recycle bin, get by ID method, we've added a big new pack, a big new fix or change. Excuse me not fix big new change for adding support for Azure identity, uh client, and so what that basically does is is so we have the M cell wrapper, but we now have the Azure identity, client uh wrapper and that allows us to use manage identity in node.js projects.

D

So that's a real big cool addition: uh We've updated some taxonomy documentation for the need of an auth token on the add, update and delete event. So we've added a good amount of documentation around what that is and how to to do it and there's some helper methods in there to help you through that. So that is a big update. We've also done a small deprecation, the graph default and the SP default node uh JS behaviors for setting up your observers. We've made that M cell parameter optional, so it's consider it deprecated.

D

It still works, it will still work, but it consider it deprecated and the documentation updates show you what the new suggested method for it is. We've also got some other things that aren't on here fix for an app catalog issue with the tenant, app catalog and the site collection, app catalog, and we added set site logo method to sites. That's another change that we had and then there's a bunch of other documentation updates. So don't forget about that nightly. Build the.

D

Sp or graph, or whatever at V3 nightly, builds that any PRS that are merged in are available for you to test on that nightly, build and follow us as usual uh M365 pmb.js on Twitter, and that is what I have for today. Thanks.

B

Thank you Julie a lot of news and updates. Like always thank you so much and now I think that Gary will Delight us with the latest news about CLI from x235 like Gary I.

E

Will thank you Paolo. uh Yes, so we have a fresh new release of CLI for Microsoft 365.. It is fresh because it came out about five minutes ago, and so this is actually a roll-up.

E

um We did release 6.4 at the end of the month, but due to uh the uh the the new version of SharePoint framework, we have added support for upgrading your projects to the new version, so as well as it just been released. You've got guidance to upgrade all of your projects straight away, so that is now available in this latest release amongst a ton of other new features as well. So we've got commands for planner powerapps power, automate, Power, Platform uh purview and SharePoint. uh The power platform update is an interesting one.

E

So if you've built scripts um that you using CLI for Microsoft 365, we've had an internal change. There's been some service changes that have happened, which means there's a new permission in the CLI. So if you get any any issues with authentication and you have to reconsent permissions for the uh the the CLI uh Azure ID app as well- and we've got documentation for that. So if you do have an issue, please contact us either. You know through the issues list or our new uh community on Discord, which is growing all the time.

E

We're really happy with the engagement there. So if you have any questions around this jump into the Discord start, asking questions, I'm sure, either maintainers or the rest of the community will will help you out. um How did you get the the latest version? Well, you can get that from npm. You can use the at latest tag peers in Docker as well. You can use the the latest tag there to get the latest version, as I mentioned check out our Discord Community.

E

If you like, the CLI, give us a star on on GitHub, give us a follow on Twitter, and if you have no idea about CLI uh for Microsoft 365 I'll check out our docs and you'll find everything there that you'll need to know.

B

Thank you, Mary and, let me say, as a developer, uh we always use heavily the Microsoft graph and Microsoft got us covered with a really cool tool. So please Gary tell us something more about the testing of graph for using this new tool.

E

Sure so we have a new release of Microsoft graph developer proxy, so we have a 0.6 which has been released. You can get that from the uh not so short short link, akm Ms, slash graph, slash proxy slash, download. There you'll find all of the the installables the updates to what have changed in this release and also access to tutorials, as well as.

B

Thank you, Gary, and let's keep on talking about the PMP Community, tooling and specifically about the reusable spfx controls. Let me say that whenever I develop, Solutions I heavily use also the spfx controls don't tell my customers, but they really speed up my development time. So, in the latest release of the react controls 3.13, we have a new upload files control. We also have the update of the library to SharePoint framework 116.1, as well as a lot of announcements and fixes bug fixes, and you can find all of the details in the release notes.

B

The same happened to the react property controls that you use whenever you want to customize the UI of the property control of a web part, and we have the version 3.12 and again there we have announcements. We have support for a new language as well as a bunch of fixes, and what amazes me the most is that we have a huge amount of people attributing to this control, so it is literally built by the community for the community and I want to say thank you to all of the people that you see in this list.

B

I will not read and call out all of the names one by one, because most likely I will misspell one of them and it's a really huge list. But thank you. Thank you. Thank you and that's it here. You find also the links to the controls and please follow at M365 PMP controls.

B

If you want to learn more and be up to date about that topic, then we have the Viva connection, toolkit for visual studio code, and while here we have a new release as well released in March early March this year in the Viva connection toolkit for visual studio code, you find a really useful, tooling to build Viva connections, adaptive cards with SharePoint framework and CLI for Microsoft 65. It is fully integrated with Visual Studio code and in fact you can install it as an extension of Visual Studio code.

B

You can find a YouTube video where you can learn how to use it in order to create your own Solutions and it is available on GitHub under AK dot, Ms, slash, Viva, slash, vs code. So if you want to contribute to this tool, feel free tool, it is an open source, Community tool again built by the community for the community.

B

Then we also have the PMP modern search controls in the family of Open Source libraries and tools provided by the micro, 65 and Power Platform Community AKA, dot, Ms, slash pmp-search is the short URL to get there and this library of SharePoint framework web Parts is really useful whenever you want to create a fully customizable search experience for your customers right now, we are at version 4.8, and we had some nice contribution here as well from the community, but we are also really looking forward to having new contributors to this project.

B

So we are looking for new people willing to help us grow. These really fundamental library of web parts so feel free to go to the GitHub repository and either make an issue or a pull request, which is even better than an issue. Let me say, because an issue require hire someone to work on it. A pull request will be an actual concrete contribution to the project. So please don't be shy, contribute and let us know what you think about this project.

B

Then we have and I think Hugo is willing to show something about ah that to us. The PMT hpfx samples right Hugo. Yes,.

F

I am thank you, uh so we have SPF examples available for you to learn how to use uh or to build spsx web parts and extensions. We have a whole bunch of uh samples uh I, unfortunately, don't have enough time to go through all of them, but a few that are uh of node. Here we have a new uh application customizer, which shows the weather by rishabh Shukla.

F

We have also a new iframe control, uh which allows you to display an iframe within a property pane by Valera, narboutas and valeras by the way has updated the three different uh samples over the last two weeks. So congratulations to the lettuce and thank you for your your help. I also wanted to point out that we have a few people who have made contributions by uh updating type in the code or documentation and I just want to point out. Those are valid contributions and their welcome contributions.

F

So thank you, everyone for your your contributions and uh back to you, Palo.

B

Thank you and actually back to David, who will tell us something about the spfx ACs right.

A

Yeah yeah, absolutely we love new samples. There aren't any new to look at this week, so uh there are badges available, though definitely reach out get involved and we will get those processed Palo back to you.

B

Thank you David, and so it is now time for the optional picture. So if you are willing to show your face and your hands, the community turn on your camera and basically take control and make the magic happen. Like always, I will.

C

I will select me put this one in here. We have 50 states in a room, 50 states in a room, three more rows: female rows, few more States in a room and video on video on we're going to get everybody on the screen, Well everybody's not going to fit in the room.

C

Let's see how many people will get here, I'm, not yet recording a few more seats, few more seats, few more States few more seats good to see this many faces and from a timing perspective, let me put the recording on and let's do some hand-failing everybody to one, and here we go thanks thanks everybody for once again joining awesome to see you here or hopefully we'll see you in person in the upcoming screen conferences. This is really really cool.

C

Thank you for being part of this community, excellent and awesome to say also a few avatars in the screen as well, so that is nowadays an option uh because that's rolling out as well. Let's go to the actual stars of trading.

B

Yeah, so let's talk about the demos. First uh of all, we have Marcus Miller from avanad, showing us a SharePoint document generator as Microsoft 365 app with spfx. So please markers show us your demo. Thank you.

G

Yeah, hello, I hope you can see my screen um today. I want to show you something about a SharePoint document. Generator realized as a full, complete Microsoft, 365, app based on SharePoint framework, but first a small introduction about me. My name is Marcus Miller I'm, a Microsoft 365, developer expert I work for avenard in Germany and I'm, a Microsoft MVP for Microsoft 365 development.

G

So it's right- and this is directly hand over to my topic, because today I want to show you something about real Microsoft, 365 development and, as usual, let's directly jump in to My Demo. So what I want to do is I want to generate a template based offer document with some custom metadata in various Microsoft 365 products, starting with the teams app pick off. My teams app get a nice little form enter some data.

G

Pick up date, let's pick a price.

G

Not to manipulate it here if we want to select the vat head and.

G

Let's enter some text, okay about the typos, doesn't really matter today. Kick it off, and once we find a link to the document right here, you can directly also show the result should be in my offerings. Library there we are. We can also see already some metadata in the in The View.

G

We can also see something here we just entered. We can open that file. Unfortunately, the problem is this regularly opens in office web app and office web app is not able to support directly showing up some custom metadata.

G

Therefore, we need Microsoft Word, yes, desktop application and there we are yeah a simple document. Template opened with our metadata and that's it now we can continue. Of course, we can correct something here. We can continue to work. I also have an Outlook about something to review, but this is another story and not today, that's uh the document created here from a teams. Application realized with SharePoint framework.

G

In that way, we can nevertheless also switch over to our next application. For instance, we can go to Outlook there. If you didn't realize. We also have an add button and we have write the same application available here just because we installed it as a personal app in Microsoft teams.

G

We can open it yet as well and two exactly the same thing. Don't want to bother you too long. Therefore, I make it quite short.

G

Read that offer directly refresh there. We have our second demo.

G

The third option we have is I'm doing it from here is Microsoft 365 or former Office 365 platform, where we also have apps available and to our surprise here, the same app of a creation realized with SP of x is available as well. If you want me, I think we have some time. We can do it once again.

G

Maybe it's a different.

G

G

Works like a charm as well. Where was my diary already there? Now you might wonder how do I know that I have to write all the documents to exactly this document library in my offerings, SharePoint site, this is about I will switch back to teams here. This is about the configuration configuration.

G

Of course you can do in in your app host in your app settings, whatever you do, but you can also do it personally so for each individual personal application- and this is realized with the second simple SharePoint framework web part- which you find here on the settings- and here is my set URL to um to the site- which I just showed you with the content.

G

How is this realized? This is realized with the so-called personal app configuration wire, OneDrive and therefore I created the graph endpoint I created a storage location in the apps folder. Here we have the application name and in case of SharePoint framework, it's always the SharePoint online client extensibility web application principle, because this is the app ID or the Enterprise application behind the MS graph client in SharePoint framework.

G

Beyond that, we have the possibility and I took that to create a custom, folder or even the custom folder structure if we want I choose create offer here- and here is my settings Json, which I stored here from the settings file- and here you have the final configuration file.

G

That was everything from today from My Demo front. Now, let's illustrate how this works.

G

The third thing is, which kind of possible scenarios do we have for those kind of Microsoft 365 across apps. You have seen a personal teams, application realized with SharePoint framework, and this is also available a bit different, but as I have a web part already in place, I could also I did not show this, but I could also render this, of course, in SharePoint uh as a web part on a page or as a single page, application would work the same way.

G

So in fact, it's available on four different products on teams Outlook and offers respectively, Microsoft 365, as shown and in SharePoint S1. You can achieve the same with the table's native application. I already showed a a sample. uh I think the Thursday before Christmas and I will have another one, but come to that later and additionally, in that combination, you can also use search based messaging extensions out of those teams apps. It is not possible in SharePoint framework right now, and this is why I couldn't show it today.

G

What do we need to realize this? The first thing is, we always come from a teams application and therefore we need a teams manifest and in detail a manifest version, 1.13 or above and what's also already highlighted here. uh Although it's only an icon is what's necessary, is the webpack ID which you can find in the web part manifest file?

G

We have two static tabs here, as shown, we have the offer creation itself. This was the form where I entered my data and we have the settings.

G

um This is the second static tab here, and this is realized by a hidden web part, because the setting makes settings web part makes not Sense on its own. It makes only sense in combination with this teams, application.

G

Asset for the URL, which is quite quite long here in the content URL, so I put it here a bit uh a bit broader needs to contain those web part ID, and the webpad ID, as you can see at the bottom, is originally included in the back part manifest file, the Tekken thing- and this is a bit outdated slide here, as we've just seen that SharePoint framework 1.17 is available.

G

This sample currently is realized based on 1.16, which did not support manifest files, automatically of version 1.13 or above even so I had to package and deploy that stuff manually, and this team's application always consists. The two icons and the Manifest file, where I was showing you an extraction on the previous slide. So what I'm doing is I, zip, those three things and upload it.

G

It's always good to know how this works manually, but I think I did not check it, because it's only available since two days, but I think this should now already be possible with a synchronized to teams button you might know which is available from the SharePoint app catalog.

G

So we've seen manifest. Firefight teams is important, but what's also important most of the time in those Microsoft 365 across apps. This is teams JS SDK version 2., because with version 2, we are able to use the context and some specific things in a Pharma sample. Yeah I did not do that. um I did not show you that apps can also look different based on the host yeah, so it can look a bit different in Outlook than in teams than in Microsoft.

G

365 I did not realize this year, but this would be possible and I showed this in a previous sample when you want to Google it for that it was uh I. Think from uh from the last day before Christmas, but I'm doing here is first in SharePoint framework context, I'm checking if I have a Microsoft teams, SDK available and then I know I'm running in teams, office or Outlook.

G

Otherwise, and you see this at the bottom, is I would run in SharePoint directly, so I could act different here and point out also SharePoint. The second thing: what I'm using here come on?

G

Yes, here, I use this so-called teamside domain and the team site domain is only the domain name of my SharePoint tenant and this I need to know to get, for instance, to get to the app catalog and when I need the app catalog to further continue with the graph endpoint I was showing you about the custom configuration.

G

Another quick um point out is the URL I'm, using behind the scenes by the way I'm using SharePoint rest API and here I point out how to get the template. That I was using. So I was simply using a standard. Word template uploading it uh via um yeah right you can upload it via UI. You can also achieve this with PP provisioning I was showing also this in the blog post, the blog post.

G

You will later reach out from my resources- and this is the API I'm using here, because this is the template is stored in the hidden folder called slash, underscore CTS and then based on my site and my list. Last, not least, how does the shown personal app folder configuration work, the endpoint you can see on top and the endpoint consists of several things. First, we have the link to the personal user's OneDrive.

G

Then we have a special app folder and then my in my case, it's a special approot. This is the endpoint and this results in the subfolder apps and this folder name of the application ID, which is in our case this long SharePoint, online client, extensibility, blah blah the next part. The third one is my custom. Folder I choose to identify, because this is my application, the real name of the application, which is smart, because, of course, I could have many many SharePoint applications with the same application principle and last not least, file name.

G

This is the settings Json and below your occupancy directly. The content that I was using this for explanation of the current solution here. Finally, some resources- I wrote two blog posts about this. Specifically the third one is also about the mentioned PNP provisioning of this template folder, it's linked in both of them as a series.

G

The sample code is also available in the PNP Repository and last, not least, the Microsoft documentation on SharePoint framework applications as Microsoft 365 apps. So normally, this kind of resources is always my last slide, but today is a bit different. I want to try something new, so I have a small Cliffhanger for you, because, as I have shown you, there are many more options on Microsoft 365, e-cross apps. So I want to point out for you.

G

The next Thursday in the general Dev application call I will show you the exact same app realized as a yo team solution, looks slightly different because here I'm, using the out of the box available from your teams at least fluent UI react Northstar controls, but it looks quite the same, but would be a bit boring to only show you exactly the same. So I will additionally show you some additional capabilities.

G

So I also realized a search based messaging extension there who will review and publish those created documents, so I have some metadata manipulation based on adaptive cards and then last one is of course I will compare both approaches. What are the pros and cons of working with SharePoint framework? Well, this team's native applications, like your teams or teams, toolkit I, hope you will join me once again and yeah normally I'm a bit of kind of an understandment, but maybe it's pointed out with a yeah blinking eye.

G

um It's not really the best our reasons you use your illusion one and two, but I hope it's a good one. Thank you for the listening.

B

Thank you, Marcus. Thank you and great demo. Like always, and now it is time for Daniel Turley to show us the productivity studio, so please Daniel feel free to start sharing your screen.

H

All right, thank you. Paulo hi everyone. My name is Dan Turley and I'm. A full stack developer at avenard I've been working with SharePoint for over 10 years, starting with SharePoint 2010 I've been involved in projects ranging from building public websites for businesses, on SharePoint, to solutions for external business partner, access to SharePoint sites, and now, with the productivity, Studio utilizing SharePoint framework to build business. Apps I am here today to present our spfx solution accelerator.

H

It is a set of patterns, reusable code components and tools, I created for building business apps on the SharePoint platform. It has evolved over the last six years and we have used it in the productivity Studio to build a dozen business apps over that time.

H

The accelerator is now open source and we have published a complete app to demonstrate the features and functionality. The app is the rhythm of business calendar and the SharePoint framework sample is named react rhythm of business calendar.

H

What I'm planning to present today is an overview of our spfx solution: accelerator, a quick demo of the rhythm of business calendar app and a brief look at some of the source code. So these are the high level features of the accelerator.

H

We have guidelines for solution, structure to organize your entity, domain model, Services components and schema, which is your data layer, which is typically SharePoint lists. The entity domain model has features like change, tracking validation and relationships and relationships are defined between entities, and we support one to many as well as many to many. We also have a services framework with provided services for SharePoint list data, time zones, users and groups, and more these Services utilize, the pmp.js library, we're making rest calls to the SharePoint apis.

H

You can also Define Services specific for the application that you're building and those Services can specify dependencies on other services and the framework will take care of initializing them in parallel as much as possible, while respecting any dependencies.

H

We also have Dynamic provisioning of SharePoint lists and other resources, which is very useful for building Rich setup and upgrade experiences for your app and next we have react components or building View and edit experiences with panels or dialogues. There's a component for handling asynchronous data. We have controls to implement, live, update scenarios and more. We also have tooling to support development teams and environments.

H

So this includes additional gulp tasks for packaging and deploying a clean build of the solution to a site or a tenant, app catalog using a single command, and we have an environments file which is used to define different builds of the app. So you can provide unique names and guides for web parts and the solution package, as well as other resources which enable teams to deploy a Dev test and even a production version of the app to a single tenant or even a single site collection without causing any conflicts.

H

And, last but not least, we have a unique feature. We call live update which ensures users are always collaborating with the latest data, and we think this is an especially cool feature that is similar to a co-authoring experience, and we will definitely want to do a deep dive on it at a later date.

H

All right now, let me Demo a sample app that we built using this accelerator. So some quick context, the app that we built is the rhythm of business calendar and it helps you keep track of your business goals by managing team events. You can coordinate and plan with your team easily using color-coded events, approval, workflow refiners and confidential events.

H

The app is perfect for people who manage a team calendar like Chiefs of Staff or executive assistants, and it can be used in SharePoint or in teams all right. Let me bring up the web page.

H

Okay here, I have a SharePoint site for contoso retail and I have a page where I've added the rhythm of business calendar app. Let me expand the screen here here. We have the initial View, which is a standard calendar layout for the current month. We also have over here we have custom refiners that we've defined.

H

We have two rewinders team and type along with their values. The team refiner uses colors, and you can see that the events are color coded on the calendar. I can also select or deselect and select these to filter. My calendar view from another machine. What I'm going to do is I'm going to have a colleague create another refiner and in a moment we'll get to see one aspect of the live, update feature that I mentioned a moment ago. So give me one second to trigger that.

H

So, in addition to the month view, we also have a day View a week view and a quarter View, which has all of the events for a particular quarter. Actually, let me make this view a little more interesting as an admin I can go into settings and I have lots of settings. I can play with I. Think I'm going to do here is to group this view by uh one of the refiners I'm going to choose type, and now you can see the events are are grouped by month and also by the type refiner.

H

So if you have a lot of events, this really is a neat way to be able to organize them on the screen. Oh and I also want to show that this app is fully responsive.

H

So you could use this from a mobile device as well. All right now did anyone notice, there's a new refiner down here for a country that we didn't have a moment ago.

H

So my colleague added this and it loaded up on my screen and I didn't have to refresh the page now, if I open the edit panel for this. These are properties that I can change for a refiner and because I'm, an admin I'm allowed to update the refiners and you'll see this icon in the corner.

H

This indicator shows me who added the item and how long ago, so this live update, Works across entity relationships and there's even an experience at the field level that can show you the original value, your colleagues, recent change and any unsaved edits. If you are currently making changes all right, um let's cover few points of interest in the source code now, so we have here a standard, spfx, scaffolded solution with react, typescript and fluent UI, and we have the web part file here and what I want to show.

H

You is how clean and minimal this file is for this particular app. We didn't need any web part properties, but we could use that too. All we're doing here is passing the web part contacts to this rhythm of business calendar app component, which is the root of our application.

H

So let's take a look at this component, so this is the root component for our app and what I want to show you is at the top here. This is a way of defining the services that this app will use. A lot of these are Services provided by the accelerator.

H

Some of these are custom Services built just for this application and if we scroll down here to the render method, you'll see what this component does is utilize, this SharePoint app component- this is part of the accelerator, and what this does is it takes in the web part context, any services that you want to use and other info, and it does all the initialization for you, so it configures the pnp.js library it initializes the services for other components to consume, and it even displays a customizable Shimmer, while things are are being set up.

H

Okay, so I want to go through a little bit more about the folder structure, so we've seen the standard web Parts folder for an spfx solution up here, I have the common folder. This is all of the reusable code and components for the accelerator.

H

Here are some services that are provided with the accelerator, for instance, the SharePoint service is an abstraction for loading and saving data to lists. We have a live update service and the developer service is a useful little service that registers helper scripts, that you can then run from the dev tools console on a workbench page.

H

Next up we have the components folder, and this is for all of your react components that are specific to this solution.

H

Then we have the model folder. This is where you would define all of your entities for your application and I want to look at one of these in a moment, text is the schema folder. This is where you would Define all of your elements, so lists and so forth, that need to be provisioned for the app and, lastly, there's a Services folder.

H

This is where you define any custom services for this application, since this is a calendar app. Naturally, we have an event service all right, so let me show you an entity, so this is the refiner value, which represents a single value for a refiner from the demo, the refiner we saw the the live update, one was named country and some of the refiner values were United States, Canada, Mexico Etc. So an instance of this refiner value entity might be say for Canada and what you'll notice here.

H

Is that we've gathered all of the fields for the entity into this state interface, where normally, you might think we would have fields at the class level and I want to show you.

H

You have here some simple getter and Setter properties for these fields. Now the reason that we use this pattern is for the change tracking feature, so we can actually take a copy of the internal state of the entity and then, as the user is making edits to fields on the screen, we can write those values directly from the input fields to the properties on the entity and update the current state.

H

Then we can compare the previous state the copy that we made to the current state and we can determine if the user has made any changes and from that we can drive those nice UI experiences, and this capability is also integral to the live update feature all right. Next, I would like to show you a loader. This lives in the folder for our custom event service.

H

Now, the purpose of a loader is to transform data to and from a data source to an entity object. So here we have a special kind of loader for SharePoint list views and you'll notice above our two functions that we use to perform the mapping from the raw data that we received from SharePoint apis to a rich entity that has business logic that we can leverage throughout our app and the last thing I want to show.

H

You is a list definition, so this lives under the schema folder, and this is used by our element provisioner to dynamically, create a list on a SharePoint site. You can see here we have definitions for the various Fields. This list will use. These are strongly typed.

H

Here we have a view that we'll create on the list.

H

And down here we have the list definition, so we can specify all the fields, the views and even permissions. Okay, that is everything I have time for today, there's so much more that we want to show you, but it will have to wait for another day. Thank you. So much for listening to My Demo back to you, Paulo.

B

Thank you Daniel. Thank you a really interesting demo. uh Let me share my screen again and congrats for two great demos to you and Marcus.

B

So uh that's a wrap for our community call today. uh Remember that the recording of this video will be available within 24 hours in our YouTube Channel aka.ms, slash, Community, slash videos is the short URL to get there and you don't need to rely on the automatically recorded video that will show up in the chat of this meeting. Actually just rely on the YouTube channel tomorrow remember to follow us on Twitter, at micro65 Dev and at M365 PMP.

B

If you are not already following us and remember that the next Viva connection, spfx call will be April. The 10th and the one about the microsystem Power Platform will be next Thursday and also all of the links to all of the community calls once again are available under AK dot. Ms, slash, Community, slash calls. So thank you again and thank you very much for joining us and following uh our content, the great demos we've got today, congrats again to the demo, presenters and see you next week. Thanks.

A