Microsoft 365 Community PnP Shorts - Guidance Videos, 22 Nov 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Preview - SharePoint Framework plans for year 2020, including Fluid Framework integration

Description

This PnP demo video is a recap on the future plans around SharePoint Framework, which was also covered in Microsoft Ignite 2020. Video also contains a live demo of integration between SharePoint Framework vNext and Fluid Framework - it's however important to notice that this is really early technology and intended only for technical demonstration purposes in alpha level.

This video was recorded on the 20th of November 2019 as a preview on the upcoming capabilities as similar demo failed to get recorded in a previous community call.

Planned feature features and capabilities for SharePoint Framework
-

Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen

Related Resources:
- Ignite 2019 session - SharePoint Framework: What's new and what’s next - https://myignite.techcommunity.microsoft.com/sessions/81636
- Ignite 2019 session - Learning about the Fluid Framework - https://myignite.techcommunity.microsoft.com/sessions/81642
- SharePoint Framework documentation - http://aka.ms/spfx
- SharePoint Framework training - http://aka.ms/spfx-training

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

A

Hello, my name is Ayana and in this video we'll have a look on what will happen, which open framework in the next steps. We are recording this video in the 20th of November right after ignite and quite a few other conferences and some of those conference recordings and community call recordings, unfortunately failed. So we're making sure that you will have all of the needed information which we going through in the community course and ignite and in our demos, by re-recording some of these settings.

A

Now as one of the ignite presentations and a part of the eat right messaging, we talked about SharePoint framework, the next end, and this slide is telling that they came as XFX. And what does that mean?

A

Well, it means that we are introducing a unified tool chain for Microsoft 365 workloads, so you are able to use one unified tool chain and in our ignite messaging it was called yo likes of 365 to actually create solutions and then, based on that solution settings, your solution will be exposed to either in Microsoft teams or in an office audience or as an Outlook, Web Access or as I, see upon the framework web part or in all of them.

A

So there will be multiple different surface locations also faces where you can expose your solution to be available. This new model does not replace any of the existing models in any of those things. So if you have a existing a web application, which you expose those types of Teamster, that is still an option in the future as well. So this is an add-on capability of introducing this kind of an office to resist divide component way of thinking.

A

Now, as one of this, we also introduced a native support for fluid framework and fluid framework is something which we announced in built 2019. It is a real-time communication.

A

It provides a real-time communication model between multiple people across the regions across the world, accessing the same components, and it will be used behind the scenes by our out of the books functionalities. It can be used also by extensibility, so your own components can actually be taking advantage of fluid framework and in real-time, replicate changes and events between the persons were accessing the same solution across the world.

A

That's a pretty cool functional and we're going to do a live demo on that one in a second, it will be an alpha version of the fluid framework, so it's pretty early and pretty rough, but you'll get the idea what we're planning to do with which app onto our story with Foley framework together, which open framework we're next in the future.

A

Now we're also looking into a person having Siobhan framework support in store or whatever it will be called necessarily open framework, and this is by enabling SharePoint framework to be available in the up source as well. So it will be a valid solution, they're looking also having an affair in dev, loop and so monthly releases. We try to do this at some point already, which opens framework.

A

Then there was other other priorities, unfortunately, with chanst and their internal workloads and and we're looking into getting back on this one and more extensions extensions, extensions for SharePoint framework as well, and this means that there will be more extensibility a round shape and framework across different functionalities.

A

So already as part of 1.10 SharePoint framework, it's the extensibility model or preview, for instance, ability more of Microsoft search and there will be new UI elements which you can modify navigation nodes, which you can modify during the upcoming releases of SharePoint framework, and this is planned to happen all of this- a plan to happen in the calendar year. 2020 and this is subject to change. So some of these things might still change and purpose is the direction where we're looking into heading together with SharePoint frame.

A

Now before we go to the actual demo related on fluid framework. And what does it mean that we're taking advantage of that one in the Microsoft 365 components? Let's briefly have a look on the journey of SharePoint framework and how how this has evolved and so you'll understand what is the role of fluid and the renaming of things and everything else now we started shape my favorite journey and by introducing a yo Microsoft, Microsoft SharePoint generator to create bit pods and modern webparts using the modern web stack.

A

It was a ship on specific SDK and you could ask access and different cloud services they get about advantage of those. So we had a SharePoint web for scalability and we had the workbench as a developer tooling available now quite soon, and then we introduced the Microsoft craft support for the SharePoint framework as well. Technically, it's not just about webparts, it's also about the extensions, but we could not take advantage. It really easily max off craft without again having the forced to go to your ad, creating an application, granting permissions everything else.

A

