"See all" button to Search Results webpart?

[DavorSukeri]

It would be nice if the Search results webpart would have a "See all" button at the top right corner of the webpart like in OOTB News webpart or Events webpart.

Settings:

1. There should be an option to show or not to show the button (probably not show by default).

2. When shown, there should be custom link field where you can set any link you want.

Case example where I got the idea:

Since Sharepoint Event-webpart is so poorly designed (visually ok, but functionality is not), I used PnP Search results webpart to pull events from a site to another site. By default when I click the event title in the webpart, it opens the classic event page and not the modern event page. That issue I fixed with these steps by @Laul0.

I still need to make a custom layout (most likely going to use the card layout as a base template and modify that), to display a smaller image and so on.

When all that is done, it would be nice to have a "Sell all" button where user could click and be sent to my custom Events-page (on the site from where the events are being pulled) and that Events-page would have also a search box and filters pane for searching events.

And yes I know there will be "Show all events" button in every modern event page where the user lands to the OOTB Events rollup page so they will have two different pages to search events, but unfortunately that is something they have to live with.

[wobba]

There's a limit to 500 results per request. And you should be able to build this via custom templates and using two search parts. One with 10 results and one with 500. In the 10 result part add a link which adds two query parameter to the URL. One of the params is used to render 0 results in the first part and trigger rendering in the other.

I have not tried it, but I believe it should be possible.

?part1=*&part2=DONOTRENDER

To get back

?part2=*&part1=DONOTRENDER

And you would use part1/part2 in the query template per web part and set them not to render if no results. And DONOTRENDER must be a term not part of any indexed item.

[DavorSukeri]

Thanks for the idea, but that's not quite what I was looking for.

What I meant was I would have a single Search Results webpart in the Intranet front page to show Events (let's say 5 upcoming events for example) and from there user could select "See all" and would be sent to page where he could see all future/past events and filter them by categories and so on.

[kasperbolarsen]

"See all" would be more like "See max 500" as that is a limit imposed by the API.
A cheap workaround would be to add an out of the box button redirecting to the "show all" page?

[DavorSukeri]

"See all" would be more like "See max 500" as that is a limit imposed by the API. A cheap workaround would be to add an out of the box button redirecting to the "show all" page?

That's true, but I would not be showing max 500 items anyway since I would use paging and show probably 10-20 items per page, so thats not the issue.

I am currently using that cheap workaround you mentioned, but I was just thinking that IF there would be a configurable button/link in Search Results webpart, I could easily mimic OOTB News webpart/ Events webpart with it.

I often use PnP Search Results webpart to replace OOTB News-part also because then I can display more relevant information in the webpart. I could use the custom button there also, -> a "See all" button to send users to my custom News search page where I could pull all news from where I want and filter the results with Search Filters webpart. Also the OOTB "See all" feature in the News-webpart is just poor implementation. It takes way too much space to find any news there and there is no filtering options.

I really think it would be very usable feature.

[kasperbolarsen]

I am not sure it belongs in the web part, as it is kinda a custom thing. However, it is pretty easy to inject in a template
add this in the Card template, like right after the template--resultCount div

<div class="seeall">
             <a href="https://microsoft-search.github.io/pnp-modern-search">See All</a>
            </div>
and then go wild on the CSS

  .seeall{
              
  
             background-color: {{@root.theme.palette.themePrimary}};
  border: none;
  color: white;
  padding: 15px ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 12px;
  margin:10px;
        }