Microsoft 365 Community Viva Connections & SharePoint Framework, 11 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint Framework community call – 11th of February 2021

Description

SharePoint Framework community call on February 11. Demos delivered: 1) React web part to group documents based on metadata, 2) Using Aurelia in SharePoint Framework, and 3) Building generic feedback form with SPFx, including panel and email sending capabilities. More details on Microsoft Viva Connection partner and customer extensibility options in Spring 2021. SPFx v1.12 release date is nearing. PnPjs v2.2.0 release scheduled for February 12th, PnPjs v2.1.1 patch released February 1st. Three PnP SPFx web part samples highlighted. The host of this call is Patrick Rodgers (Microsoft) @mediocrebowler. Q&A takes place in chat throughout the call.

Demos:
• React web part to group documents based on metadata – Hugo Bernier ( Tahoe Ninjas) | @bernierh
• Using Aurelia in SharePoint Framework – Magnus Danielson (Dunite) | @MagnusDanielson
• Building generic feedback form with SPFx, including panel and email sending capabilities – Perry Kankam (ThreeWill)

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: 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 is february, 11 2021 very excited. We got a great meeting for everybody again today and I am patrick rogers. Your host for this call we've got a great agenda uh latest updates on sharepoint framework updates across all the patterns and practices offerings new community samples updates, we'll do our optional picture time and together mode, which is a great fun and then three outstanding demos from hugo magnus and perry on uh react.

A

Web part to group document based on metadata uh using aurelia in sharepoint framework, and then generic feedback form with a right side panel and some email capabilities. So three cool demos very excited to see those all right. So often people ask for how do I participate in the past practices program? Or this call specifically the best way to participate in my favorite way. For folks participate is demos. So if you have a demo, you would like to do on the call please reach out to myself or visa, and we will get you scheduled.

A

An upcoming call for this call that can be really anything around client-side development. Anything around sharepoint framework anything around any of the at pnp offerings or uh you know, obviously, there's tons of different sdks and libraries out there in the world. So, if you have you know, other stuff, you've built doesn't have to be exclusively pnp. I would love to have you demo that, on the call just reach out to us, as always, you can also contribute on github, so reporting issues, submitting pull requests or helping out with issues or questions.

A

So if somebody has an issue and a question, you happen to know the answer, I would love to get. uh You know you jumping in there and helping them out, because that will very much help them get their answers faster. Finally, uh absolutely provide feedback to all of us on how the calls are going.

A

Documentation needs where we can help how we can help and positive feedback is okay, too, of course, because we can always do a little bit more of the things you like up next is our pedro links, so we've got links there to our developer. Videos which are generally task focused uh topic, focused videos on how to do developer, oriented tasks, so it might be authentication related provisioning related how to build your first sharepoint framework project. Things like that uh check those out we've got the pnp dash videos, which is all of our community recording.

A

So this this call our general dev call our monthly calls as well as many other of our community events. uh You can find all the recordings there as well. We've got a bunch of different open source organizations uh in github, so sharepoint pnp office, dev and microsoft graph. All of those invite you to uh you know, contribute provide feedback report issues and encourage you to get involved in any and all of those that might interest you uh sample galleries.

A

We've got tons of great samples, so spfx webparts extensions list, formatting and teams samples so certainly uh check those out and we can build on those and develop those further, and we will continue to see great work uh come into those and really enhance things there. So open source initiatives and samples, aka dot. Ms m 365 pmp, is the one link. You really need to remember.

A

That will connect you out to all the rest of the samples and guidance so encourage you to check that out and finally, there is a sharepoint framework linked there for all the spfx documentation ak dot. Ms slash spfx, and with that I'll hand things over to.

B

David for sharing his caring updates awesome. Thank you, patrick well, friends. The patterns and practices. Community, as we know, is an open source and completely inclusive community. So we invite everyone who would like to contribute around the tools and resources that we have to do so, but we also know that you might just want to use those resources and tools and of course, we also know that sometimes just using them comes with a certain degree of barrier, and so the sharing is caring.

B

Initiative is here to kind of lower those barriers, help you get over them and start using and contributing back to the community. We have a variety of sessions, I'm not going to run through every one because it's starting to grow, but we are excited about what we have in store for march, we're going to have a couple of new sessions that we've been working on as a team more than code with vs code.

B

So if you're a maker, a documenter, a creator, a power addict we're going to show how you can utilize vs code for all those tools that you like to use as well as a first time presenter session. So if you would like to get more involved with showing demos but you're a little nervous about the the requirements and the skills needed we're going to cover all of that, to give you the confidence you need, we want to welcome emily mancini to the team.

B

Super excited the team's growing with myself, hugo and april dunham as well, and emily is now joining us, a fantastic team and then, lastly, but not leastly right after this call, we're going to have an ask me anything with the pnpjs team right after this call. If you go to the aka.ms, sharing is caring go to the sessions, it is the first session listed and there will be a direct teams link. So all you need to do is click it and join and we'll all be there to collaborate together.