So in SharePoint sign. We wanted to simplify that process. It's still 100% in line with the azure ad and permission nothing, but we streamlined the experience so that for developers, this thing could be as easy as possible. Now, quite soon after that, one and we then release the support for implementing microsoft games tabs using the exactly the same technology stack so using nodejs your generated gobs pieces to their code and react based. Typically, you can actually implement all of this stuff using any Chaves Khafre more out there, because it is a JavaScript framework agnostic.

A

So there's no requirements on which want to use now. Internally. Microsoft's use react because we make that decision quite a few years back already and we are bidding on the react side. So there will be more reusable components in react site and because of that reason, but it doesn't mean again that you have to implement your stuff using react now, as far as 1.10 release 1.10 release, which is coming relatively soon like that we are recording this on 20th of November.

A

We are now adding a preview of the outlook web access support, as we can actually implement Outlook Web Access add-ins, using the SharePoint framework as well, and pretty soon after that- and we already previewed this having add-ins for Word and Excel and PowerPoint being implemented using share but framework. Now that's now that even sounds really interesting.

A

Why are you using SharePoint framework to create Microsoft themes tab, so why are using SharePoint framework to create Outlook Web Access extensibility that doesn't serve feel right so as part of this journey and we're looking in the also renaming SharePoint framework and that's an ongoing discussion currently still with marketing what it's going to be cold in hikes of ignite 2019 with we called it, yo Microsoft racist, so the official statements and everything else are coming in spring 2020 timeframe. This is still not 2020 time its spring 2020 timeline.

A

You can definitely see more functioning demos and all functioning capabilities around the whole into n Microsoft, 365 platform extensibility. Now what is the fluid framework here? Well, using the Microsoft 365 components or your Microsoft Microsoft 365, you can take advantage also a fluid framework and, as part of the fluid framework, you'll get that real-time communication of events and function on behaviors between multiple channels.

A

So you also get a fluid previewed canvas which can be used for demo and developer tooling purposes so you'll understand you can demonstrate functionalities on for preview canvas as well and that's actually available as long as you sign up for the fluid preview, we're going to add a link on the video around that one as well, and there is a private preview where you can sign up and then there's alternative ways, and it will be more public on spring 2020 and from a implementation perspective.

A

But let's actually have a look on the Foyt framework in practice. So what does it actually mean? And what? How can I? What is the approach to take that into account in the concept of this Microsoft 365 components? So, let's actually jump onto one of my tenants of one of the demo environments. So can I use this one for that? One and I'm gonna actually go to the flow preview canvas, and this is not yet available outside of the the Microsoft environments.

A

So it's not necessarily depending again on your tenant and your status and everything else it might be working might not be working. But this is basically a fluid. Can a preview canvas where we can build individual articles? We can add individual components, so the document itself is consisted from the fragments of the document. So as an example, this is one of the fragments. That's one of the fragment. This is a table fragment and the table fragment if I modify, for example, origins to be 200.

A

You can say that the chart is actually reflected by those changes, so there are individual fragments of the documents and, what's really cool about the fluid framework? Is that if I add another instance of the food framework in here, you can actually see almost real-time two modifications what people are doing, so it doesn't really matter in this case I'm using the same account in the both sides, but it does work with multiple accounts across the regions course countries and all of that, so it doesn't really matter from that perspective.

A

So if somebody makes modifications, for example, oranges- oh that's mistake, oranges was actually 20. You can actually see the reflect the changes on all of the other instances on real time, so there's a real-time collaboration options and between the things, but it doesn't actually end there. So it doesn't just end there, where you can actually have a real time, collaboration in Excel files or in Word files or in PowerPoint files or in files. You can actually take advantage of this real time communication options in your extensibility as well, and you as a developer.

A

You can implement your own fragments of the documents. So as an example, you can implement your own components in this case and there's a difficut and demo component, which I'm going to actually take advantage from this document in this side. So- and this is my Microsoft 365 component- it is basically taking advantage of the fluid components. It's it's automatically.

A

If it's resist, 5 component is automatically have access on the fluid framework, and it can take advantage of that one and then it can be surfaced in multiple different locations, quite simple components and you can adjust the size height of that forms and I can occur. Some modify and the text in there, so let's call it my own m 365 component or whatever it will be called whenever that will be truly released available for the developers.

A

Ok, quite simple component, but it's a one component which has been implemented using SharePoint framework, the next to the next evolution or SharePoint framework. All of the same goodies. You can use whatever JavaScript framework again use whatever component as one now. What's really cool about these individual components, this individual fragments, you can actually take advantage of those fragments individual, so I can actually share a fragment of the document individually with somebody else, and whenever we do modifications in here. Those modifications are actually reflected on the other side as well.

