Promoted Links Web Part for Modern Pages

Promoted Links Web Part for Modern SharePoint Pages

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!

9 thoughts on “Promoted Links Web Part for Modern Pages

  1. Carl Uttley

    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.

    Reply
      1. Tony Phillips Post author

        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

        Reply
  2. Tamas Purman

    Hi,

    How can I rename the solution. I want to display “Modern tiles” in site contents.

    Thank you

    Reply
    1. Tony Phillips Post author

      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

      Reply
  3. Sérgio Fangueiro

    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

    Reply
  4. Sathyam Babu Savanam

    Is there any way to change the promoted list view? I am not able to find it in Webpart properties.

    Reply
    1. Tony Phillips Post author

      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.

      Reply

Leave a Reply to Tamas Purman Cancel reply

Your email address will not be published. Required fields are marked *