B

So look forward to seeing everyone there, patrick back to you.

A

Thank you that update david and do definitely invite everybody. If you can make it to ask me anything very excited uh to take everybody's questions and apologies for the bit of the reschedule that was on me and with that we'll hand, things over to vasa for our sharepoint framework update.

C

Excellent, thank you patrick a few slides in here. uh The first one is really around the future things. So, just to be clear, we announced the viva product series last thursday, so akms ms slash diva, is where you can get more information and run down, and one of the most interesting uh thing is here is absolutely the viva connections. So vivo connection is something which can be extended uh using the the team's extensibility and sharepoint framework um to your needs.

C

So basically, what you're seeing here is just a few preview pictures related onto viva connections and directly exposed in the microsoft teams and just to be super clear. It is up to the partner and customer or the architect to define what is being presented in there. So you have a full control on. What's what is the viva connections experience and for the partners? You can actually include your own extensibility and customizations uh as part of this as well.

C

So in certain level, it's it is the portal app uh which we announced in ignite 2020, but it's much more than that. So it's enhanced and there will be additional capabilities and we will provide additional details on this one as the spring continues.

C

This is just a quick recap on the road map for one point uh well for spfx in general, so 1.12 is coming relatively soon. We are almost talking about days rather than weeks, which is critical so as long as we get the documentation and and all of the tests uh completed, and that will then include, for example, the media support for creating microsoft teams, meeting apps and a few other things as well.

C

So a lot of a lot of cool stuff there we're looking into actually releasing 1.13 and 1.14 during the spring, as well with new capabilities targeted for viewer connections uh as well. So there's a lot of a lot of new opportunities with sharepoint framework targeting not only sharepoint but also microsoft teams, but patrick. Let me try to try it back to you.

A

Thank you vasa, and I will take it and throw it over to julie turner for rpmpjs, client side library updates. Thank.

D

You patrick so uh we had a big big big release of 2.1.0 in january and we were a little nervous. We hoped that nothing would go wrong and we only had some small issues that we needed to fix. So the 2.1.1 patch was released on february 1st, which fixed an issue with global headers. uh It also fixed for client-side pages like an unlike feature and a proxy code fix, so those fixes went out in that patch and then scheduled for february.

D

12 will be the 2.2.0 release, we're definitely going to have a default column, values fixed for the taxonomy fields, type and the get all children as ordered tree, custom sort order. Bug fix will be in that drop as well. We'd like to also announce that we will be posting soon, a v3 planning issue and discussion issue.

D

So what will happen is we'll have one issue posted that will be a planning issue that will have the outline of all the things that we are going to try to tackle in v3 and we'll lock that issue as sort of a table of contents and then we'll have for each of the issues. A discussion issue where you can go and give your thoughts on that issue, some feedback ideas that you might have regarding that particular thing and we'll discuss it back and forth so that we can start really uh moving on our v3 plans.

D

As always, please direct all your feedback to the issues list and uh follow us m365p on twitter. Thank you and back to patrick.

A

Thank you for those great updates, julie and next, the cli for microsoft, 365.

A

so released v, 3.5 with converting files to pdf using the graph, sending adaptive cards, creating azure, ad apps and so much more be sure to check out the cli is a great tool in your tool. Kit, uh npm, install dash g at pnp, cli dash, microsoft, 365 at latest, and is now available natively in the azure cloud, shell, so a great way cross-platform to manage your tenant. Your projects uh really can help script.

A

A lot of things do a lot of setup tasks for you and continues to expand, seeing tons and tons of great community involvement in the cli, and so that is a great place. If you're looking to jump in to get started, it's very easy to to hop in and build a single uh what I call a command a cli command.

A

uh So it's it's easy to just sort of focus on that piece of work and not necessarily have to learn uh the entire thing, so very cool to see so much work going into the cli and that continue to involve so great work to everybody on that and now the reasonable components so react controls, uh 240, accessible according control, placeholder people, picker tax, picker list, picker updates for all of those, as well as a bunch of bug fixes.

A

Those, of course, are the controls designed to be used in the body of your web part or sharepoint application. Customizer and those will appear uh with a very nice out of the box styling and uh will let you really get a jump start on your development by using these controls and dropping them right in and leveraging that power react. Property controls, 2, 3 0. These are controls designed to be used in the edit pane of your web parts and property field, icon, picker, field term, picker and field list.

A

Picker have all gotten either some additions or updates there. So as well great to see all the folks contributing here as well, it's another great place to get started and jump in uh sp dash, dev dash, fx dash property dash controls and sp dev dash fx dash controls dash react we'll get you all the latest documentation on the reusable spf x controls, as well as at m365 pnp controls on twitter. It's a great thing to follow.