A

So now, if we actually modify, for example, let's call it: oh that's! Actually the orange is 250 or a 5.

A

You can actually see that the modification is getting reflected in this case in a small delay on the other component as well. This is a preview capability, so there might be some hiccups on what's happening and most likely actually this additional table here. Let me actually get rid of that. It's causing the additional small hiccup there we go, so you can actually see the modifications in real time in the in the fragments of the documents, with the other one has subscribed.

A

There we go and now the modification is available and the beauty of this one is that you can actually share this fragment in any other fluid support areas our surface and there will be multiple different surfaces in Microsoft. Resist the fiber office register. 5 would support this, so you can send this in email or you can send that in Microsoft themes, which we demonstrated in the go demos as well now.

A

One of the options in here is that you can take one of your own components and implemented components which isn't as fancy looking as the chart component or a table component. It is just a simple custom component with a custom form. You can actually surface that component in any of the other surfaces with support these areas as well. So let me actually create a new page in SharePoint.

A

Let's do the the plank page create that one and I can actually take this fragment of a component and paste that one on the page and we'll wait awhile and because it's fluid supported fragment, you can actually see the modification being available in here and what's the beauty on this one is that the fragment is fully dynamic.

A

So I can actually right here, see how it actually changes and you can actually see the modification being reflected on real-time on the other side of the of the component or the other copies of the fragment, so the root source. It's this one in here, which is the fluid component and a fluid document in the fluid document. But then we can actually say the changes being reflected on other side. It obviously works on the other side as well. So if I modified this one, it actually reflects the change on other side.

A

It is really updated design. How do you want your component to work? So again, you can decide what are the? What is the behavior, which one which direction? What is the events which are getting reflected using then? The underlying fluid framework implementation- now it doesn't actually just end there, so it actually gets even more interesting. So let me actually get rid of there. Let me get rid of this one, so we don't actually have any references on that one.

A

Let me actually jump to another template, and in here we can actually see a the same components. So you can actually say the modification increases the file component and let me actually create a one more page and one more plank so like like shown already in the previous demo or previous section. I can take that component and I can paste it in SharePoint, because SharePoint is a fluid aware. It will know how to render that component there, and we can.

A

We can actually say that connectivity between things now we talked about the fact that this is actually Microsoft 365 component, and that means that you can take advantage of the same component inaudible different platforms, so you I can actually create a Microsoft. Powerpoint presentation, add a new slide and there, let's add a title and title on the slide there and I can take the component. It may actually copy the component there we go and paste that component in the window and voila.

A

We actually have same component in here as well and we can modify their component value from so again. The same component, same implementation, same accessibility and taking advantage of fluid components. I can now modify that in the in the PowerPoint as well, and obviously it's not a coincident that I have Outlook Web Access here open, so obviously everything works and into Outlook Web Access as well. So here's my Outlook Web Apps as email I, can actually take the component. Let me actually get the component from the Oh huge and there's my component.

A

Let's actually get it included in here and it's not on a fortunately no kidding. Actually, oh there. It is now it's actually getting working properly. There. We go small hiccup there, but again, like I said this is relatively off in the office that is still but I can actually modify. The component modify the component component in Outlook.

A

So, as you can see, one implementation, one experience in multiple different channels in multiple different experiences and they're all truly connected. So in theory, you could be able to even send this email to somebody else and the somebody else can actually then modify the settings or update the information.

A

So hey a Middle East I can actually modify and this section of a table, and it has the back end connectivity that the already original documents and you can modify the settings or whatever components and experiences you want to implement using the the Microsoft 365 components, you're, taking advantage of fluid experiences as well again, there's a lot of different opportunities, a lot of different functionalities available in here in the future sign.

A

But that's like that pretty early and we are starting private preview by end of 2019 and then there will be a public preview I in 2020 and there will be more functionalities, more insights and more options available around this model in future in 2020 spring 2020, and you can expect in built 2020. There will be definitely more demos and more information available around the fluid framework. It was demonstrated first time in ignite when a 2090 early November and it is November 20th 2019 right now, where we are recording this one.

A

But thanks for watching- and if you like what you're seeing here, if that gives you a good idea of let's say: oh I could actually use this functionality for x and y and see, and please give us feedback if something is missing. Something else weird. Something is strange. Please give us feedback. Your input is the crucial piece of the puzzle. So we know what you need to be able to successful with in your day-to-day work and to be able to fulfill your business requirements.

A

So please please, please keep that feedback coming, but thank you for watching and hopefully you'll find all of this interesting. Thank you. Bye, bye,.