Microsoft 365 Community Viva Connections & SharePoint Framework, 19 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint PnP - SPFx & JavaScript SIG community call – 19th of November 2020

Description

SharePoint PnP Community - SPFx & JS SIG call on November 19. Demos delivered - Extending Power Automate UI with SPFx, Integrating Tailwind CSS framework into a SPFx React project, and SPFx file upload by drag & drop including PDF conversion. Latest project releases - PnPjs v2.0.12, PnPjs v2.1.0-beta, CLI for Microsoft 365 beta v3.3 and PnP Modern Search v4-preview now available. New trainings announced - Developing Apps for Microsoft Teams and SPFx Developer Workstation Setup. Rolled out 1 extension and 7 samples in last 2 weeks. Host of this call is Patrick Rodgers (Microsoft) @mediocrebowler. Q&A takes place in chat throughout the call.

Demos:
• Extending Power Automate User Interface with SPFx – Paolo Pialorsi (PiaSys) | @paolopia
• Integrating Tailwind CSS framework into a SPFx React project – Fabio Franzini | @franzinifabio
• SPFx file upload by drag & drop including PDF conversion – Markus Möller (Avanade) | @Moeller2_0

Learn more:
• See the full blog post for this call at: http://aka.ms/m365pnp-blog
• Download invite for bi-weekly SharePoint Framework call at: h https://aka.ms/spdev-spfx-call
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hello and welcome to the sharepoint framework and javascript special interest group bi-weekly: sync: it is november 19th, I'm your host, patrick rogers. We've got a great agenda for you again this week, we'll have latest updates from the sharepoint framework, we'll have updates across the patterns and practices program, new community samples updates picture time with together mode and then again, three great demos from paulo fabio and marcus paulo talking about extending power, automate user interfaces with x uh fabio talking about integrating tailwind css framework into spf x, which is something I am excited to see.

A

I've read a lot about, but not actually had a chance to play with myself and marcus, checking out spfx file upload by drag and drop, which is another neat uh thing I always think is really slick to see implemented as drag and drop and the different ways to achieve that. So often we get asked. How can I participate more in patterns and practices? Or this call specifically for this call?

A

We absolutely encourage you, whoever you are and wherever you are to do a demo uh on the call that demo can be anything spfx, related and anything uh out of the library of at pnp stuff from the patterson practices program, so any of our reusable components or libraries in conjunction with spfx or not or spfx, without any of those things as well are fantastic love to see those demos. um If you happen to be in a time zone that doesn't uh jive well with doing a demo in this call still reach out to us.

A

We we can discuss with you, maybe doing a recorded demo or something like that. We do want to try and be as inclusive with this stuff as possible. So if you're interested in doing a demo, whoever you are wherever you are please reach out, let us know we'd love to get you on the schedule, love to see the great work you are doing. You can also contribute on github that could take the form of reporting issues, submitting pull requests or helping with issues slash questions.

A

So if you happen to see somebody's, ask a question you might have dealt with that or know the answer. That question certainly invite you to jump in and help that person out and that way everybody gets helped a little bit faster and then, finally, we always encourage feedback about. How are these calls going? How is our documentation? Where else can we help and of course, positive feedback is okay too, because if you really like something we are doing, we can look at trying to incorporate a little bit more of that into uh what we're doing.

A

And then this is our giant pedro links. So we have developer videos community videos, uh the community videos are, of course, the recordings of all of our calls that we do and presentations.

A

We do developer videos a little more focused on uh specific technologies or enabling certain uh skills, and then we have links there to a bunch of different open source organizations uh associated with microsoft and absolutely all of them are welcoming your participation uh in submitting issues or helping with pull requests or other areas, and so that's the sharepoint organization, pnp org office.org and the microsoft graph.org.

A

All four of those uh certainly interested in your feedback and your participation, and then we have our sample galleries, spfx web parts, extensions list, formatting and teams, samples I'll tell you, that's my first stop.

A

Whenever I need to do something as a demo or work on a project for something I definitely check out the samples first and get some great ideas from all the work from all of you out there in the community, so super valuable resource in the samples and then finally, the one link to really remember is aka dot, msl m365 pnp, that's the patterns and practices landing page and that'll link you out to all of these other resources.

A

So you don't necessarily have to remember all of those links. Aka.Msm365 pnp will get you to all the places you need to go down at the bottom ak dot. Ms spfx will get you to the sharepoint framework documentation directly and then at microsoft, 365 dev and at m365. Pnp are the two main twitter handles to follow for updates.

A

