Microsoft 365 Community Community Demos, 22 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: New features in SharePoint Framework 1.16 preview

Description

In this 14-minute developer/designer focused demo, Vesa Juvonen opens with recently released SPFx v1.16 features - Top Actions support for web parts (demoed today), Teams JavaScript SDK v2 native support in SPFx solutions, and Asynchronous support for Viva Connections ACEs rendering. Alex Terentiev shows Top Actions support that allows developers to add custom buttons or custom dropdowns to the web part’s command bar. Like property pane controls but based on cleaner UI approach. Also review features in development and tentative release dates. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on September 6, 2022.

Demo Presenters
• Alex Terentiev (Microsoft) | @alexaterentiev
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Web page - Microsoft Viva Learning | aka.ms/VivaLearning
• Documentation - SharePoint Framework v1.16 release notes | https://docs.microsoft.com/sharepoint/dev/spfx/release-1.16
• Article - Public preview of SharePoint Framework 1.16 – First release of upcoming features | https://devblogs.microsoft.com/microsoft365dev/public-preview-of-sharepoint-framework-1-16-first-release-of-upcoming-features/
• Repo - SharePoint Framework v1.16 release notes | https://github.com/SharePoint/sp-dev-docs/blob/main/docs/spfx/release-1.16.md
• Feedback – sp-dev-docs issues list | https://github.com/SharePoint/sp-dev-docs/wiki/Issue-List

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

A

The next demo is about the new features in the in the sharepoint framework 1.16. So I'm going to show a few slides alex is going to do the actual demo, um just a quick intros one of my hats. I have multiple hat systems, I'm sure if it's that's anymore, true at least used to be a feature pm in a sharepoint framework team.

A

I'm closely involved in the sharepoint framework, development and and the next steps regardless and alex, is an ex-mvp who then decided that well, I want to fix stuff in a sharepoint framework and then got himself working in microsoft, which is thank you alex for joining and he's been really really awesome resource on fixing some of the things available, and even though I need to say call this out loud. Thank you alex for that one.

A

You at some point said that now all of the issues in the github issue list which you had reported have been fixed and still remained in the company. So thank you for that, so really really cool. Now I wanted to creak out quickly uh so on the framework. Sharepoint framework is really designed to be the easiest way to build your enterprise solutions in microsoft, teams, microsoft, viva and sharepoint.

A

Online sharepoint framework is still a pro development experience, because you are writing code you're, using industry, standard web stack tooling, and to build extensibility for microsoft, themes, vivo connections or sharepoint using react, angular or whatever is your chosen framework. Sharepoint framework itself is a really cool way of kind of hosting stuff because the hosting is free. So you don't need to worry about hosting your application outside of microsoft.

A

365, you will be hosted inside of microsoft 365, so you will have access and permissions to the apis because you are inside of the tenon and there's a native uh automatic single sign-on, and it's really driven by kind of a design for the quantum touring applications, but you can, of course, access external apis as well now sharepoint framework 1.16, a preview release happened last week, I would say in upcoming weeks.

A

I don't know why I should have updated that it happened actually last week and and the main new features for now in the 1.16 preview was the top actions to support for web parts and and alex is going to do a live demo around that one. We also announced that there will be a teams- javascript sdk, v2 native support for sharepoint framework solutions.

A

I'm going to explain a bit more on that one in a second and then there's a synchronous, support for vivo connection, ace rendering so basically, asynchronously render the quick views for the viva connection, which will increase the performance in general. 1.6 internal availability is intended to happen by end of 2022.

A

We don't want to give you an exact date, because then we don't want to if it's going to be a bit delayed and that can cause problems so we'll try to be as open as possible within our communications, with the upcoming preview releases as well in the development. um Something that's which we will talk about bit today is the bot framework part viva connection cards.

A

So this is something which we announced uh to be coming in built, and this is really designed for isbs, which have built bot framework for microsoft teams, both framework implementations for microsoft teams and now they want to expose their applications in the viva connection dashboard. So that's something which is in the works and we'll see if it's going to be part of the 1.16 or the following version, so we'll see how that is evolving and also we're looking into aligning the microsoft teams packaging model.

A

So you might think about this one as a the unified microsoft 365 bucketing model as a zip file, almost like a microsoft teams, zip file. Well, it is the microsoft.tmz file, but that zip file does not only contain the manifest it will contain, manifest the images and the spp kj files, so we're kind of aligning to that one unified model across microsoft, 365 to make it easier for customers and partners to everybody to build their solutions. More clarity, more alignment, which is always good.

A

Now before we go to the live demo related on top accents and supported by web parts, which I said alex will show. I wanted to call out the team's javascript sdk v2 native support for spfx solution. This will be done automatically so which is kind of hey wait. How does that work now? If you have an existing solution, which is hosted in sharepoint online and it's it's being exposed in the microsoft teams area, it's using the sdk endpoint uh in the code to get access on the microsoft teams.

A

Javascript sdk will actually update that endpoint to give you a v2 access point automatically and then, of course, for the new applications which you're building you can take advantage within your code, the javascript sdkv to support and and options- and this is all coming to the thinking where you can take advantage of the full scale options with the teams java clip sdk v2, which technically enables you to build, for example, outlook extensibility with sharepoint framework in the same way as with what was announced in build in june 2022., so a lot of stuff a lot of information, I will get more documentation on all of this and more details.

A

