This web part replicates the classic Promoted Links Web Part but with added features such as web part properties to change the background colour, size of background image and to select which promoted link list to use. You can download it here.
For more information on the full Cloud Design Box learning platform for modern SharePoint or custom workflows and design, Contact us via the website.
If you are interested in developing web parts using the new SharePoint Framework, this web part is a good example of:
- loading jQuery from CDN
- adding third party modules
- making REST calls
- configuring web part properties
You can find the complete source code in my GitHub repository at https://github.com/CloudDesignBox/cdb-promoted-links.
As soon as I get chance, I will create some additional blog posts on how this web part was created, breaking down the different task lists.
While I work on that, please feel free to download the code and have a play yourselves!
Hi Tony, your webpart looks great. But how did you even get a Promoted Links list into a modern team site? Whenever I add a new app, promoted links is not an option. I’ve tried saving an existing promoted links list as a template so I can re-use it on a modern team site and link it to your web part, but again I don’t see my template within the apps list of my modern team site. Any info on how you created your list in the screenshot would be greatly appreciated.
Sorted, I needed to activate the collaboration lists feature on the site…
Hi Carl,
Sorry your comment got lost in the spam so I’ve only just seen it. Glad you got it sorted. Yes, to get the promoted list template available in a team site would be to activate the collaboration lists feature.
Tony
Hi,
How can I rename the solution. I want to display “Modern tiles” in site contents.
Thank you
Hi Tamas,
You can rename the web part in the web part properties when adding it to the page. If you want to rename the solution in the web part picker, you will need to edit and recompile the code.
Thanks,
Tony
Hi Tony.
I have discovered your github page by Darren suggestion, and after imported to sharepoint, after selecting promoted links i receive this:
[SPLoaderError.loadComponentError]:
***Failed to load component “5b0eac5a-50ba-4e01-8eb4-1767151d07f8” (CloudDesignBoxPromotedLinksWebPart). Original error: ***Failed to load URL ‘/SiteAssets/CDBPromotedLinks/cdbpromotedlinks-clouddesignboxpromotedlinkswebpartstrings_en-us_765458216e451186e10982218c7e2d58.js’ for resource ‘CloudDesignBoxPromotedLinksWebPartStrings’ in component ‘5b0eac5a-50ba-4e01-8eb4-1767151d07f8’ (CloudDesignBoxPromotedLinksWebPart). The file was not found in the server.
***INNERERROR:
***Failed to load URL ‘/SiteAssets/CDBPromotedLinks/cdbpromotedlinks-clouddesignboxpromotedlinkswebpartstrings_en-us_765458216e451186e10982218c7e2d58.js’ for resource ‘CloudDesignBoxPromotedLinksWebPartStrings’ in component ‘5b0eac5a-50ba-4e01-8eb4-1767151d07f8’ (CloudDesignBoxPromotedLinksWebPart). The file was not found in the server.
***CALLSTACK:
Error
at t [as constructor] (https://spoprod-a.akamaihd.net/files/sp-client/sp-pages-assembly_en-us_dcfe147211950575af0e17d26b0ced7b.js:4:53271)
at new t (https://spoprod-a.akamaihd.net/files/sp-client/sp-pages-assembly_en-us_dcfe147211950575af0e17d26b0ced7b.js:20:10505)
at Function.e.buildErrorWithVerboseLog (https://spoprod-a.akamaihd.net/files/sp-client/sp-pages-assembly_en-us_dcfe147211950575af0e17d26b0ced7b.js:20:53017)
at Function.e.buildLoadComponentError (https://spoprod-a.akamaihd.net/files/sp-client/sp-pages-assembly_en-us_dcfe147211950575af0e17d26b0ced7b.js:20:49048)
at https://spoprod-a.akamaihd.net/files/sp-client/sp-pages-assembly_en-us_dcfe147211950575af0e17d26b0ced7b.js:20:44589
. Press Enter to navigate inside the web part. When inside, use Alt+F10 to go to toolbar, use Alt+P to move focus to the property pane and use Escape to exit the web part.
Activity
See all
Please see this thread: https://github.com/CloudDesignBox/cdb-promoted-links/issues/1
Any questions can be posted on github.
Thanks,
Tony
Is there any way to change the promoted list view? I am not able to find it in Webpart properties.
No, it was initially designed to show tiles on the page rather than replace a list view web part. The web part took on a life of it’s own and instead of just showing promoted links, we added lots of other functionality that was requested. Please feel free to check out the project and make changes if required.