Microsoft 365 Community Community Demos, 12 Mar 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a custom SharePoint Framework Twitter web part

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on March 12, 2020

For this 8-minute demo, Alex Terentiev shares a customizable React Twitter web part you can add to your page to display tweets on a timeline. It leverages available React components and PnP controls. There are many, many options in the Property pane for this control. While there is an out-of-the-box Twitter web part today, it is not as configurable as this PnP web part.

Presenter: Alex Terentiev (SharePointalist) | @alexaterentiev

Supporting materials:
• React Twitter Embed Component | https://npmjs.com/package/react-twitter-embed
• Request help making react Twitter Feed component #461 | https://github.com/SharePoint/sp-dev-fx-controls-react/issues/461

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

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

A

First I will show the part itself, so we are I, am doing the demo regarding the react. Twitter web part that you can add to your page. So let me edit here so basically, when you see it, it's PNP react control. That shows you that the web part is not configured. So, let's configure it. There are multiple options. What you can see in your web part? What timeline you can see in your web part is it profile likes some list or collection of just one URL so for trial.

A

That mean my profile apply, and you can see all my tweets in here in the web part. Let's change it to be, for example, list and I know that David has I believe hockey list. It should be there apply, and at that case you will see the list from David Warner, with all the updates that he is collecting around the hockey. You can also change some UI stuff like it can be dark team. You can hide the headers.

A

You can have some border color course you like and, as you can see again and using some TM key controls in here, apply. So it's dark theme no borders for some fruit well, okay, anyway, so this is kind of it right. So smaller part that just allows you to display tweets. So basically, the code for part is pretty simple, because I was using the available.

A

Npm package called react with Twitter embed and it contains basically all the functionality we need to display tweets as a react component, so it also has great documentation with the all the like how to install how to use how to edit timeline tweets and so on so forth or basically, it describes all the properties that are available in this control and, of course, it's MIT license.

A

So you can use it free of charge and in the code, basically, what I've done in the web part I have kind of proxy of this reactivate or embed control, so I have all the properties for this control as a separate interface as a separate instance in my model in the web part itself, we have huge huge property pane configuration where, basically just getting all these properties user can configure all the stuff you just saw on on the screen and the component itself from the web part, basically just getting all these properties and cause the street or timeline embed component from this NPM package.

A

So, as you can see for the controller itself, just like 55 lines of code- and it's just because I like to put every property on separate line, otherwise it would be like three four lines of code right, good. Think of this implementation of this webpart implementation. So it's it's kind of this sample started because there was a question in EMP, reusable controls Lipa. If there is some control to display the twitter- and I decided to make this demo.

A

But if there is real demand on this functionality, we can actually move this control directly to be interior repo as well, and that's probably it it's really small small demo, because not a lot of code. But as you can see, it's really easy to use. The existing NPM packages exist in NPM modules inside as perfect solutions as well.

A

B

Alex, don't don't stop yep, let's I will take few minutes of extra time. So, first of all and like I said, this is a really really great example on using an existing NPM package, I'm just wrapping that as a wet bar you don't see. It is actually quite easy to do and, like I said your property Bain is much more complicated. Can we go back on the on the the wet part and the experience, because just making sure that everybody understands and the property Bain configuration and all of the different options?

B

Yes, one thing and there's quite a lot of different options and how did.

A

You make all of those things.

B

Actually happen so you're using property, paying controls from B&B right right partially partially. Yes, some.

A

B

Are just out of the box control some of those are then more complex, and then you basically are taking these properties and feeding them in the the end package, which is available from NPM. Why did you? Why did you create the web part? What was the there was a question, good question on to chat, hey, there's another box, tweeter red part? Why would you want.

A

So, as I said, there is a there was a question in PNP: reusable controls, repo. If there is a custom control that allows you to display Twitter timeline, yeah.

B

A

To showcase how easily we can create this custom control, I decided to create this sample with web part that actually inside contains a control to be used in your custom solutions. If you want to okay.

B

Yeah makes makes perfect sense, plus the fact that our two box, Twitter wit, part, isn't necessarily as flexible from a configuration perspective. To be honest, I can't remember what other options and out-of-the-box web person I can really compare, but still yeah, so quite simple, stuff. Now, what's interesting related on the on the, how did you find the to react? Twitter embed in big packets, just out of curiosity, because I wanna actually encourage people to think about this options.

B

There's also also stuff in the reacts based implementations and any of those components can be actually exposed, also as a report right so and or as part of your bit part. So it's really really powerful to find those things. But what would be Alex your recommendation on finding what's available secret.

A

Well, I I, don't have a secret, but to be honest, I think that one of like good stuff for any developer is ability to Google right and to me go correctly. So basically what I've done first, my idea, when I saw this comment, this discussion in PNP controls repo just to Google and see if there are any react. Twitter controls on the web and basically I saw maybe like three four different implementations, and this one was really what I was looking for, because it has like a lot of different properties and its react by itself.

A

So it's really easy to use in s perfect, yep.

B

Absolutely absolutely makes sense and I really encourage people to have a look on what kind of react components are available rather than always implementing from scratch, and also double check. Also the license in the case of Alex. It was using MIT license, which means that you can freely use that so, but it's really important to understand what the components do as well, but I think that's it.