We have an event. Coming up uh is waldek on the call did he want to talk to us. I think he is not. Let me just quick look quick look. No, uh so we've got a great event coming up for developing apps for microsoft teams. This is a two-hour live stream by developers for developers. uh The events are more fun with prizes. There's going to be prizes, uh I don't have any more details on the prizes, but there will be prizes, and that is december 16th 2020 at 9 to 11 a.m.

A

Pacific time the link there aka ms learn together, that's going to be a live event, so there'll be opportunities to learn opportunities to ask questions, interact with the presenters and really look forward to that being another great uh community event brought to you in this case uh by microsoft, and the developer advocates team. So really neat stuff, uh encourage you to check that out.

A

If you can and of course the recordings will be shared after the event, if you're unable to attend, uh live and now I'll hand things over to david for our update on sharing his carrying.

B

All right, thank you, patrick for those that are new to the call that may not be aware patterns and practices is a community that is completely inclusive and open source. That means that all of our resources and tools are available for you to utilize and take advantage of for free, but also contribute back to the community by updating them and supporting the community in that way.

B

That therein lies a challenge, though sometimes those moving pieces may provide hurdles that you're not comfortable with things like github and node, and all of these other pieces of the open source infrastructure sharing is caring is an initiative that hugo bernier and I lead in walking you through hands-on step-by-step uh how to take advantage of a variety of these scenarios, whether you're just new to the community starting to use the resources, whether you've been in the community a while and want to start giving back to the community through contributing, we will provide you step-by-step, inclusive, hands-on guidance, fun, clean, safe space atmosphere, and so we invite you to join some of our sessions.

B

You can get there and learn about them. At ak.ms. Sharing is caring. We've got a full slate of december sessions, we're trying to avoid the holiday weeks by the way uh weekly christmas week and new year, so we're packing them in the beginning of the month, but that includes the first time contributor, community docs and then for those that are involved in development.

B

You want to start using the pnp samples, we're going to show you how to do that using nvm and then an exciting new session is setting up your workstation there's a lot of components that you can use for pnp, and so it may be a little confusing on how to get them all set up on your machine for development. We're going to walk you through how to utilize some of them, and you know what maybe we'll have prizes as well. So you never know. Please join us aka dot.

B

Ms forward, slash sharing, is caring, patrick back to you.

A

Thanks david and again just do check out the sharings karen if you're looking at ways to get started with pnp. These are fantastic sessions. I've gotten great feedback from all of these, and it's a really great place to come. Ask questions in a smaller setting, smaller group and really walk through all these different topics: how to contribute if you're, just unsure on how to get started.

A

This is a great way to learn great way to get started and, of course, the skills are transferable, so they're, not just pnp skills, they're, github skills, they're, open source skills, and it's really fantastic sessions uh that have been put together here so definitely check those out and they might have prizes too. Today's theme prizes so sharepoint framework updates from vasa. Let's hear about all of the prizes, he's got.

C

Prices, prices, prices, hello, no, um so quick, uh quick recap on the on the growth, uh so this is the latest from actually from last sunday, uh so the growth curve. We are expecting that slightly go down in november and december time. Frame due to typical holidays is in slowness, which is good so that people prioritize family and not just work, but it's for now we keep on skyrocketing every single week, we're actually doing a record related on a sharepoint framework. Third-Party usage, which is pretty cool and also the sharepoint framework in teams, is growing.

C

Super super fast. This is just a the following slide. Just to recap, I didn't actually update this too much, uh but basically we're still looking potentially having 1.12, maybe this year, early january as a relatively fast fix for certain areas, so support, for example, complex microsoft, team solution, where you can embed to manifest for microsoft teams inside of the sbp kj4, rather than trusting or being dependent on the auto generated, manifest file.

C

So if you're trying teams and then there's a lot of a lot of other teams, uh related uh topics and and improvements in the pipeline um and also other stuff, which will be there's an interesting announcement coming in the mid uh december time frame uh with the additional things, what we can do in manchester 365 extended with spf x, so there's cool stuff coming uh pretty soon as well. But that's all from me for now. So let's move forward.

A

Prizes uh we'll give the pdpgs client side updates awesome.

D

Thank you, patrick, so I want to announce that we dropped 2.0.12 on monday, the 16th a little bit late, but we wanted to get a lot of great news features in. So we have a lot of bug fixes. We did add a new feature called get parent infos to the list, object, the folder object and the items object. uh So that's a great new uh feature that we have there and we also um added get banner image from external url.

D

So that way that if you want to set the banner image on a modern page, you can point to an external url and it'll bring that into the site, assets, library. So that's a great new feature and we also added support to work for add chunk method to work with large libraries where there's over 5000 files. So that's some great new features.

