Microsoft 365 Community Viva Connections & SharePoint Framework, 12 Sep 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint PnP - SPFx and JavaScript community call - 12th of September 2019

Description

Recording of SPFx and JavaScript development in SharePoint Community Call from 12th of September. Topics include updates from SharePoint engineering on SPFx, latest on PnP JS Core, Office 365 CLI, Reusable SPFx controls and PnP SPFx Yeoman extension.

Detailed covered content from SharePoint Dev Blog at http://aka.ms/spdev-blog.

- Demo - Franck Cornu (aequos) – @FranckCornu
- Building modern search center using open-source search solution

- Demo - João Mendes (CREATE IT) – @joaojmendes - React based Carousel web part

More details on SharePoint Framework library components is available from https://docs.microsoft.com/en-us/shar...

You can download an invite to this bi-weekly call from https://aka.ms/spdev-spfx-call.

You can find more details around the open-source and community work from http://aka.ms/sppnp

A

Welcome everybody welcome to the SharePoint framework in JavaScript special interest group I'm, Paula Pelosi and today I will be your host because visa is on vacation and so I'm trying to replace him. So, let's start having a look at the agenda for today, we will have a look at the status update for all of the community project that we have in the area of SharePoint framework and class a development, and then we will have two demos, one from Frank corner from a coos and one from Joelle Mendez from create IT.

A

So let's dig first of all into the updates from engineering and from the community projects and let's have a look at the demos right after so just as a reminder, we want to remember you that from an SPF X perspective, every every sample of webpart application, customizer or provisioning solution will be more than welcome so feel free to contribute with demos in these calls, as well as with pull requests submitting your examples, which can become also demos in these calls.

A

Moreover, we have the at PMP demos, which will cover a topic related to PMP. Jes of it is Phi CLI and SPF X reusable controls and feel free to contribute there as well as well as as I said, you can feel free to contribute to the community.

A

Making pull request in the gita propose that we have as well as reporting any kind of issues using the issue that we have on geeta by will show you really shortly be URL to do that, as well as, if you like, just at a discussion or share your ideas with the whole community using the github repo, and these calls, and of course, if you want to provide any kind of feedback, feel free to do that.

A

We are really looking forward to constructive feedback, so feedback about something which is not working properly, but also feedbacks about something which is okay, which is good and that you, like so as I, said few useful links for your daily job as PDF Docs, where you can find in a km dot. Ms, a speed up, Docs all the official documentation about sharepoint development. Moreover, we have a speed up videos, the AKMs speed up videos link which you can use to browse through.

A

Quite a lot of videos that we recorded made available in the TMP community channel, as well as the sharepoint of issues which you can find at AKA dot. Ms s, pd f dash issues where you are more than welcome to provide your feedback, your requests and everything else is needed to improve both the community projects, as well as the sharepoint framework by itself, because engineering is looking at these issues lista.

A

So if you have any issue, any problem feel free to submit an item there and either the product group or the community will try to give you the best support ever okay. So, first of all few quick news about what's going on in the SharePoint framework area and then some other news about the community projects that we run as PMP. First news: there is a a new release of the SharePoint framework development training package, which was released early September this year.

A

So if you go to a K dot, MSSP FX training there, you can find slide demos and everything you need to provide a whole training about SPF X, to your colleagues or to your customers. You don't need to subscribe or sign any license, or anything else just feel free to download the content, use it and spread the knowledge about SharePoint framework in your company and at your customer size.

A

It's one of the you just have four that we have from a training perspective in the fields of sharpen framework, and we are really happy to see that there is an update. We just came out, moreover, from a staff perspective, the sharpen framework, I, would say as usual. Luckily, but it's performing really really well.

A

In fact, we have a growth in the usage per user as well as in the users per tenant, as usual as I said, because almost every bi-weekly call we see that the numbers of SharePoint framework are growing, which is really good, because it means that everybody here is investing its own time in the in the right technology, and we also saw quite a huge growth in the last few days and weeks, which is a really good sign.

A

Thinking about the future of SPF X from a roadmap perspective, that's what we can share so far and as usual, these are information which are subject to change, so they are not written in stone, so be careful. But right now we have sharpen framework.

A

One point, nine point, one which came out in August and it is GA now as such, but we are also waiting for SharePoint framework 1.10, which maybe will come out in September this year, which will have few more improvements, including one of my favorite features in the fields of the modern UI, from an SP FX perspective, which is the full support for the list subscriptions, because now the underline api's are generally available and so SharePoint framework will follow them and will make this functionality available in production as well.