A

To make sure you have all the latest updates and now the yeoman generator, so at pnp uh generator uh 116 is the latest version. Angular 11 is now supported uh source maps for angular. uh Thank you to chandani uh for adding a lot of this angular support very great to see that get dropped in as well.

A

Other updates, updating the you know to latest versions or new related versions of pmpgist vue.js, pnp controls and property controls fluent ui fabric 7 now supported, as well as a ton of other great features and updates there still working on upgrade and improvements for vjs, as well as babylon js support npm install dash g at pnp generator dash spfx.

A

This is, of course, a yeoman generator that will help build you. A sharepoint framework project, but using a lot of additional options that are not available in the out of the box, yeoman generator. It does, however, use all the same stuff under the hood.

A

So you end up with a quote: unquote: real sharepoint framework project uh with all the same microsoft dependencies and uh base classes, as you would using the microsoft generator, so community generator great way to get a ton of additional options and configurations for your sharepoint framework projects, and with that we will go to the modern search updates, aka dot. Ms slash pnp dash search, build modern search experience with flexible web parts. So the idea here is: you have a whole suite of web parts.

A

You can use to build out your search center, uh so doing bug fixes and uh v4 was released on january 18th and it is a breaking change, not backwards compatible at all. So you will have to update your search centers to use the new release. It does, of course, support the graph search and the sharepoint search api. So you get some choices there in how you support your users, so check out the modern search for sure and finally spfx samples for hugo.

A

Thank you, patrick.

E

So the spfx sample repositories are two repositories that we use to share cool extensions and web parts. The code is available for you to learn from, and these are the new samples for the last two weeks. We have a new list search web part sample by alberto gutierrez.

E

It's a full feature web part that actually allows you to create a search interface and it allows dynamic connections. We have an update to the list form which uh now actually fixes the drag and drop support for reorganizing the field by cayman 1131. Oh, that's, fine! That's what I was actually going to name my child and then we have an update to the modern calendar by ravichandra who just updated it to spfx111.

E

We don't have any new spfx extension updates uh for the last two weeks, but I wanted to reach out to everyone and say there is a issue type called sample request, and so, if you have any requests for samples, this is not a commitment from anyone in the community that to say that we're going to make these samples for you. But if you have an idea, for example, or you need, you know, help with the sample and you're not sure how to get started.

E

Please do reach out to go to these repos and create a new sample request and hopefully you're going to inspire someone in the community to to help you. That's it for me back to you, patrick.

A

Awesome, thank you hugo great, to see the continued work uh to build out these samples and and again a great resource uh for folks getting started on a project to jump in and uh just find out what other people are doing to help solve some problems and now optional picture time. So, if you're interested turn on your camera and uh vaso will go ahead and get a picture time thing together here, see folks popping in there.

C

I'm already recording, so we can see whenever we hit the max 50 people. We can do some waving and could see a lot of familiar faces again on the call. I hope that we will see actually physically at some point yeah a lot of new.

A

Faces too so fantastic.

C

Absolutely everybody waving.

C

Thanks everybody hope we will share a key funimation on this one again, thank you. Thank you. Thank you. Let's stay in touch, thank you for this.

A

And with that we will go to the devil's first. Demo is hugo. So if you want to go ahead and take over the presentation, we'll just jump right to that.

E

Absolutely thank you, patrick thanks everyone. My name is hugo bernier. I actually curate the spf example repositories and today I'll actually be presenting a new web part on behalf of joao mendez uh who's on the call right now and he's actually going to be helping with in the chat with questions.

E

But joao is one probably one of the most prolific contributors to the spfx webpart sample repositories. Wow is the senior microsoft, 365, architect, solution developer and he typically builds really useful web parts that look good and that are usually ready to use, even though they're just intended to be a sample. They're, usually ready for you to use the web part that I'm showing you today is called list item menu webpart, and it does exactly what the name says.

E

It allows you to build menu items that are delivered from lists and documents and like most of chihuahua's web parts. The web part supports. You know, theme background support, it actually works inside of teams and lots of other cool functionality.

E

But let's not talk about it. Let's demo, something all right. So this is actually a page that is coming from the sharepoint lookbook. If you haven't used the sharepoint lookbook, I strongly recommend it. I think it's uh lookbook.microsoft.com.

E

It allows you to provision really cool professionally designed pages in sharepoint with some sample content. This is one of the ones that I believe this is the hr one, and you see there's lots of cool content. One of the things that it has in the web. Part itself is something like this. That says: oh here's, some links to benefits, here's some links to career, here's some tools and things like that and as cool as this looks, these links are all manually, curated right, they're, not directly connected to a document.

E

If you want to point to a document, then you have to actually create the link yourself. However, zhao actually came up with a web part that takes care of this. So if you go to my libraries behind the scene here, I have a hr policy library that I created and let's click on it, and I created three documents here: uh transitioning to work, travel policy and work from home policy, and I also created a category that allows me to group these documents.