D

We also did a bunch of fixes and also want to make sure that everybody is aware that 2.1.0 beta is out which us adds support for isolated runtimes, so that you can reach to two tenants at the same time.

D

So definitely want people to check that out and give us feedback and also make sure you're following the m365 pmpjs twitter account for any updates, and that's all. I have julie.

C

Julie truly before you go sorry, I have to ask um the logic: why would you ask why would you access two different data at the same time, just to be clear that it's the.

D

So yeah, so it could be two different tenants like if you wanted to move content from one tenant to the other or if you're going cross-geo, or uh that is a similar situation. So if you have multi-geo that you're technically crossing tenants, so you're not really it's one tenant, but it looks like two tenants and so the ability to authenticate against both gives you a lot of power.

C

Yeah- and this is when you're using server side code in node.js and using bnb.

E

D

So typically, people are using that.

C

On client side, so that's just yeah.

D

Well, the client side is the cross geo part of it and the node part of it is the cross tenant part of it right.

C

A

More prizes with that update, we'll move on to the cli for microsoft, 365, which I'm going to talk to so released a new beta v 3.3 with adding getting removing to do's removing deleted sharepoint sites, updating web part properties, improved, applying jmes path, queries, uh that's actually a thing, I'm not sure what that is, and separated standard out standard error, output and, more so fantastic, to see the continued development on this with tons of great community contributions to the cli uh install the latest preview npm install dash g at pnp, cli dash, microsoft, 365 at next more information aka.mscli-m365 and also just to note again available natively now in the azure cloud, shell so very easily to use this and bring this into the work you are doing now, we'll move on to the yeoman generator.

A

I will also talk to this, so at pnp generator dash spfx is out 115.1 uh microsoft. Graph toolkit support added, fix some issues with angularjs and uh chandani prajapti uh helped with the angular uh work there. uh Future imports source map, support for angular projects, angular 11 upgrade upgraded improvements for vue.js and babylon.js. That is all in the works.

A

If you're interested in helping out with the generator work, uh certainly welcome that in that project as well as, of course in all our projects, welcome you to participate, install the latest version, npm install dash ge for global at pnp, slash generator, dash, spfx documentation. There will get you aka dot, ms slash pnp generator, and they have a getter channel there. Getter.Im slash generator spfxslash generator, so certainly check out the great new stuff coming out of that fantastic way.

A

To start your projects and get things lined up, pnp modern search is me as well ak dot. Ms slash pnp dash search so building modern search experiences with flexible web parts, so there's a new v4 preview available. So this is a kind of a rewrite and update and refresh of all of the code. So you can check out the preview supports graph search api as well as a sharepoint search api. It's re-architected to be a little bit more modular and as well provides uh some additional search. Options such as azure search, provides other renders besides.

A

Handlebars gives you a lot more options and configurability is really the takeaway there and feel free to test and provide feedback, no direct upgrade from v3. This is a fully breaking change, so you are now going from v3 uh to v4 as a brand new thing so check that out, docs are now uh going to show up. The v4 is what you're going to get by default, though the v3 docs are, of course, still available uh version. 315.3 is still available. That was a september release.

A

It's got refinement, fixes, bug, fixes had six contributors there, but uh still not looking to add significant functionality to the v3 release, if you're interested in contributing absolutely encourage you to do so, but looking to have those contributions target uh v4 now for the modern search and now I'll hand things over to hugo for update on the samples so.

C

We have two two repositories that are maintained by the community that allows you to find samples for both uh spfx extensions and web parts. So over the last two weeks, we've had a few updates. uh On the extension side, we have a new bot framework, single sign on by chong, woo and team, and on the web part side we have two more samples from wu, one, which is the single sign-on bot framework web part and the secure bot framework great work.

C

We also have an update from abdurman mujahid on the graph calendar, who added more localization to some panels.

C

Kunsan ghani and siddharth vegasia have given us the new edit application customizers, which allows you to actually configure your application customizers using a web part emery thomas has updated the telephone directory and abduramon did some a lot of fixes actually on the content, query web part and finally, we have a new web part sample from don kirkham, which shows how to leverage the section theme color background color.

C

So if you are looking for these extensions, the urls are above ak dot ms spf x, dash, webparts and spfx, and thank you for your contributions back to you, patrick.

A

Thank you, hugo for that great update and love to see all these new samples and all this great work for the community. As I said when I have new work to do or have questions one of the first places, I look is at all these samples and I encourage you all to check those out as well we're now into our optional picture time. So, if you'd like to participate in this, please do turn your camera on and.

A

Let's populate.

C