A

Moreover, there are some other topics bubbling and under the under development like, for example, the capability to use SharePoint framework to create not only solutions for SharePoint Online, but also for building of his audience as well as there will be content security policies.

A

We as PMP and Microsoft is working on making it possible to have season for the high standard and such PMP site score and the PNP provisioning engine for dotnet standards that we will be able to use a season and PMP from.net core as well, which will be a huge improvement as soon as it will be available. And, moreover, there will be much more improvements in the area of modern PG supports, including some new content extensions for modern pages.

A

There is also some work going on in the area of the app catalog and the deployment area, and there is some work in rebuilding or upgrading the look book templates, both from a design perspective, as well as from a provisioning service perspective and, moreover, the provisioning service in the near future will have a renewed UI, which you will be able to use to automate the provisioning of the lookbook templates and of other packages like, for example, the HP starter kit. On to your own environments.

A

Our SPF X initiative is really, and the PMP initiative is really working well and moving on, which is really good. What about p.m. PJs and the client side, library for SharePoint framework, and not only for shopping framework? Well PMP GSA is growing as well.

A

We had a new release in August 16 with some fixes and some new features, and there is a continuous working on the version 2 of the PMP jes library and for sure we need to be really thankful with the community and especially with Julie, Simon David and all the other people which are ugly contributing to this project. You can find more information at HTTP, P and P, get up dot, iu, / p.m.

A

PJ, yes, and you can eventually tweet about or read about tweets related to the PM PJ, yes, library searching for the hashtag TM PJs or following Patrick at at majora bowler in Twitter. What about officer his face? Eli well from an office to face Feli perspective. Here we have some other users, while so version 2.0 is out. There was an announcement also yesterday on the office, dev cow. We are now in the beta laser version. Two point: one point: zero for the office chrisfite CLI, which includes as usual, much more improvement and functionalities.

A

Like, for example, the capability to remove my cutting channels, the capability to retreat the URL of the content-type hub, if anybody is still using that one I would say, and to create powerup components and stuff like that. So if you want to use it or to give an eye to it and p.m. install G to install it globally at PMP, slash office365 CLI at next to get the beta version of hysteresis here office, 365 CLI.

A

If you just want to use the current version, you can just get the at next and get the latest release from there.

A

Spf X from an SPF X perspective, a PMP has been working on the reusable components for a while now and we are already improving and always improving the reusable SPF X controls. Now we have a version 1.15 point 0, which is out nowadays and which includes some new controls like, for example, a file picker a grid layout and the carousel control.

A

And, as you can see here, we again need to say a huge thank you to all the contributors which contributed to these latest release of the reusable controls, Hugo Robert period Alex and one guy who has an Eden name so PFC 2k8, which is clearly not a real name, but a Gita alias. You can find much more information at the following links and please take a look at the reusable controls because they really improve the quality of your life as a developer from a community.

A

Yeoman generator perspective, the project which was started by stephan and which is now supported with the contribution of the whole community, and we have some news there as well. We have the version 1.9 point 1 released so that we are aligned with the latest release of SharePoint framework and there we have the capability to upgrade to 1.91 solutions.

A

We have support for angular v, six, seven and eight and of course, some other capabilities which are included in the list that you can see here, like support for view for visual fabric, five point x, 6 or six points, X fluent and so on so forth. Again, if you want to give an eye to this solution and to this package, just do NPM install that G at PMP is like generator SP effects and change the way you generate your and you scaffold your SharePoint frame or solutions, improving it, of course.

A

So, let's say des after this a quick overview of all of the news that came out in the last 15 days, it's time to spend some time having a look at some great demos. So the very first one is from Frank corner from echoes, and it's about building modern search center using the open source source solution, franca feel free to still II mean ok,.

B

So my name is Franco I'm an office 365 developer working for my own company, based in Montreal Canada and today, I will show you the latest update for the modern solution since the August release, which one a big release actually so I will cover and I will not cover the entire solution, but on media, the updates, a quick recap of what is this solutions set of web parts around open search, mainly to fill the gap between the modern search experience and what we had in the classic shopping search experience regarding the source web parts.

B

So, basically you have searched without web parts search box refinance and so on. So first of all for non developers, you can get the latest release from the github repository s/pdif solution, so don't know the package and can install in your app catalog so and if you want to contribute, you can just fork and make PR in this repository.

B

So let's start with the video date, so I have set up as such page here and so the updates. The first updates we've made. All the updates are mainly in the search result webparts. So the first update we made more practical updates instead of before you have to select your selected properties from the search manually, so you have to type the search properties, the manage properties. Now you have a predefined list of manage property. You can select your own manage properties, so not every properties are listed here.