E

I also created another library called recruitment where I put some samples like long resume. Templates short resume, template standard application, template standard offer, and then, if I go to a blank page here- and I just kind of edit the page and hopefully if the demo gods are with me here, I should find joao's web part.

E

This menu documents. There you go and again like most web parts, that you builds the the start. Experience is always great, it doesn't start broken. It actually tries to suggest something for you. But if I click on edit and I say, select the document, library and I'll just say- select hr policies here and I want to group by category.

E

And if I click apply, what we should do, what we should see is automatically. I now have kind of a menu that gets built that automatically creates the list of documents that are available from that library. So I'll just do another example of this super quickly and then we'll go back to showing the code list new document, I'll click on a different library here, which one was the other one that I said: recruitment, recruitment.

E

It works better when you spell right and category, and so it's actually finding the documents group by category and again, oh, I didn't uh there, you go and again. If we go back to these documents that I had created, you see all the documents that are listed here are actually the documents that show up in this web part. Now, of course, um I'm not a designer. I didn't design a beautiful page like joao did in his in his screenshot, but it's it's a great way to get started by pulling content to directly from a list.

E

So let's look at the code, though so there's a few points of interest in the code and again I could probably talk to death about about the code, but I'm really going to try to focus on the important parts.

E

The first thing to point out is that there is a list items menu web part now, most spfx web part projects consist of or have at least one webpart class, which is responsible for hosting the web parts, chrome and that's kind of that invisible frame around the content and it hosts the property pane it stores and loads. The properties- and it's also responsible for telling things to the content, for example, when the theme of the section changes and that's something I forgot to show you- is that the web part is section aware.

E

The imports at the top of the class is really what's responsible for telling uh the web part uh what kind of functionality we're going to be using. So, for example, here we're importing logic to do the to understand about the read-only theme, uh the theme provider and also how to handle events like the themes are changing.

E

Another import here, that's very useful is the pnp js library, the pmp, js library. If you haven't used it, you should probably attend the the ask me anything session. I don't think we've mentioned it yet, but doesn't ask me anything session about pmpgs right after this call. In this case, what the library will do.

E

Is it's going to be responsible to make it super easy to call sharepoint, apis and or graph apis, and it will take care of things like automatically syntax completion, authentication, batching, caching and all sorts of other things, so we'll use the pipgs library in in this code. Later and we'll retrieve things like documents and things like that, while we're on the topic of cool pnp libraries, one of the other things that you may notice is that we have a property pane that lists all the fields in the library.

E

As you saw, that's how I picked a category field and another one that selected the the lists, and so those are actually controls that are available to you in the pnp, reusable property control library. Now we could have written our own code to do this and you know overwritten the drag and drop control and retrieved. All the columns in the list show them in the drop down all that stuff. But why would you do that when you have controls that are already built that have already been tested uh and verified by the community?

E

You know focus on really the the value-added activities is really what we're trying to do here.

E

Another control here, that's that's used, is the property field message which allows you to scream at people when there's errors uh in a nice way. Obviously- um and we also have the property field spinner, which actually just does this- uh I think the property field spinner is the one that does the please wait. uh So if it's loading and it's actually taking longer, it's able to show a little display message for you again. The whole point is: let's not reinvent the wheel.

E

Let's leverage the logic, that's already built and tested by by other people, so that we can do the cool stuff like the stuff that joao does all right. So now, one of the things that we need to do when we want to use pmpgas, especially to call sharepoint library, is we just somewhere in the initialize web part?

E

We want to call sp setup and pass the context of the vmpgs, I'm actually kind of nervous to talk about ppgs when I have patrick and julie on the call, so we pass sp setup to set up the call and while we're there, we also grab a pointer to the microsoft graph client so that we can make calls later- and I know I'm going quickly here- I'm trying to to show as much of the code as possible.

E

The other thing that we do is we grab a connection to the theme provider and the theme provider is actually what tells the web part. What theme is currently selected so that, if you change your background, color or you change to dark mode, the web part will be aware of this.

E

There's a call here called uh try get theme which actually tries to get the theme and pass the theme variant to the web part and we create a connection to the theme changed event so that the web part can react when there's a change while we're on the topic of themes, we're also making provision. If we're currently running inside the context of microsoft teams, we grab information about what theme color we're using or we pass the default themes.

E

Try saying teams theme three times fast, it's actually quite complicated, all right and then the fun part when we're ready to render the web part. We actually just called the list items menu component and we passed all the information that we need for, for example, the titles list id field name. What variant for the theme we want to use, and so on and so forth everything else when it comes to rendering the web part happens within the components itself again, we always encourage you to try to keep your functionality.

F

E

Like that, so that you don't have to touch 17 places when you change your web part, you can really.