In there we're using a new picture background, um apparently these are now available in our channel, so you can indicate this indicates that this will be soon out for you as well. I can see I'm apparently a teacher now, so this makes me feel awkward.

C

Let's, let's do some funny so and excellent. We still have to see it's under on the room. So that's really good. That's one picture there's another one and excellent one more one, more everybody as well excellent! Thank you thanks everybody. Let's go to the demos, let's not spend too much time on this one thanks. Everybody.

C

Cute, who do we have on the demos.

A

uh Who do we have on the demo.

C

It's the phone.

E

A

F

Yeah, thank you. Thank you folks and, yes, let me start sharing my screen in the meantime, let me say that I'm a little bit afraid because I don't have any prize sorry no prizes for me today.

G

I'll do my best next time.

F

Okay, I will just introduce the topic with a couple of slides and then I will move to the actual demo. So the idea today is to see how you can use a sharepoint framework to extend the user interface of power automate when it is needed, and that's why I want to share with you a couple of information.

F

So, first of all, with power automata, when you create a flow integrated with sharepoint online, you can do quite a lot of stuff nowadays and, for example, you can configure a launch panel or a flow launch panel that you can use to collect information from users when they start a new instance of the flow by selecting, explicitly selecting an item and then starting a flow instance.

F

With the flow launch panel, you can collect input, arguments which can be text, information or a drop down a list of options. Yes, no fields and a file attached to the flow, an email address or a number or a date which is really cool and great, because you can improve the quality of your flows when you start them from within sharepoint online.

F

However, what if we need to do something more like, for example, we need to collect specific users or groups using the people, picker eventually with some filtering criterias, or what, if you want to collect, for example, terms using the taxonomy of sharepoint online and nowadays the taxonomy is back to life. Let me say- and it is becoming again very important in token management, solutions and information architecture of solutions based on sharepoint online. So why not using the taxonomy to collect information which will be additional input for our flows?

F

Why not having the capability to support multi-language, ui or ui? That can be adapted to the context when we are rendering the flow panel to request information to the user and why not having constraints or validation rules about the input field that we collect. All of these capabilities, unfortunately, are not available. If you just use the flow launch panel and that's why I want to show you how you can leverage a sharepoint framework to do that.

F

Moreover, you can add custom logic, of course, and many many other things whenever you use sharepoint framework to build the ui and, moreover, when you think about the flow association targeting sharepoint online well in flow in power automate, you can associate a flow to a list or a library, but for example, you cannot associate a flow to a specific content type unless you use some tricks in the flow that you create.

F

At the same time, we cannot use the same flow on multiple libraries again, unless we use, for example, tricks like registering a flow to listen for a web book for multiple list libraries and then inside the flow. We try to understand what the target list or library is.

F

So there are some challenges, and nowadays, when you want to do more than what is provided out of the box and again so if we want to, for example, associate or start and make it possible for end user to start the flow, if and only if, they select an item with a specific content type, we need to do something more inflow in power automate.

F

We can use the trigger conditions, but the there is a, but let me say I mean, uh for example, you start the flow in power automate and the flow will have a trigger condition which will make the flow actually trigger or not, but the user will still have to click and we still have the capability to click in the ui and to start the flow, even if the trigger condition is not satisfied and the same applies whenever you want to start a flow targeting items with a specific status with a specific value in their field.

F

So in all of these scenarios again being able to uh extend or replace the flow panel of flow with something built with sharepoint framework, I think is really useful, as well as to being able to associate or use the same flow targeting multiple lists or libraries. So let me move to the demo environment and let me show you how you can do that using spfx integrated with the power automate.

F

So, first of all, let me show you a solution that I have, and here we have a document library in a modern insight, and here I have a flow, a flow defined with power automate. So I can select an item I can go to automate and I can start a new flow with the launch panel, and this is the launch panel. I was talking about so no matter a few seconds. We will be able to provide some input arguments like some text.

F

For example, we can select some input values, we can choose a boolean, we can upload a file if we like it can be whatever you like. I don't know, I really don't know. Let me get a sample document, okay, this one. Let me provide an email address which can be my address. So now you can spam me if you like, can be a number and can be a date. So still some good options available out of the box with flow. You can run your flow and in your fro you will get the information.

F

In fact, if you go to the uh is a flowing power output which I define, we can see that we just or we will have a flow running, or maybe I didn't. Oh okay, I didn't get a proper email address. Sorry about that. So let's get this one, for example, run flow. Okay, and here we will see a matter of two seconds: the flow which was executed so all good, and we got a bunch of input arguments inside the flow now.

F

