Microsoft 365 Community Community Demos, 9 Sep 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building advanced image gallery experience with SharePoint Framework

Description

In this 10-minute developer-focused demo, Yannick Reekmans shows how his Lightbox Image Gallery web part, connects to SharePoint document/picture library, handles folders/sub-folders, has breadcrumb navigation, and lightbox-style image browsing. Works with Viva desktop in Microsoft Teams as well. Developed using SharePoint Framework (SPFx) and PnPjs. Code structure is reviewed. From property pane, select document or image library to connect. Demonstrates how with little code and using PnP components, one can deliver an elegant result! This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 9, 2021.

Demo Presenter: Yannick Reekmans (Qubix) | @YannickReekmans

Supporting materials:
• Article - SPFx Lightbox Image Gallery web part, v1.0.0 | https://blog.yannickreekmans.be/spfx-lightbox-image-gallery-web-part-v1-0-0/
• Repo - SharePoint Lightroom Image Gallery Web Part | https://github.com/YannickRe/spfx-lightbox-image-gallery
• Library - PnP/PnPjs | https://pnp.github.io/pnpjs/
• Controls - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-controls-react/
• Package - react wrapper for: lightgallery.js | https://github.com/VLZH/react-lightgallery

Learn more:
• 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

Hi folks, so I created a web port and basically I want to show this web part in this demo, but the reason why I built this is because it doesn't exist out of the box. It was a returning customer requirement. I could use it internally and because I can, because I'm a developer- and I just like to build stuff and the requirements for my web art, which is an advanced image library web part, was to connect to any sharepoint document or picture library.

A

It has to use folders to group pictures of an event it had to have support for subfolders. I wanted a breadcrumb to navigate and I wanted the image browsing to happen in lightbox style when I built this. A pleasant surprise was that it also works in the sharepoint mobile app through viva desktop in teams and that people actually loved how it looked and feel because I'm a developer- and I don't really do styling and the ease of use for this image library was a pleasant surprise as well.

A

So it was a great success to get this web art ready. So, first of all, let me demo it before we dive into some code. Oh, my editing session has ended. So let me refresh this page, make it bigger go to edit- and here I can add my web art. So it's the lightbox image gallery webpart and it uses a lot of pmp available controls, so it uses sp def uh fx react controls made available in pmp.

A

I love this pre-run experience to show off all of the to show off that the web part has not been configured yet.

A

So I go to configure my web part and the only thing that you have to configure is select the document, library or picture library in your sharepoint site collection that you want to use to render your data. I will pick fun because I have lots of fun photos available and you can see here that renders immediately all of the folders that are available in my document library.

A

Another thing I want to show off by default: it has the web or title available, and I use another control from the same react controls library in pnp to just inline edit this to get kind of the same thing as the out-of-the-box web parts. And then I will publish the page like this, so it still renders that's nice and then we can dive into all of these.

A

Folders, like every folder, like I said, contains images for a specific um event or something because I use this webpart on my intranet to show off all of the corporate events that we do. So if I dive into one you see that it quickly renders all of the thumbnails of the images inside that folder and it also lists all subfolders in that folder into on top of the images.

A

So if we go deeper, you see that the breadth group updates and we can move up or move down again, and it also lists the number of images inside the folder.

A

So you see here that it renders all the thumbnails and if you click one of the images, it opens a lightbox style gallery with all of the images which you can browse through also using the keyboard, you can go full screen, zoom in download and everything.

A

So it's from the look and feel or usability point of view, not too complex a webpart, but it has a lot of use cases on an internet or on a sharepoint site.

A

So this is about it from the demo. So let's switch back to the slides first of all, my code structure, because it's always nice to see how someone else structures his or her code. So I work with models where I put my models or my interfaces in a folder. So I've got my I data service here and my ifolder data. I've got my services, the data service and the mock data service who implement I data service on top. So my data service is the class that does everything it interacts.

A

It fetches all the data from sharepoint. First of all, fetching all of the lists in my site, collection. Second, fetching: the data of a folder in that list. Mock data service is one that I use when running my report locally and not running inside a site collection or inside sharepoint online. Then within web parts. There's my image images gallery web board itself and I tend to group all my components that I use in my web part inside the components folder in the web part.

A

If these components are used across multiple web parts, I promote them to a components: folder right under source.

A

So this is my code structure and then there are some code snippets that are might be interesting, because this web part is pretty simple in terms of code. So with simple code, you can still get a lot of value. So there's not much of code that I can show you. First of all, there's data service, it does the get lists and it uses pmp.js to select all the lists inside your sharepoint site. So I get all my lists. I get title base template root. Folder.

A

I expand the root folder because I need some properties that are on root folder and I fetch everything and then I go filter on base template, 109, which is picture library or 101, which is document library and all of those. I return and that's what's used in the property pane of my web art and then there's get folder data. So every time a folder is opened and remember, the root of a document. Library is also a folder and has a folder unique id.

A

I use the folder's unique id to fetch data from sharepoint for that specific folder, so we use that folder unique id to get the folder and get folder info.

A

We use it the folder itself to get all of these subfolders for that folder and we use the folder to get all the files from the folder and then we return that as an I folder data. So basically this tells me the name of the folder, the path of the folder and the number of images in the folder. It gives me all of these subfolders and their ids and all of the files in this specific folder. So I can render them on screen so with getsubfolders, which is one of my own.

A

I just use once again bmpjs to get all of the data, and I filter specifically on is what we enable to be false, which filters out all of the out of the box hidden folders from sharepoint, and only those where there is more well where there is at least one file inside of that folder, and then the last one is get files from folder. So I fetch all of the files now. This is a specific one, because I couldn't figure out the chemical query.

A

I'm sure there is one so after I get all the files I filter them to be of an image type to render them on the screen last. One that I want to show off is the once again the sharepoint property pane things that pmp makes available, because you can do load property, pain resources, which is an spfx out of the box available method to fetch all of my lists.

A

So this goes to data service now, because this is asyncing and take a little while I use something from bmp to set a spinner on screen and then when this is loaded afterwards, I clear the spinner and then this is the most complex line of code inside this web part it's to fetch or to get a thumbnail pop, because if you fetch an image from a document library, you only get the full image url and to render a thumbnail or a small version to make it load quicker.

A

I really like to get a preview version of that image. So what I do is I take the full screen url.

A

I do an encode uri component on it and then I once again replace the percentage 2f with the forward. Slash again, it's because that's what's needed for this format to work, and then I create a thumbnail path by taking the root url of my site, collection uh replace the ending with nothing. So I can the ending, slash or trim of the end slash, and then I do layouts 15 get preview ashxx and then pass in the image pop, and this gives me a thumbnail pop that I can use in my lightbox gallery item.

A

So this makes my image load very quickly on screen and that's about it. I've got some resources available in the slides, so I'm using pmpgs, spfx controls react and an available react light gallery.

A

All of this is on my github and I have a blog post explaining it again, but in essence I wanted to show that, with little code and using a lot of stuff from pmp, you can get a great result in the end.