Home
Contribute Contact Us Browse all meetings
Home Contribute Contact Us Browse all meetings
Microsoft 365 Community / Viva Connections / 12 Sep 2023
Microsoft 365 Community / Viva Connections / 12 Sep 2023
Previous Meeting
Next Meeting
⏯
Add meeting Rate page Subscribe
youtube image
►
From YouTube: Introduction to new features and capabilities within SPFx 1.18

Description

📺 In this 12 minute developer-focused demo Vesa walks the audience through new capabilities in SPFx 1.18. They start with an overview of building experiences in Microsoft 365 with SPFx (the easiest way to build enterprise soluitions for Microsoft Teams, Microsoft Viva, Outlook, Microsoft 365 app and SharePoint) and then proceed to roadmap outlook. Alex then demoes updated layout options for Viva connections powered by SPFx.

This demo is taken from the Microsoft 365 & Power Platform weekly call – 22nd of August, 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenters
- Vesa Juvonen (Microsoft) | @vesajuvonen
- Alex Terentiev (Microsoft) | @alexaterentiev


💡 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

Foreign, so, first of all- and let's recap- some of the basics- so SharePoint framework is the easiest way to build. Your Enterprise Solutions in Microsoft. Trees is the five. So it's basically provides you capabilities like automatically hosting the code. You can easily there's native single sign-on. You don't need to worry about anything. It's using industry standard, tooling. You can use view. Angular react whatever you want and your code is automatically again asset hosted, so you don't need to worry about where to set up all of that hosting infrastructure.

A

Again, it's not that's not a massive deal for you, that's okay, but it's an option for you to build experiences in Microsoft 365. You can build experiences through SharePoint Microsoft, V1, Microsoft teams and Outlook and Microsoft 3, resistive Live app nowadays with SharePoint framework. The name is a bit misleading, but it it is anyway code which is hosted technically by SharePoint. So therefore, the name of SharePoint framework, it kind of makes sense.

A

Now, on this demo, we wanted to talk about uh what's part of the 1.18 uh release as part of the ga and then a bit about what's coming in the future. As well so there's a lot of a lot of stuff uh coming in the future, uh so 1.18 uh I, guess I'm gonna recap in here and then I'm going to ask you questions from Lucan so, first of all on 1.18 and which is planned to happen uh at GA happening as in general availability, as in production ready in September 2023 So.

A

Within pretty soon uh it will have a new template options for Viva connection, a fluent UI V8 as the default for new projects. So we're updating the fluent UI as that's getting updated on the Microsoft 365, there's API to support dark mode in the Vivo Connection Mobile other new adjustments across the technical stacks and then, of course, issues getting fixed based on the community and Community or customer and partner input. I take msspfx issues.

A

So if you find anything on about spfx, please always submit an issue there, and so we can actually address that within upcoming releases. I said the general available ability happens in September now related on 1.18, as I said, it's primarily from a ux perspective, focusing on the Viva connection side and giving more options over there, and we kind of actually cover a few slides later and after the demo. uh What's latest on Viva connection kind of a briefly, and what does that mean also related on related on spfx?

A

We will actually roll out I guess, look at the same time, the card designer plus plus, which isn't technically a SharePoint framework, but it's part of the the SharePoint framework uh kind of a technical stack and that provides a new way to build no good low code experiences for Viva connection. We will have a demo on that one by the way. Next week am I missing something Luca on 1.18.

B

No I think uh uh I, don't think they're missing anything uh well, just just a couple of things, so don't get uh don't get stuck on the card designer plus plus name. That's actually I mean rightfully Besa said that here is a name that we're using internally I'm, not sure if you're using card designer Plus classes just card designer and as I said, it's just like a way for Empower uh operators to build even more powerful and functional cards without requiring custom code. And yes, we will have them on that.

B

The plan is to release that around the same time when we are releasing 118.. Yes, okay,.

A

And then I'm just going to do the the questions typical question, what we get on this side, so no changes on the node.js side or react or any of those technical dependencies at 1.18. No, is that true? No, so that's a good way to know uh so for now, there's no chances and we're looking into doing that within the future versions. uh If you're wondering what is the Dynamics in here, Luca is the primary product manager, uh PM of the spfx and I'm, but I'm a lovely assistant right, Luca.

A

Oh, that's true, yes and Alex on the room. Is the engineer working on on aspfx as well? So that's all good um cool. Now, let's jump on on doing a quick update on on what are those template options and how what can that can be?

A

uh What can you enable with those uh within the Viva connection and Alex is ready to do a quick demo on that one and then I'll recap uh some of the changes which are coming in the Vivo connection and also on the SharePoint side as well Alex, let's jump on your screen and you see it yep all good. We can see your screen awesome.

C

So let me go here: I need to remove this one, so this is a sample from my like demo tenant. As you can see, there are three cards in the first row that are pretty new. uh They showcase new capabilities that we will release with 118.. Now uh you have, you have ability to provide uh text input in your cars. So previously we all had text only or like text and image this kind of stuff, but the cards were pretty much static. The first level of card card views.