What if we want to do more, because when we do that, we use the, uh for example, the trigger action for a selected file in sharepoint collect some input arguments and we can add as many input arguments as we like, but what, if we want to do more like, for example, being able to say?

F

Okay, let me select this item and if I leave this item as a specific content type or as a specific status in a field, I want to have using spfx extensions, a common set which will allow me to start the flow with the custom dialog, which will have a more customizable user experience like, for example, this one, which reminds me the approval flows. We were used to use in the past with the approval flows of sharepoint 2010 for memory, but still customers often want to have such kind of experience.

F

They want to be able to define a list of approvers dynamically. So, for example, I can have myself as an approver, but I can also define that I want to have another approver, which can be one of my colleagues here or I can do more. I can choose a date. I can use a taxonomy field and so on and so forth. By building such kind of solution, you can easily extend and provide a better ui based on spfx, but still integrated with the power ultimate.

F

In fact, by clicking on the start flow button here, I can see that in another flow that I have in my power automate here. Let me go here my flows, and here I have my spfx flow ui. We can see that we have a flow which is running right now. This is just creating an approval task and sending an approval task to the two users that I selected.

F

And we can see that in this flow. If I click on this one, it is working, it is running and most likely now it is completely executed. Okay- and I will be able to see in my inbox that I have- or I will have soon- a message coming from the flowing power automate with the assignment of an approval task to my user. So how can we build such kind of solution?

F

First of all, in sharepoint framework we can define an extension, a common set extension and in the common set extension in the on list view updated. We can easily check if the content type of the selected item is the one we are looking for so by accessing the event object that we get as the input to this method.

F

We can simply collect the content, type id information and field of the selected row, which is just one item in this scenario, and we can compare this one with a setting that, for example, we could have in the settings of our common set. In fact, in the properties of the command set, we defined a target on the type id property which can be configured whenever we associate these command sets to a specific target list or library, which is what I'm doing here.

F

So when I add this common set, which is at the very end, the custom action from a sharepoint online point of view, I can provide in the settings also through a json object. The target content type id that I want to target with my command set.

F

Then, once I have decided, if I want to enable or not the command in the ui, I can, on the execute method, simply rely on a dialog built using the sharepoint framework dialog framework, and here I have a dialogue window which I created and, of course this sample will be then shared on github, and here I have a dialog which has been built using the dialog framework of spfx and they simply create a new instance of a dialog content object, which I define here as a react component and inside this react component.

F

I will simply render a an array of approvers, for example, where every single approver is yet another uh react component which will simply use the p patrol that we have in pmp in order to collect what the user is. What is the user selected by the end user triggering the new flow and, of course we can dynamically render the approval controls inside the ui rather than having a predefined set of fields like we do have using the out of the box flow launch panel of power automate.

F

So once we have done that inside the command set. When we complete the collection of information through the dialog window, we can simply create a flow start flow request which will be a json object in there.

F

We can store information about the site about the document about the approvers provided by the user through the ui as well as, of course, if you like a flow due date or whatever else, a taxonomy field or whatever you like, and then we can make an http request, targeting the url of our flow, which will be a flow triggered by an http action so that, if I show you in power automate the source of my flow, let me go here.

F

This is an http triggered flow in the request body I defined through the json schema syntax that I want to get the site url the collection of approvers as an array of strings the due date and the file relative url and inside the flow.

F

I can simply use the out of the box capabilities of power automate to get the file object to get the metadata of the file and whatever else I need to do, and I can go through all of the approvers to assign them an approval task which can be a sequential or a parallel approval task, depending on what I want to do in my business logic. So quite easy, quite simple to do, of course, in order to use this trigger, we need the premium capabilities of power automate to be fair.

F

There is a kind of a workaround. We can eventually store some information inside metadata fields of the currently selected item and avoid using the http trigger. But as such we will not be able to associate the flow to multiple lists and libraries so up to you, uh depending on the fact that you want to use the premium capabilities or not of a power automate.

F

But as such, this is, I think, a great way of extending the ui of uh power automate in sharepoint online, using a sharepoint framework, and last but not least, you can also do stuff, like in microsoft, teams, of course, having a tab which will render the web content of your list or library, and you will still be able to choose an item and start the flow from there and you will still have the same reach inside microsoft teams.

F

I think that was it for me, uh patrick so, back to you. It was about 15 minutes, so I did my best to stay uh nope.

A

You were spot on great work um and fantastic demo really interesting to see that and obviously a lot of different ways that could be extended even further to do more and more and more so, really exciting solution, and something to that you could really build on which is always exciting to see in these demos. So next up is fabio.

A

G