C

E

Your changes in one place super quickly here. If I go to the list items menu component, you'll see that the this is where all the rendering happens, but one of the things that I should point out is this is actually a react hook.

E

Class, I guess it's a class, yeah um and so react hook is a more it's a newer approach to actually doing uh react, components where it allows you to actually kind of create hooks or really function that extend the functionality of a component, and so you can encompass all that function in one place. So, for example, joao here wrapped all the logic to retrieve the list of documents in a library in something that he called use list and then later in the code, joao is able to make calls to the use list hook.

E

For example, get group items get group, headers get field, and so this is great because again all the logic for retrieving that data is in one place and then the rest of the component is responsible for just rendering the results. So the results I got from the list: expanding collects and group keeping track of whether a group is expanded or collapsed. uh It's all mostly straightforward from there. So I'm going to skip the rendering part I'm going to focus on on really the impressive part, which is that use list component use list hook.

E

So the use list hook here is actually again importing the pmpgs library to make it easy to retrieve stuff from sharepoint and then the use list has, for example, a method called get list columns and what it does is it says: go to the sharepoint current site, get the lists and then get the list that the person had selected by the list id and get the fields that are not hidden right, hidden equals false.

E

I know it sounds very uh simple when we look at it like this, but that's the whole point of the pmp.js is it allows you to create this kind of code? That's that's using kind of a fluent syntax where you can just say something dot, something dot something, and it's almost like you're writing a sentence. More than uh trying to write hard code, a api call, so we do the same thing for getting the list of fields again.

E

um We do the same thing for getting the list of group headers and I'm not spending the time to explain each one of them and we have a big one that is responsible for getting all the group items.

E

Finally, we have one last one that is responsible for getting the lists in the useless component, useless hook. Sorry, I should say which is responsible for returning all the lists that are available from a site, but, as you can see, all the functionality to retrieve the sharepoint code is really cleanly located in one place.

E

uh You know, I would bet that you can probably copy and paste the useless hook in your projects and you'd be able to leverage it with a with very little modifications, and that allows you to really be able to to do some cool stuff again. This was a super quick tour of code. Joao, I believe, is on the call he's able to answer questions I'll also be here to answer calls. The web part is available at ak.

E

Dot ms slash spf x, dash web parts just search for joao as an author or look for the react list items menu web part. Thank you xiao for your awesome contribution and thank you everyone for giving me the opportunity to show you some really cool code. I look forward to the next contributions from xiao and everybody else. Thank you. Everyone back to you, patrick.

A

Awesome stuff, thank you, hugo and magnus. You are up next. If you want to go ahead and take over the presentation, I'll.

F

Share my screen so first having a short overview of aurelia and then we look at the implementation specific for spfx, which is a part of the pmp solution and then, after that, we'll look at aurelia fluent ui, which is a wrapper for the official fluent ui from from microsoft. So it makes it easier to use within aurelia and to the right.

F

You see the links to the version, one of orillia and version two which is coming out in, like I don't know if it's weeks or or maybe just a month or two away, so there's a new version coming out which extends the functionality which we have in version. One.

F

So very short about me. I'm working tonight and that's my twitter handle. I built the um spfx surreal tool, which is part of the human generator and also the au. Fluid gui npm package, and also there is that's in in turn, built also on top of the real react wrapper. So you can. You can actually use that yourself to wrap any other uh react controls if you would like to so that one is just specific for for the fluent ui.

F

I'm also working on the human generator for and teams a clean team site in as well and down here are the links for the for for the source code for the au, fluent ui and some demo examples on that too. I will have a short look at that later, so a brief introduction to real lights.

F

My background is like, since I said, developing sharepoint solution from 2003, so it's been asp.net forms, developer um and c-sharp developer and have been lately been forced into building uh like sba, spa solutions and and client-side stuff, and I find really really easy to learn with that kind of background. It's very easy to to.

F

If you have c sharp mvc a speed that asp.net forms knowledge, um great performance, extensive ecosystem, so there's a lot of tools, there's plugins for for chrome and there's a lot of plugins on npm and gulp tasks, and and so on lots of cli tools for really as well.

F

um You can use all the testing tools that you know like um jest and karma and and whatever you like, um it has a very I, I think, easy to use reactive binding. We will have a look on specifically how that works. uh It's very easy to create your own extensions as well.

F

So if there's, if you find any any part of the framework that you think lacks some functionality, it's very easy to extend and they the team that built the framework, have put a lot of effort in that working out proper convention. So you don't have to put a lot of boilerplate code to get it to work. It just mostly works without any boilerplate code at all.

F

But if you for some reason, really want to put the boilerplate code there and and and make your own configuration, you can do that as well and, as I said earlier, the aurelia version 2 is just around the corner, so I will update all the the tooling I have made for the next generation of really as soon as it arrives.