B

So in the case you use for Excel, for example, addresses for manage property. You can just type job properly. For instance, I I think I have a properly named PNP.

B

Something like this. So I can add it to the list, and it will be something.

B

So you can add your own manage property in this list, so more practical update than real big updates. The big updates are mainly around the templating completing layouts, so it basically it all started with a github issue around the templating mechanism for the STIs webparts. Maybe you know this webpart is easily built on handlebars, which is a template in framework javascript operating framework.

B

So the main issue was with end about and the bus is cool, but it became difficult to get the same experience as the official fabrics native components only with handlebars you, you have either to customize your CSS classes inside your template, for instance, to write your own classes, emulates the officio fabric styles, which can be very difficult or you have to use another feature, which is the code renderer, so completely rewrites the experiment using pure react component.

B

So it was a major issue, I think, because, because of this misbehavior CSS and the react components so in this videos, I think we found the middle ground between underbar templates and react components so before digging into the code, and we did it with just go through the all the the new layouts we added to the this web part. So the first one I think it's the coolest one is the detail list, so the detail is basically all it did.

B

Is the office UI fabric detail is that you can see in when you browse the components and the office try fabric website, and basically it allows you to view your data user data in the table of view.

B

But the thing is, you have now some template options, so we've added some option in this view, for instance, you can can choose to display the econ or not to run the compact, your table, compact mode and so on, but the big update on this one is the current builder, so the Colin Miller we allow you to create your own color, obviously and configure the behavior of your columns. So, for instance, we chose a column display name the column value. The current value is basically a manage property.

B

You can use, so you can use the raw value of the manage property. For instance, here I used title I have some other options: the width of the color, the eight little typo, here's some options, it is suitable, resizable, North, aligned and so on. So I can choose, for instance, yeah, basically to customize my experience and I'm add my own column. So let's say I want to add my column, a little I've added before.

B

Because to do this, I think ya, know multi-line and so on so I can add by on colon on the fly. So I can build my my experience to meet my requirements, but, as you can see here, I took an example with a row. Value of the search results, as you can see, is the last modified column, the last 25 property. As you can see, the output is not really nice.

B

It is the row value so I, not very, very nice. So the thing we can do now is instead of use the raw value of the manage property. We can use an underbar expression. So, let's, let's say I want to update this column. Value I want here and I can pass nan de loire expression here. So all the handle bar elders are available here. So this last.

B

The format here and yeah, yeah, yeah and I can do something like this, so it alls you basically to format the it puts the way you want and not only the value, but also you can add, also conditions and so on. Another example, let's say I want to change the background regarding the severity. The value of the this column. I can do something like this. So just grab my god. You here.

B

Iego I can do something like this, so just show you the code to see it to see the fast, so I can add condition, even in my Style section and so on so k, I can actually I can use every field from my item. Context and I can make I can write conditions and so on and I can play with stars and so on. You have the control over the column cells, so you can pretty much do everything so for the column border. This is the the big updates for the layout.

B

So, as you can see, you can do pretty much what you want in there. The next layout we've implemented is the tile layout. So before tiles there was a tile layout, but the ties were was made with custom CSS, not the best experience to look like the the office UI fabric theme.

C

B

Same same Principia, so we added tile layout, so you can configure in the same way your card placeholder. So you have the title, tag, preview, image and so on and, as you can see, you can also inject some handle bar X questions. The difference between the cows layout and detail is in is here. You can't add some HTML markup, because I didn't show you that we just go back to the data list. I can do something like this.

B

You can also inject some HTML markup here up so let's say: I want to make this no but string, but strong, yeah, yeah yeah I can do something like this, so the dhtml macro is allowed inside a column cells. But if I switch to the tile layout and I want to do the same thing for CAD placeholders, you cannot inject your own HTML because beyond the since the react, control and we can't add HTML. So if you do something this, only the raw value of your expression will be will be displayed.

B

So I can use the helper standard or zappers no problem here. But if I do something like this, the value will be interpreted as this. So, as you can see here, so you can't inject your own HTML except those two fields where the LOA hTML is checked so in these special fields. So the location correspond to this field and tags is yeah. We already this placeholder, because sometimes you have to display some custom information, for instance, taxonomy, tags and and so on. So this is the purpose of this of this field.

B