So, uh thank you guys. This is my first pmp demo and I'm so excited, and in this demo I want to show you how to use the tailwind css framework inside a sharepoint framework project.

G

So just a few words about me: I'm a microsoft mvp in two categories, office, development and business application, and I work as an independent senior consultant and mct trainer on the microsoft 365 and power platform. So you can find here some information if you want to contact me. So, let's start uh first of all, uh what is tylewind css?

G

Basically, the tailwind css is a utility first css framework that contain already pre-builded classes that you can use to compose your ui directly by using the markup without write the css, because we already have the css classes for that cover. uh Almost all the aspects of the ui, for example, text margin, padding background and a lot of stuff regarding the ui.

G

What's the core concept? It's a utility. First, we already have a lot of primitives utility builded, it's a responsive because it contains a concept of variant, a variant. It's a a piece of selector that you can combine with another primitive to to create a complex selector and apply some primitive uh just in some breakpoints or in case of the pseudo class. We have some variants that you can use to uh to apply some primitive on hover, on focus on and and more. The best thing is that the tailwind css is a completely configurable.

G

You can use a simple js module and you can you you can use this file to configure all the aspect of the framework, it's very powerful. So let me start with a simple demo of the tallwind css playground. Of course you can find all the information regarding the tallwind css directly on the tallywindcss.com site.

G

Yesterday, the thai wind was published with the version number two and in my demo I use the version number one, but it's not a big problem and inside this site you are able to find all the information. For example, let me show something with this utility class.

G

You are able to change, for example, the weight of the adiv or you are able to change the uh the color, uh the background color of uh any elements, or you can change the typography like the fonts or you are able to apply the shadows inside a particular element inside your markup or, for example.

G

In this complex example, we are able to show you you're going to see different ui that contain the same structure of html, but that uses a different class names inside the markup.

G

Because the tile wind- it's already pre-builted, so we can build the the css file uh by using the configuration file to change the colors and all the aspects of the framework. The css is really big and then we can use some utility that I'll show you later to remove all unused classes and then generate only a small css file that contain all the classes that you use inside your markup.

G

Ok, yes, the last thing is uh the possibility to use some breakpoints and then change the ui by uh by using uh some variants like small or large or different to apply a different uh selectors. For example.

G

uh If I uh change the the weight of this uh this panel, I'm able to see that I have only agreed with one column, but in if I change I'm able to apply different selectors inside the ui, you can use the play.tilewincss.com as a playground, and you can try to use this framework without use, react or different different frameworks.

G

This example it's an example that implement the the document, the document card builder for fluent ui, and it's using only the the thalwin css classes. For example. We can change some aspect. Some classes and then we can move and change the the margin, for example, and we can change a different uh classes like we can remove the border or put the border or remove backgrounds or a different classes.

G

You are able to see that with these classes, you are able to reproduce almost all the ui that you want. In this case, I rebuild it from scratch: the the persona control only by using the tile wind and some divs to create the structure.

G

Okay, but now how to use taiwan css inside a sharepoint framework project.

G

Basically, we need to install the taluen css by using um by using the npm or yarn, and then we have to install the gulp post, css and gulp autoprefixer, because we need this post css to purge uh the generated file to have a small file inside inside your project and then we need to add a simple, simple, tailwind, css or the name that you want inside the source.

G

Folder and add these three um directive, it's a custom directive that the tailwind have and contains the the the basic uh classes for bayes for component and for utilities, and then, after that, you need to create a configuration file. In my case uh the name is thetalwind.config.js and inside this file you are able to overwrite all the configuration for template change, the colors from the sharepoint theme.

G

But you are able to add all the configuration that you want and then the last thing is, you have to um create a post build task inside the gulp, because we need to generate the tile wind css file by using a tailwind css to read the configuration and using the post css to to clear to purge uh the file and then the last.

G

The last thing is uh inside this code is to take the generated file and write this file inside the lib folder, because we need to pack inside the the same package of the solution.

G

Okay. So what about the section background in sharepoint page so tile, wheel, css has shipped with the the home colors, but we want to use the colors that we have inside the sharepoint. For example, in this case, I extended the configuration file by extending the colors and I create the different colors. Basically, the name is the same name that we have inside the uh the theme object inside the sharepoint, and I set the value as a css variable.

G

It's very. This is very powerful because at runtime we can change the variable by using theme, change it haven't inside our uh our web part, and then we can set. We are able to set for the uh current dom element of the web part, for example, the uh the property, and in this case we can set all the property all the css variables to the current uh value that we want to use.

G

Of course, you need to add the support for the team variants because out of the box, it's not enabled for for the web parts.

G