F

So first just look at some some binding code, so these are some html elements and within real it's quite easy. You just put the the dot notation after the html attribute. You would like to bind so in this case for the input element. We have the value attribute and we want to bind that to the first name: proper property on our review model. So it's just easier. We enter a dot bind and the real framework will automatically make, in this case two-way binding, because it's an input element.

F

So if you use the dot bind notation, it will select the most proper binding, depending on which kind of element you are binding on. If it's a span tag, for example, then there's no point of having a two-way binding, because the user cannot enter any data, but the input element the user can enter data. So then two-way binding works. If you want to be specific, you can be that as well. So you can say I want to bind the value and we have two-way binding to last name and last name and first name here.

F

Those are properties. On my view model. We will have a look at that later and you can also bind one way either from view or to the view and regarding events, it works the same way so in in this case we have the click event on the button on the html button, so either we can use the the delegate binding or the trigger binding and the difference between I mean they are more or less exactly the same.

F

The only difference is that when you're using the delegate binding you, you get the event sitting very high up in the in the dom model. So if you have a four each which are iterating like 100 buttons, then the delegate binding will only create one function that gets routed to. If you have a dot trigger binding, then you get like repeated functions, so this is more efficient way of doing it. So in this case we are binding to the blur event.

F

So as if you know your html- and you know your html attributes, it's very easy to just start using uh really and binding from your view model directly to it, and then, um apart from the attributes, that's that's in in normal html. You can also use attributes that it's part of the aurelia framework, so they have added an if attribute, and you combine that as well. So in this case, it's if bind show message. So if this property on the view model is true, uh then this div will be displayed.

F

Otherwise, like else this div element will be displayed, um so it's a quite easy and powerful way to to hide and remove stuff from from your dom and it actually it's not just hiding it's actually removing. So if you, if you open the developer, toolbar and and look for the elements, you will either have this element or the element below here, you either have this element or the element below here, and you can also import resources. You need for your template.

F

So, in this case, we are importing the this css file, which is part of the project, and that means that aurelia will um load the css for us and attach it to the dom. So that's one way of do it. You can also, since we are building stuff in spfx, we could. We could use the the like the existing way of using the modules in spfx as well.

F

I will show you that later, when we're looking at the code, but this is a traditional way from aurelia to to load css styles into the to the html, there's also a repeat, 4 attribute, and it's quite easy as well. So if you on the view model, have an array of friends in this case the the friends array is strings.

F

It repeats for each prince. We get a a friend, and that means that we will get a p tag and that will bind the the friend string out here. So if you have arrays of objects or strings or numbers, you can use the repeat for to display with them. So, in a typical example would be use pnp, ges to call sharepoint to get a list of documents or or a list of lists and then repeat for the response to display your your items.

F

If we look to to the view model instead that we have it's quite and that's the point, we will realize it's, you don't see any specific, really a code around uh you're, not inheriting from a base class or anything, it's just a normal uh javascript or a typescript clause. So we export the class hello and uh we put a property on it like first name last name, and we put all the methods on on the class as well, and um then we can just we have a corresponding.

F

So if you call this file hello, dot ts like for a typescript file, we have a corresponding hello.html file, which is the view. So we have the view and the view model and the relay will find them automatically for us. So we don't have to tell aurelia that the view the view for this component is hello, html it just finds. It knows that it should look for a file called hello.html and then it's quite easy to create your custom elements.

F

So in this case we are, we have a class uh called export class app and we have added the attribute bindable, and that means that when really exposed this component to the other components, this first name and last name is bindable, and you see an example on this below here in the app element. So the first name. We bind that to something on that view model and last name is bound to something called my last name on that view model.

F

So it's very easy to package your your functionality and your views into components and then reuse them um and, as you see we are using the convention is that uh if you use this casing first with a capital n, then it should use uh like um small uh letters only in html, because that's the this, the standard of html uh suggests you should use a small name, so it used the dash in instead. uh I think they call it kebab casing or something like that. So part of of aurelia is also dependence injection.

F

So you can inject, you have aurelia can automatically inject objects into your classes. So in this case we import an http client from the aurelia framework. It could also be the the fetch client from spfx or something similar, and in this case we use the autoinject attribute. That means that real framework will look at the constructor and see what what what objects are required to construct this clause and then it will instantiate those objects for us automatically.

F

There's another attribute you could put here. Instead, that just say inject and then just repeatedly say which, which types you want to inject into the constructor.

F

So this is a common way we do to to get to the services. So if we build a web part and the web part have uh one or more services that are talking to the backend layer, we most commonly inject the services into the components. So we have a common service that talks to the back end and there's lots of more so we don't. I don't think really.

F