C

Now you can provide text input, you can put it in the body of the car test on the uh first card or in the footer, based on your scenarios and additionally, we are providing a new template called search card template which provides you again. It's not a text inputted search box, but ID is the same and in the footer you have extra component. uh That looks like a Persona card, but it's actually not a Persona card or it's not tied to Persona or users.

C

You can use this card for any search scenarios for like documents or some other lob data, but yeah. It's a pretty configurable and I'll show you that in the code but yeah basically 118 is focused on providing more flexibility, more components in the card views. It doesn't mean that we allow Uh custom components like react or something like that.

C

No, we are still in charge of uh what's available what can be placed in the car view, but we are providing more options to the developers and let me jump to the code here and I'll show you the difference. So if previously, let me make it a little bit bigger so uh previously, when you create a template for this or that card view or Ace, you will extend your class from specific Base Class, like primary text or basic text or image, and based on that you have this or that functionality on these on the cardio.

C

We are changing that completely now we are not focusing on the templates. We are focusing on the components that can be placed in the uh template, so each card will be now extended from base components, card View and instead of providing like some data in there, you will need to override the card view parameters uh property where you basically using Json to specify uh what components you place in the header in the body in the footer and so on so forth. So again, it's not like. You can place any component in any place.

C

We have a set of permutations that we allow and as part of the ga documentation, we will list all these permutations for you to use, but yeah, it's it's pretty simple. So we will. We have like card bar for the icon and title. We have header where you can play some text in the body. For this example, it's a search card template. So in the body you have search box and in the footer you have search photo and that's it basically and that's what you're having from the template itself. So again, it's pretty easy.

C

We did a lot of job for you to kind of start, not from uh nothing, but you already have some Hello World example that you can play around and everything is available in beta and, as we also said, we will do the RC soon NGA in the September additionally to that extra focus on the um uh uh Diva connection. So yes, as mentioned, we'll, provide ability to get the uh mode, the uh dark mode or theme mode in the Viva connections mobile.

C

So in that case, you can correctly uh specify, for example, images in your quick views to fit in this, or that theme and one extra thing that we will do. It was not on the uh slide, but it just got merged we'll bump the typescript version to 4.7. It's not a big bump, but still we are trying to be more or less up-to-date. I know it's not V5, but still- uh and that's probably all I have.

A

Excellent, let me go on the slides and let them elaborate on on some of the things what uh uh and Alex was showing. So first of all that was really on the Viva connection side of the house.

A

Of course, with spfx, like we covered uh on the previous slides, you can build different experiences for SharePoint and Microsoft teams and Outlook and so on on the Viva connection site, there's going to be a lot of a lot of new announcements uh relatively soon, so there's a lot of Investments coming from Microsoft on the Microsoft Viva side, some of the announcements which have been already done, which are really really cool in the context uh kind of a related Technologies in spfx. It's the announcements in Microsoft Vivo connection.

A

So that's coming up relatively soon as well, so you can see on the left side. So there's an and notifications which are working. You can do that those announcements as a pop-up, so to say in the Viva connection, and then you can see on the third third picture.

A

You can say the store 120 will operate under reduced hours tomorrow, so, and so so you can actually have this kind of a Frontline worker, first messaging with which is targeted for the mobile experience and of course all of this is functioning well in the desktop ux as well on the right side. That's the multiple real connection, experiences in Microsoft in Microsoft teams.

A

Just to show you that so basically idea here is that as many companies and and customers have a multiple organizations and divisions, they can actually build their own dedicated, uh Viva connection experiences based on their employees and they're, based on the roles and and personas, and all of that, so you can actually have multiple set of different experiences and real connection experiences in a single tenant and that's a really really cool feature.

A

Now. I also wanted to recap on the kind of a remind uh one of the cool things which we announced uh in Las Vegas earlier this week, uh not this week this year, uh you know we can hear nobody cares and earlier records in this year uh was the upcoming updates on a SharePoint site, so making the SharePoint portals more flexible and and more more branding capabilities. All of this can be also extended in future using SharePoint Frameworks, so the SharePoint framework is certainly not going to go away.

A

It is evolving and we are evolving that, based on the feedback, what we're giving uh getting from you as well. So the pictures what you're seeing right now here are the are from the video which we showed also in Las Vegas related on the plans and how the SharePoint might look like as we start rolling out. The new modern SharePoint portal features so really really cool opportunities there as well and again. Extensibility here will keep on going or keep on being SharePoint framework uh with new options and difficult.

A

It is as well and of course, we'll updating the team's side as well, so the team's two teams, JavaScript sdks and all of those- are getting evolved as we are updating under versions on there. So all of that stays up to date so to say cool. So that's a quick recap on the SharePoint framework 1.18. So what's in 1.19, primarily on the Viva connection site 1.19, we cannot yet go to the details. What's in there and 1.20, uh there's going to be more focus on other areas as well, 1.18, primarily on the debug connection, foreign.