Another thing is the possibility to have the responsiveness by using the page columns inside a sharepoint page. In this case, we need to create a custom plugin for thai wind css and then add this plugin inside the configuration file.

G

It's this implementation, it's not a very good implementation, because we use the the sharepoint css classes to understand what is the the section inside the page when we part it's uh rendered, but uh I want to change this uh this way to to adopt another another method to understand in which section uh the web part it's present. But now it's work uh basically the plugin.

G

It's an a variant, so we need to create a variant. I named it this variant, sp minus call means one or the different variation and then we need to modify the selector.

G

We take the the class name and then return just a big, um a big selector that contains uh the first part contains the selector of the call of the section inside the sharepoint page and then our our classes.

G

So let me show the demo and I want to show you directly what is the result, so uh this is on a sharepoint page that contains just one web part that contains two different components, and I want to show you if, if I modify the background color of the section, you see that in this control we use a different value for the color for the text for the background and and the border okay.

G

And if I change the layout of the page, you are able to see that the component is automatically rearranged by using a different css classes. It's very powerful. So let me show you the implementation. So um basically, we need to uh enable the support for the team variants and then inside the webpart class.

G

We need to write the code to manage the uh the theme and then enable the handle team changed event to execute our function, to set inside the current element style, the property, uh the css variable for all for all the colors that you want to use, and then we need to have inside the source the tile in css.

G

In this case, I put the definition of my css variable just because I don't want to have a flickering when I add the web part and then I need to attend uh the current team to apply and then set the same, the same css variable, and then you need to use the tallwindconfig js to modify all the aspects of the tilewind, for example the callers, the and our custom plugin.

G

And then the latest thing you remember it's the gulp file that contains the post, build task that you have to use to take the title in the css inside the source and then compile inside the lib delete folder inside the lib folder. We have only the css that contain only the classes that we use inside our component and inside our component, for example, the document card. This is a simple react component. We can use the class name and put all the tally in the classes to to make the style inside the horizontal card.

G

You are able to see that we can use our custom variation, a speed, call 1 and then apply a different border, or here a different selector class to uh to change the layout of the component. Based on these on this variant, okay, I just wan- I have just one slide again next step. Of course, I want to add the support for the tallywind version 2, because there are a lot of improvement in this in these libraries.

G

I want to add the support for the team's theme, and I want to improve the support for the sharepoint team, and another thing that I want to to implement is rebuild from scratch: the responsive plugin to remove the sharepoint section, css class and use a different way to to check the parent. uh The pattern container. Okay, I'm finished. Thank you.

A

Great thank you for that very interesting to see how all that works. Like I said, I hadn't had a chance to play with tailwind, yet so neat to see it in practice. So marcus you are up next. Yes,.

E

Hello, take it away, yeah my screen: okay, so yeah, my name is marcus muller, I'm a microsoft, 365 developer. I work for avanade and I'm based in germany and for those of you that uh already know me. I have added some additional pictures today. This is what we usually do internally to get the people to know a bit better. This is what I would do if I would not be an I.t professional, so maybe baker, man, animal photographer or an iron man, but these are only dreams.

E

So, let's get back to the topic today, I want to talk to you about a file uploader, but not only about a simple file uploader but more about the special capability of microsoft graph, which is the pdf conversion of office documents, for instance, and this in combination.

E

I want to show you today and for this I need to go directly into the demo, so we have a web part here and we have a drag and drop zone here, which uh I uh clearly marked with the border, and once we picked a small document like this one, for instance, we can drop it on this zone and then there's a small process running, and this is what I visualized here. I will show you in a graphic uh after the demo as well, so I will first upload the document.

E

Then I can retrieve it from one drive as a pdf again and then I can upload the final pdf version of that document and that this works we can see on the same slide in the library. Here we have our pdf document.

E

This works as well also, and as I will show you uh in a minute in a browser, it will also work in uh in the teams. Tab, of course, and let's illustrate the process um and therefore I can also give you the downside already as you've seen in the visualization with the progress component already. The thing is: when you want to upload a file, you cannot upload it directly as a pdf.

E

You will have to upload it first, and I do this in a temporary onedrive folder as an original version and from there once I have the id, I can download it back as a pdf file, and once I have this pdf file back, I can upload it in that version to my target destination, which could also be, of course, the onedrive or sharepoint um teams. Library, as well um as there are such a amount of server round trips here and we play with ping pong um I used.

E

uh The first approach was spfx just for a simple implementation of this api and to promote this a bit better. I've heard recently from jeremy's sake that this is not a very well known api and not much used, um although it's working quite well, and also it's also um yeah quite useful, so let's dig into it the code how this works.

