search

microsoft-search / pnp-modern-search

Home of PnP Modern Search solutions, helping you move from classic to modern SharePoint and beyond
https://microsoft-search.github.io/pnp-modern-search
Other
379 stars 337 forks source link

Improve display of tags #3806

Closed sympmarc closed 1 week ago

sympmarc commented 2 months ago

When displaying tags in the list or card view (at least), the display is rather ugly, and doesn't provide the functionality we had in older versions. This is the case even after adding Auto and enabling localization.

Here's a very simple example. In this result, the file has been tagged with two values for a Managed Metadata column: Finance and Risk. As you can see, the two values are squished together as well as being underlined, which suggests they are links.

image

I'd suggest two enhancements, the first being easier than the second:

  1. Change the formatting for the tags to list them in a more legible way. At the very least, that would mean putting some white space between them. If we can't do No. 2, then we should also remove the underline.
  2. Make the tags actual links, which filter the content for that Managed Metadata value.

I expect I could handle No. 1 -this has bugged me for a very long time, and I wish I'd already made the fix! It's probably just a CSS thing. The second is harder, and I'm not sure how to do it. (Maybe it should be a separate issue, but I wanted to capture these ideas together.)

kasperbolarsen commented 2 months ago

Something like this is easy enough ( GitHub Copilot did most of the work) image

I would actually prefer that the name of the tag was shown as well as the value by it self sometime doesn't make sense image

FelloSimon commented 2 months ago

What if you don't have access to the Copilot functions?

kasperbolarsen commented 2 months ago

Then you are in a world of pains. As I recall it a GitHub Copilot license is 10 USD/month and it is worth every cent!

kasperbolarsen commented 2 months ago

I got this far: The tags are rendered ok, and the links points to <a href="?q=Tags:'{{trim tag}}'" data-interception="off">{{tag}}</a> Getting it formatted to use the "f" argument and encoding will require a lot more work, or someone smarter then me ;-)

image

sympmarc commented 2 months ago

I think it would be great to have a few options for tag display. The two approaches you've taken above both seem to address use cases.

wobba commented 2 months ago

Someone care to PR a change to the default templates for this?

kasperbolarsen commented 2 months ago

@sympmarc How about I make a PR for this image

And add another sample to https://github.com/microsoft-search/pnp-modern-search-layouts for the more advanced version ? image

sympmarc commented 2 months ago

That would be awesome. Just getting the tags to display more nicely, like in your first example, is a big step forward.

kasperbolarsen commented 1 week ago

tested in 4.13 :-) Works fine