So you in this field, you can add your own HTML, like you, like you see here, you can use this markup I will talk about this later. The term that follow this is the experience for the photo cal, layouts yep, so the few options, few other options and the cards the result free view. So if I click here when I go to the tide and I want to click on the the image, I will have the preview automatically, so it works for documents it and it works also for videos, so oops videos, yeah.

B

So let's say I want to display videos. I will also the preview displayed.

B

I go back to the option and the letter Saturn I think it is yeah the compact mode the same way as the detail is so if you want to display it for my son, it's in a smaller, smaller way. Okay, so the next one is the carousel, the slider, so the slider is basically the same I use for the pin P internet for first of this name a few years ago. The thing is, with this slider: it's compatible with touch and so on.

B

So it's a very nice later I did not make it myself in my own code, but library, but the thing is in the slider. You can use your own.

B

Let's say content in the slide content, so I will dig into this in a few seconds, but before just a couple of options here you can control the autoplay, the posin over number of elements you want to group inside slides. So, for instance, if I take one here, you know it's: okay, I can control the I want to see it. The dots and I want an even scoring and so on.

B

But the thing is, as you can see, cars are displayed here, but if I want to display anything, my own content I will have to edit this template.

B

Show you so, as you can see, you have the control inside the slide component, the capsule component. So here it is the the document card. But, let's say I want to display just an image. For instance, so one put an image: I will take the persona, personal control, we'll talk about this later, but.

B

ah Doesn't work because don't have the rights know what I we take? The image was simple: you have also the documentation of the top plating. So if you go to the SPD of solution repository, you have a template in markdown file explaining all you can see in this demo. The layout and so on. I will just grab the code. Snippet I I need to do this demo, just yep. Yes, so I go back here. So I did the contents and I only take the image.

B

Yeah, okay and as you can see the image only the image is displayed so, but I can do pretty much. What I want here and I can use the end of bars, helpers and context variables and so on. Just don't forget the special at escape character, because when you are in the slide contents, the the component contents we have to escape and all in their bare expressions to to get it work. So read the doc about this.

B

I would explain all of this now, but it's all explained in the documentation on the next layout is the people layouts. So the people? Yes yeah.

B

Waiting doesn't work, you know what I will just be add my web part and just mess up with something, but.

B

Okay, okay, so the people layout basically is all the same. We use the personal code for official fabric and, like the tile layout, you can customize the display so first option simple ocean is the size of the personal photo logic and so on and I can also manage the fields so like the tile like the cards, I can choose what to display inside the placeholders. So the image first name last name I- can use either the manage property value row value or use an underbar expression. So it works the same way.

B

So I want just a first name here. So, as you can see, you can customize and customize the display to meet your requirements. So basically it's an easy way to let say build directory webpart and something based on search.

B

So this is for the for the personal web part the letters for boys more for developers, it's the debug web part, so the day web part basically allows you to inspect what variables available available inside the underbar context. So you have obviously your items, but also all the things you can use inside your templates to the localization values.

B

Some context, value and also the rails. One we've added in the last video is the theme properties so for this one I will just show you. The usage of this I would switch back to the simplest, just remove this because I don't need people source yeah. So if I go back to my simple list layout and icd template, as you can see here, I have a special ccs class using the ten.

B

The current team value, the time that infirmary so I can use this notation to inject my own, to use it the colors and so on inside my my template, so I think I use inside the title and so on. I know yeah, that's it so it means when you something like this. As you can see, it's orange now can change the look here and, let's say hotel.

B

Here so, as you can see, you can control the yeah team, colors and so on inside your in the bottle bit. So you can write your own CSS class in and so on.

B

Okay, okay, say, thank you.

B

Basically, these are the new layouts I didn't talk about how we make them, but, as you may be, you you've seen some critical markup here. Let's say: I go to the document car. If I inspect this, as you can see, there are some specials elements, HTML elements here you have a document car with some attributes and so on. So the way we've built it is we used web components to make the link between endl bars and react, so I would switch to the code to explain you a little bit more.

B

We did this, so we are a couple of components: different ear and a company a web component. Basically, we can use custom elements markup to inject your component insider in CML page. Basically, so what we've done is just write. Some custom HTML element components. So when you work with web components, for instance inter scripts, you have to extend the HTML element, plus we've built a custom yeah custom way to pass parameters to your custom elements, HTML custom elements to react control, so we use a special notation to camelcase to pass the attributes inside.

B

We are component and basically a web component inside the solution is just a wrapper around a react component. So if I take the document card, as you can see, is very simple: I just booked my react control inside the web component, dumb node. So it's very simple and I just inject custom element attributes as react, props. So very, very simple.

B