E

Finally, so what I'm also working uh by the way is, uh I can do this, and this would be a better option to do this, maybe with a backend component, which will do this server round trips in a shorter way.

E

Nevertheless, how does this work in sharepoint framework? First, uh what we do in the um in the root component of the web part is uh for teams. If it would work, I would grab a channel name, for instance, because you know that you need the channel name to upload in a document library that is visible in teams as well, and what I also need is a site id for any kind of drive upload to sharepoint or teams.

E

Library- and this is, I can also grab from my contacts, which is built up from the host name, the site and the web id the drag and drop works. The following.

E

What I have here is a div component, and this diff component has several events. What I like to do is to to highlight the component of course, uh once I uh drag something over and to disable this once I drag it back, but what we also always need to do is- and I call this here- an allow drop method. um This is to prevent the default event handling yeah. This is what needs to be done in all the cases and also in the drop file methods later on the rest of the component.

E

This looks a bit strange, but this is only for the visualization progress components. You have seen the drop process or the drop method itself. I already mentioned in the process description.

E

Is that what I'm doing after I have initialized my graph service that I first have to upload the file to onedrive. Then I will download it again as a pdf file from there and then I can create a new file, name of course, but finally, we'll upload it to the site as a pdf, and last, not least, I didn't mention this so far.

E

I will, of course, delete the temporary original file from my one drive again to see uh what's above here above you can see also how I grab the fryer from the event or the files. You could also use more than one um how I grabbed the files from the event to get them accessed the upload the temporary upload to the onedrive is nothing really special. What I'm doing is simply.

E

First, I create a url that takes me to a temporary onedrive folder, and then I will call another method you will find below, because I use this method twice. Also for the site.

E

Upload later is that I will upload the file finally, a wirecraft and grab the response, because I need this file id what's created for retrieving it in the next step as a pdf file, the upload method itself is a simple graph endpoint here and what's important, is uh I didn't show this here, but I showed this in another presentation at the beginning of the year on an outlook web add-in, when you upload files to graphs, if you're, not aware of you, have two uh things to consider either if your file is smaller than four megabyte or if it's bigger, if it's bigger, you can only upload it in chunks, and this is what I didn't implement here just for demonstration purposes.

E

Now we are coming to the download of the file, and here two things are important.

E

First is what you regularly know is how to download the content of the file, and this is that kind of endpoint and what we simply do is we attach the format, and this is currently the only supported format is pdf and with this additional extension um graph knows that, if, of course, the file is of an correct uh source uh type, then he can give you it as a from a pdf format, and the second important point here is the response type you have to give in this case, especially from when coming from sharepoint framework.

E

This is the response type blob so that you will directly get a file. Otherwise you would get a redirect url and might get into cost troubles, and then it doesn't really work, because originally this content endpoint is more or less designed for back-end scenarios. The final upload from the pdf file. Again, uh this is nothing special anymore. The only thing what to mention here is um that what I'm doing here is I'm checking if I'm in a team stop or if I'm in a sharepoint framework where part.

E

So if I have a channel name, then my endpoint looks slightly different than in the normal sharepoint site and finally I'll call the already known upload file method and that's it last, not least, some resources. I have a blog post on this topic where I explained about the deeper mode and also currently my personal github repository, because I can find the whole source code.

E

um I will share this also as a pmp sample once I find some additional time for this and finally um also the microsoft documentation on this special graph endpoint on the pdf conversion.

E

This is still existing, um but uh I think might oversee my by several people and even uh in the light in his last podcast jeremy seg mentioned that he was not really aware. This is documented. Quite well. Yes, it is that's from my side. Thank you.

A

Great stuff, thank you marcus for that. I'm just going to share real quick back out to the slides, so want to thank paulo fabio and marcus for their fantastic demos. Today, I think I've learned something I hope all of you have as well. Moving on uh recording will be available in about 24 hours on our community youtube channel. You can follow us on twitter at the two handles there. Our next spfx call will be december 3rd at 7 a.m. Pacific time the next general dev sig call will actually be next thursday november 26th.

A

I know for a lot of us in the states that is a holiday. The recording, of course, will be available, so don't feel like you need to attend on thanksgiving and the december monthly community call will be december 8th and that will be all about branding. So looking forward to that a topic, we don't cover a ton on these calls so excited to see that. Thank you all for attending. uh If you've got some time, I want to check out there's lots of other great community calls across all of the microsoft stuff.

A

That's happening in the world so encourage you to check out those. Thank you all for your time today. Have a great rest of your week have a great weekend and I'm sure we will talk soon. Bye, bye, prizes.

C