We have the time to go through everything, but there's a compose element that lets you dynamically bind the what's part of also, so the inner element of the compose will be what this view model is, so we could have uh the view model can point to to any kind of of the um component, and so, if we programmatically change the value of the view model that will change the what's rendered inside the compose element. So you could consider this as some kind of of routing mechanism.

F

And we usually use that to sometimes if we build a wizard or a guide or something, and we want to switch from step one to step two to step three.

F

We have the view model point to the different steps and you also have a router as well, so you can have several routers on the same page if you would like and but now it's time to to show some code, I think so, let's move to uh command prompt and if we just start the human generator um and we choose the spfx generator and we can use, we can use trampoline online, sharpen 2019.

F

We actually are running spfx really on sharepoint when 2016 as well. So if anyone has customers and have problems with that, they can just try to ping me on twitter or something, and I will help you out on how to to get that running and it's so easy. The first choice is aurelia, so just choose that you can add anything you like here, um I think jquery is. You will probably not need jquery since you're in inside aurelia, but I usually take the highest version of typescript skip that skip.

F

That and call it pmp2 current folder. So this is just a common scaffolding of the of the project.

F

I will just select all the defaults and the web part hello world description, and then it starts npm install and it takes a few minutes, as you know, so I will do as everybody hopefully expects me to do I've already pre-baked. That um start. We start this one and we wrap it up from here.

F

Let's go to the terminal and.

F

Let's open a windows, one sorry gulp, sorry.

F

So, while that is starting up, we can see.

F

F

Now did I really select the door? Oh yeah, there you have it and so it's uh it looks like any other normal web parts you have. So this is the the similar component and you, as you see, we have the the message here is part of the view model. So if I save that it reloads- and we will get the exclamation mark on on that one- and if you give me us 10 seconds, I will move to to the next uh uh to the next.

F

So I can just bring the fluent ui into it as well.

F

So discord check out so I built this. uh The fluent ui is a wrapper on top of all the components that are a part of the normal flow in ui, so you there's a real components for all of them and there's uh all the components that are in here are um there's a github repository, so you can look at the code there what it looks like, and so, if I use it in here, you see there's a here we're using the panel and one of the pickers in here.

F

So it's quite easy to get sorted with really and using the fluent ui from within the spfx components.

F

So that was a short and quick uh wrap-up and a quick summary of the real framework tooling.

A

Awesome thanks so much very, very cool to see so our final demo is perry who hopefully has regained connections. It looks like he's on the call perry if you want to go ahead and take over the presentation.

G

Yep sure give me one second here all right, so um this spfx is for feedback. I'm sure you probably have had situations where you had a site page or article it's in somewhere in your tenant, and you just wanted to probably gather feedback from your users or something on the home page or whatever. So um this is pretty much what this is for. um It's an application that supports feedback through a web part that can be used directly on a sharepoint um site, page or home page or pretty much anywhere.

G

um This can be added um to basically what I just said and the cool thing about this is: um it gives you the option to categorize these feedback and I'll show a quick demo to kind of make that uh make more sense and it sends an email to the users inside of the feedback owners, so that will most likely be your admin group or you know something like that, and basically they receive an email and then the user, who sends an email also receives an email just basically lets them know that hey we're gonna get back at you and um in future updates, I'm hoping to add, probably like a feedback archive.

G

So we save all of these things inside of the list, so just to get to it real fast, because I know we don't have too much time. I created a page, a regular site page and, as you can see, I added this is a vertical um two sections.

G

I just did that on purpose, because you could basically add it anywhere right. So I can add it here if I needed to- or if I wanted to- and it's literally just a button and upon click of the button you get um I've integrated um microsoft fabric ui's pieces so that I don't have to build stuff from scratch, like hugo mentioned earlier. So I'll show the code real briefly and you can get an idea of how I handle those kind of things.

G

So it's just a as I mentioned, pretty much a simple button and I'm gonna edit it and what you can do is um the properties are basically what the button should say. um So, let me just say: pmp feedback and categories. As I mentioned categorizing these um feedback articles, I mean sorry, article feedbacks or coming from home page or whatever. This basically means, for example, if I'm reading a news article- and I have this feedback a button on there. This is a use case and I see a typo.

G

I can just select the typo and this option for the properties, however, is the default because I'm the admin. So I'm setting up the word part. So I'm going to set that as general and then, when we add I'll, show you um what it would look like on the client side or the user's user's end.

G

So, um as you can see the property text saved in here so now, if I wanted to actually submit feedback to this, the default is set to general, because that's what I set it to and I think it's more than eight characters hello. This is the pmp call.

G

So here we have my categories so, for example, if I found a typo on here, I can leave some feedback to. Let them know hey, there's a typo on this page blah blah blah. If this is an article audit, this I can't find something basically just create whatever feedback. Whatever categories you want, so that this is included inside of the email, so it's easier for whoever sorting things things out to be able to kind of you know maneuver around quicker, so I'm going to submit this and I'm currently logged in as po.