What does that mean in practice and how does that is rolling out? What does it mean for existing solutions and all of that as we're getting closer, but we want to make sure that you are aware what's happening? Also, a super important thing uh alex and the team is all the time actively looking into feedback and input from our github sp dev docs issue list, we'll put the link on the chat for that one.

A

So if you find any issues related on 1.16 or any of the things which we are talking about here, please let us know and there's an ongoing discussions around where we should be investing as well. So if you are building on something on sharepoint framework, please let us know what is important for you now. Let's move on to the actual demo of today, an actual star of the day, which is alex torrentiff related on the web part top actions in vivo connection desktop or in the sharepoint online, alex hey.

B

Inquires, so let me share my screen, then so I'll be demoing, the new feature we have included in uh spfx116 beta called top actions for the web parts and I'll start with the demo itself by showing what it actually is. So here I have a web part on the page and if you are in edit mode of the page, you see this command pair and the top actions actually allow you to add your custom buttons or custom drop downs.

B

I would say uh to these command bars so here in the example, I have uh three buttons in here one to hide or show the title of my web part. So if you click the title is gone, click back. The title is back. The second one is the title alignment in that case it's not a button, but but it is a drop down. Basically and again, if I select center, my title will be centered and another one for the this sample is kind of selecting an image when I'm clicking on it.

B

You see the pop-up to select the image, so it's kind of basic functionality here for the demo, but in your actual code you can basically react on the button and launch whatever custom logic you want. So uh this is kind of a demo what you can do with the custom actions and yeah.

B

So we've started this journey from the idea that um we want to have some kind of plain, easier ui for the users and uh you don't always want to have this big property, paying, especially for some simple choices or simple button clicks, and that's why we decided to provide this functionality and we are using this in first party parts tool and for the third parties. This functionality will be available soon. I would say so from the old perspective.

B

It's pretty easy, similar to property pain, configuration you have this, get top actions, configuration method that you can override and it returns itup actions interface and in this item, actions interface. There are two properties: one of those is top actions and here you're, basically providing the array of actions you want to add to the command bar and right now the api is based on property, pane, apis and properties. So, uh but it is right now for the first version it just what kind of proxy api.

B

So we have these uh item actions interface, but inside it actually just adds the uh uses, the same types as the property pane, but it will probably a little bit changed in future, uh but yeah. The configuration is pretty easy and similar to property pain, so you're providing the type for the for the top action, and currently uh we are supporting two types. The one is button. Another one is choice. Group and again, as you can see, I'm just using the function from property, pane helper function to create choice.

B

Group inside you can provide properties as always target property for your property of the web part some additional configurations, like text, icon, etc, etc. Same for choice, group you're, providing label you're, providing options that you want to have in there, and you can provide title.

B

Why title? Because, in top actions, it's not great to have like full text full label for your buttons, for example. Instead of that, you probably want to have these beautiful tooltips so providing the title adds this feature to your buttons, which is kind of more pretty ui. I would say another important property in the item: actions interface. So when you provided the actions itself, uh you should provide on execute method that kinda has two parameters.

B

One is action name and the second one is new value, and the action name is basically the same as the target property in the order of action. Configuration and new value is the value that should be applied to your properties. uh One small remark here that for buttons there is technically no new value, so you will always be getting a tool like a boolean type tool so for buttons you probably want to just execute some logic or something like that.

B

uh So, for example, in my case for show title button, I'm just reversing the flag in my properties, but for title alignment, I'm just applying new property and for open file. Ticker right here, I'm doing a prompt but, as I said potentially, you can launch your custom logic and do whatever you want. So, for example, even for this example, you could use file picker component, that I believe patchwork. Routers was doing the demo, maybe months or so ago, and yeah select an image not by prompt by but using this file picker.

B

So, as you can see, the configuration is pretty simple and familiar to you, especially if you were using property pane so again, just two properties, top actions and on execute and you're good to go a few things I want to mention so, first of all, right now we are just rolling out the support for top actions, and I would expect it to be 100 rolled out by end of september and the second one as I mentioned earlier.

B

So if we go to the item actions definition right now and from here I will go to action configuration so as you can see right now, it's just a proxy of I property playing field, but it will be definitely changed because it's not one to one mapping and for now we decided to do this proxy to just allow you to start thinking about different scenarios providing us feedback. But when we are ready to make this ga, we will definitely change it to real real interfaces.

B

Real properties in action configuration specific to top actions and uh back to uvasa.

A

Excellent, thank you alex on that one. From a timing perspective, I will jump on back on the slides and do a quick intro on the on the viva connect, bot, driven viva connection uh cards and then we'll go from there, but really really cool, and this is a good example of why it's a great that the first body as in microsoft, is building on top of the same tool stack.

A

So as we want to have those kind of features in the out of the box web parts, you will get those as well as an isv and the partner, so you can take advantage of them as well, really really cool stuff. Thank you alex on dan. Now I'm not going to spend too much time on this. There was already questions around the port framework, 3 and viva connection cards quickly, explaining what this is all about.

A

Basic idea is that we'll register a bot and deploy a port on a tenant, a normal bot framework of a boot which will then connect to microsoft, craft and other api services and then basically responds and reacts adaptive card events which are then exposed in the vmware connection, dashboard in a mobile or in a desktop sign. Now the eta for this one is still to be defined. Hopefully it will be available a bit later in this autumn.

A

Potentially we can preview this or do a live demo on this one relatively soon, but I cannot give you an exact date uh when this will be available. Ga will happen within next six months or so.