Microsoft 365 Community SharePoint, 1 Jun 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using reusable IFramePanel control in your SPFx solutions

Description

In this 7-minute developer-focused demo, Valeras Narbutas shows in his simple sample how to implement the richly capable React SPFx IFramePanel control in a SharePoint Framework web part. Observe very little coding required. Various out-of-box capabilities of the control shown in web part. Also conveyed in this sample was how the presenter happened to create the sample. He identified a “Good First Issue” in the SPFx issues list. Learned about capability, delivered solution + demo!

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 1, 2023.

Demo Presenter
• Valeras Narbutas (Macaw) | @ValerasNarbutas

Supporting materials
• Sample – IFramePanel Control in SPFx Web Part | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-spfx-control-iframepanel
• Sample - IFramePanel sample | https://adoption.microsoft.com/en-us/sample-solution-gallery/sample/react-spfx-control-iframepanel/
• Issue with web part or sample - SPFx Issues list | https://github.com/pnp/sp-dev-fx-webparts/issues

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

B

So, as I mentioned in the chat, Adrenaline Rush, not usually speaking, to a big crowd of the specialists, so it's me I'm valeras, I'm software developer, working at MaComb, currently based in Vilnius in Lithuania.

B

Looking at my hashtags, basically I try to cover what my hobbies is: our expertise and I'm, basically building things with SharePoint from SharePoint second version 2003, so I'm, one of those that still remember how it looked and um well micro redemptions, are on the bottom and uh most of the my career. I was also infrastructure engineer. So that's related to to my example.

B

Actually why I'm, you know was a bit surprised to learn something new, so I will share it with you guys so how it started for me: uh I, usually not the one who is very good in ideas and always envy people to submitting samples in in in those repos I, usually just get one and upgrade it's easier for me than to think on our idea. But someone asked for their help in issues and it was like.

B

Can you help me just use spfx controller iframe panel, which was not working so I thought? Why not and started working on that one, and it was for me as a developer. Of course, it was not very complicated and I won't be sharing much of the code, because there is none, but the result was pretty nice. I will I'm I'm already using that quite extensively. So this is a second part. This is how a description of implementation looks like in spfx Dev controls that is shared, and you can see it's not much of a code.

B

It's just one component with some properties which I used in the code, and this is my code as you can see. It's uh those components that were as primary button and iframe panel, basically doing all the magic and what is what magic is about. So what I didn't know when you use iframe like this with this control, you could use that to display list item uh with all the actual. All the controls on the top in the panel in the right side in SharePoint. Same can be used for the list.

B

Same can be used for the preview of a document, even edit document, and either try powerapps works as well, so Now demo time how it does it. Look.

B

It's a bit uglier, sorry about that. But let's check what is the setup of that part? For me, it's very very simple one. Just one URL you want to open with this button right so and I posted just list edit form, for example, and I was really surprised that you can get all the actions here without any hassle out of the box, and it was really nice. I can also think a lot of solutions that you can use it, for example.

B

Well, when we are talking about search extensibilities and the content, query the part, for example, all those results that you you use handlebars, you can use that for the document preview or edit item from the result from the search result, which is neat. Sometimes people need that so check this out list preview, wow document preview: this is just opening document and you can edit it saving again with all the ribbon. Pretty nice list view with all that.

A

Sorry yeah: can you zoom a bit to assume such there's too much white space on the screen? Excellent! Brilliant! Sorry! For that sorry, for that.

B

So yeah and okay so and last one is powerapps. Just adding powerapps link also Works quite nicely.

B

So this is well success story for me because well, one I I got a new sample and whenever I learned new things that from those controls which I know they exist, but none of those I tried extensively or just some of those and iframe panel is one of the things I discovered and really wanted to share and that's basically, it.

A

That's fantastic, thank you, and uh for for those of you who are wondering hey, you know, I, don't I I want to contribute to the community. I just don't know where to get started. This is a great example of valera's. uh Looking at the issues list in the PMP samples gallery and then looking for uh sometimes you'll see items marked as Help Wanted.

A

As you can see this one here, uh you can actually volunteer anything that says help wanted is, is open for contributions, and the other thing too, is we'll often Mark things that are a bit simpler to get started as a good first issue, and that's what you see the the purple one there good first issue. So, if you're looking for inspiration, that's a great place to do and valeris. Thank you for your for your demo. Again. Everyone please put your hints together for valerz.

A

It was his first presentation and I hope we can see many more from valeras in the future.