Forum Discussion

nhtkid's avatar
nhtkid
Iron Contributor
Mar 27, 2025
Solved

SharePoint News web part with customised sorting buttons

Dear community, All my news articles are already categorised using managed property like shown https://www.youtube.com/watch?v=ngZ_Fakxums&list=PLR-TCFHBe8JFUPWhCjaOAHrxob3BbAVgz&index=5. My goal i...
SharePoint Online
  • nhtkid's avatar
    nhtkid
    Mar 30, 2025

    Hi KripalKavi ,

    I was able to build it using PnP Search Verticals to achieve most of my goal.

    The layout customisation of the Search Results web part is fantastic.

    However, if we could have a bit more control over the verticals look and feel, it would be even better.

    As you can see, I was able to add a FluidUI icon but that's about it.

    I like to change the vertical looks, for example, maybe add a circle around these vertical words, make them look like a button to attract people to click them. It is just like the YouTube example I showed, give it a bit of shading.

    Thanks all and thank you for the PnP Modern Search app, it is great (but still hard to use).

     

nhtkid's avatar
nhtkid
Iron Contributor
Mar 28, 2025

Thanks DaveMehr365 , that looked promising.

I tried my best to follow the article but get lost in the end.
I am going for the option 2 with the template.

The site page that has the PnP and Quick Link web parts added is
https://airdeepmindcom.sharepoint.com/sites/HomeIntranet/SitePages/News-Hub.aspx
The custom property I am using is called "News Category"

I struggled with the query template.
Based on the article, is it supposed to be:

{searchTerms} path:"https://airdeepmindcom.sharepoint.com/sites/HomeIntranet/SitePages/News-Hub.aspx"RefinableString00:"News Category":{?QueryString.NewsCategory}

I don't understand what the RefinableString mean from the example. Also my property has a space in it, which makes it tricky.

Appreciate your help!

Thanks

 

 

DaveMehr365's avatar
DaveMehr365
MVP
Mar 28, 2025

Hello nhtkid 

RefinableString00 is mapped to the event column in the SharePoint search schema (in the scenario).

You need to map the column "News Category" to a RefinableString, after the mapping you can create queries and dynamic urls like in the scenario.

 

Regards, Dave

  • nhtkid's avatar
    nhtkid
    Iron Contributor
    Mar 29, 2025

    Thank you DaveMehr365, I was able to get it working after mapping my custom column to RefinableString00.

    Function wise, I think it's okay. When I click different quick links, it loads up different news in PnP Search Result web part based on the news category I set in the quick links.

    However, every time I click quick links, it refreshes the whole page, so as a button (I tried it too).

    I think the reason is because these are simple hyperlinks, and it reloads the whole page every time you click it.

    Is there a more elegant way, when you click these button to filter, on the PnP Search Result web part refreshes, instead of whole page reloads?

     

    Cheers,

Resources