G

um This is po bear, and this is my dev tenant and I have another login down here. I'm about to pull up. This is chris, who is an admin who is actually inside of my article feedback on this group, so this is chris and perry inside of this group. Clearly, pole bear is not in there, so um we're going to assume palm bear is just a user, and this is the email I just received 10 54., so hello, this is a pnp call.

G

This is a category that we selected, and this is the email it came from, and this is where the article can be found. So when I click that opens in the new tab takes me directly to the article, however, on pole bears and in his email he also receives one at 10 55.

G

That basically says the feedback you provided on pnp call, basically the name of the article or, if it's some, if it's on the home page, it will just let let you know that on the home page has been successfully submitted, and this is the text that you included, and this is the article. So this is basically for reference. Let them know hey we're going to get back at you type of thing.

G

So um it's really a simple um web part like I mentioned, and I use a bunch of fabric ui elements which helped and eased out the process a lot. For example. This is the dialogue mode and uh moto, and that helped kind of you know make things a little more convenient. So I'm just going to delve in here real fast about four minutes, so um I'm gonna start from the top and I'm just gonna start a render.

G

So when it's rendered I'm passing a bunch of stuff, sorry I don't have a cool highlighter like hugo, but um so basically the current user. The list item- and these are all the items that I need in the container- to populate the email and whatever is needed in the service layer to make my api calls. So I'm going to just go right inside of the container. This is where the the bulk of the work is. Like I mentioned. uh This is a dialogue model from the ui fabric.

G

These are the actual ui fabric elements I'm using. So I'm using a button, I'm using a panel, I'm also using the dialog. So we come in here and then I create uh empty array to save my options and this options has already been pre-defined.

G

So if you have this react sample, you would have access to all of this, and my keys is pretty much as simple as what the text is supposed to be. So you can add more to kind of you know: customize it for your organization's needs or you can take stuff out or just keep one. How you do you need at least one in there for this to work um else is gonna, throw a bunch of errors, so this entire block is just to support.

G

Ie11 that find javascript was not working so that entire block to here was to support that, and in here I um kind of initialize my variables and set my use states basically empty arrays. These are this. Is the page title right here so, as you can see right here, let you know what article you're working on. So that's what that use data is for set the text and then the category value and use effect down here doesn't have any dependencies.

G

So whenever it re-renders it's going to run these, um and this is on my feedback service layer. Basically, my api calls this first. One is to get that title. I just showed you and then just get article information is to get the rest of the stuff.

G

Like the list item, the list item the uh the person who sent it and stuff like that, just the rest of the things that doesn't come with a title I could have put both in one call, but I just wanted to separate it out to make things a little more clear. So this is the render just a bunch of models from ui um fabric ui. Like I mentioned earlier- and this is my service layer. This is where basically, all the magic and all the work happens. This is all my api calls.

G

This is get title which is oh um um um called upon, render every time, because it's in my use effect without any dependencies, and this is also called upon um every re-render. So um I have my main.

G

My main method is the send email to owner group. This basically does all the work gets. The uh actually I'm using um um pmpjs.

G

Yup to get a bunch of stuff, for example the um group that feedback owners, so I'm getting it's hardcoded, so you, if you change the name it's in the readme, basically what the name should be. So if the name is changed, it has to be changed in the code and that's one of the biggest caveats that you you might want to be looking out for. I set my variables and then um basically yet all of the users.

G

Inside of the group, I get the email for all the users inside of the feedback owners group and then populate it get all the information that I need from my rest call, and then I send the email out and this method on the top of this is the email that gets sent to the user. It's a much shorter one, so it just basically lets them know: hey we've received your email and this this we're gonna get back at you. You can customize the text in here.

G

um Do whatever um that suits your needs and that's pretty much it and thank you for watching.

A

Very cool stuff perry. Thank you very much. That is a great demo of some commonly requested functionality and very nicely done so another great reference for everybody out there in the community. I have this weird calendar. Invite there is a pnp ask me anything immediately after this call so encourage everybody to join us there. Thank you to hugo magnus and perry for the demos today really outstanding stuff, as always from the community.

A

Thank you to everybody. For joining today, the recording will be available in 24 hours on our youtube channel. Follow us on twitter, microsoft, 365, dev, m365 pnp. Our next spfx call is going to be february 25th at the same time, 7 a.m. Pacific and our next m365, general dev call will be february. 18Th, that's next thursday. At 7 a.m. Pacific uh you can get all the links to our community calls aka dot, ms m365 pnp. So thank you all very much for joining here's.

A

A whole list of other community calls if you're interested uh check out one or all of these and all pretty sure all of these post their recordings afterwards. So, even if you can't make it, you can definitely check out all the great content happening across all these communities. Thank you. Everybody for joining us today. Thank you for being a part of the community and look forward to talking soon have a great day. Bye.

C

A