Forum Discussion
SharePoint News web part with customised sorting buttons
Dear community,
All my news articles are already categorised using managed property like shown in this video.
My goal is to display all news in one single News Web Part from all channels, not filtering using the web part properties, but to create buttons on the top of web part that serves as filtering buttons.
It will look like what you see from YouTube home page.
You will be defaulted to "All" that display news from all channels.
You can also click on other buttons which will filter the news dynamically.
These buttons will be corresponding to the news category that was set on the articles.
Is there a way to achieve that?
Thanks!
nhtkid
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).
6 Replies
KripalKaviMicrosoft
This is a great idea nhtkid. I don't believe this is possible today. But taking this back to the team and exploring
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).
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://mycompany.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
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
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,
Hi nhtkid
you can use query string parameters from url for dynamic results in the result webparts like this:
https://microsoft-search.github.io/pnp-modern-search/scenarios/use-query-string-in-url/
Regards, Dave