This way, I can write. My components react component basic as usual. So no problem with this, we defined a couple of components, as you can see here. Also it means you can mix them in your templates, so you can use video cards document cards based on conditions and so on. So this is I think the best of both world to create your custom experience such experience inside inside the modern, such web parts so feel free to expect the code. We did this in films. You want to write your own web components and make PR.

B

Basically, this we we did it so I think it covers pretty much everything read the documentation. So, like I said, we made a template in mugged on fire to help you to use these new layouts I think there is also some painting issues, but honestly I don't have.

B

But anyway, if you have issues, go to these repositories to show you feedback use this solution, and let me know if you have some question I think I'm done now: follow: okay,.

A

Thank you. Thank you very much Frank. This was a really really cool demo and, let me say the modern search controls in my opinion, are a really great example of what community of force can do and also of what you can do using also the PNP reusable controls, because correct me, if I'm wrong Frank, but under the cover, you also use the period controls and properly control. So so we we are leveraging the community at multiple layers. I would say multiple levels, so really really great stuff. Thank you.

A

So let me share again my screen just for few seconds before moving to the other demo and I just want to be sure that everybody in this call has the correct link to get the modern search web part that you just showed us.

A

So you have to go to the SharePoint organization on our github SP dev solutions is less solution, slash modern search- and here you will find all the content that you just saw and as a reminder, these are the property controls or usable property controls which you can find under github, but still under github, as well as the riad controls. Sure your name about react, base, carousel webpart, feel free to steal the presentation again and have fun.

C

My name is jomi andis I'm, a second developer to create IT I will show in the commercial web part. Okay, I will see. I have here a nice site created with provisioning service with the static 8 template. Okay, the the carousel reads any image or videos that are available on the picture level. You are reading the the image from the organization. I had said library that I have define it. We can define the site, the library select library and the number of the of the picture that we want to read.

C

Ok, let's change this to another another level that I haven't another site. I have here a locker that has one folder with photos: okay, I'm trying to change the decide to the to read another another picture: library, ok and.

C

You can define here the number of it so that you you get.

C

And you see the sickle cell.

C

Mr. ma material in the debaters, if you knew past mouse over the picture, the the swipe is stop it. Okay,.

C

C

Well, here's the video.

C

Okay, how you how you build this? You go to the my my code here, yes, with the the PNP GIS library to get the the image via the API is the list? Okay, expanded in point five to get the tributes after after the the files, because I want to read all all limits that are in the in the library you not the only one folder. Okay in the comment, the component of the recover cell.

C

You get the image, and here I get the tambour nail image URL to get the largest time bernal, that is smaller than than the than the real size of the image and video here I will render the the video if the media is video and render the the image if there are a in egde okay.

C

Well, this is done of my of my part Paulo. Okay,.

A

Thank you, Joe really interesting demo as well. So thank you for your contribution and I think I think that's it from a the most perspective. So let me share my screen again just for a while thank you again, Frank and Rolfe for your demos, and we are almost done for these special interest.

A

Group I simply need to and want to remind you that the next special interest group for SP FX in JavaScript and clients that development will be September 26 and in the meantime, next week there will be the spiritual interest group for dotnet, see zoom and the provisioning engine as well as being people were Shannon flow.

A

Quite a lot of stuff in that one as well so and of course, these our marketing staff solar, using share with BMP, and if there are any question we can try to use the last I would say 10 minutes of this Cola to leverage the community power and share any question and try to have an answer from the whole community. Otherwise we can just stop here. So up to you, there is a question. I see from Jason is the Carousel code on github, I guess so y'all.

A

Can you put in the chat area the URL for your ok? Thank you that it always the faster the fastest. Actually, yes, this is the URL that we just copied it into the chat area. So yeah you can find the react carousel at this URL.

A

Any any other question or doubt or anything else, if the search webpart security trim de Frank, that for.

B

B

The color running using the user context, so yeah cool.

A

Thank you Frank anything else.

A

Where do the headlines from the carousel come from specific column in the library draw all again for you.

C

Yes, the the the the the text, the data and the text comes from the library. The other is the the title of the image and the text is the description associated to the to the image. hmm Thank.

A

You, okay anything else. Let me double check in the chat area, so there is a version, or this is just a comment if you think queues for you guys, because you did great demos, okay, so I think that's it. Thank you for attending this community call I, hope you enjoyed it and see you next week for the season and PNP PowerShell and provisioning engine call or the week after for yet another Seacole about SP, FX and JavaScript client-side development. Thank you, everybody and enjoy developing with SP effects. Thank.

B