Icons in Standard Suchergebnissen
Werden Dokumente in den Suchresultaten angezeigt, wird das entsprechende Icon aufgrund der Dateiendung automatisch erkannt und angezeigt. Dafür das Layout Details List in den PnP Search Results verwenden.
Query template: {SearchTerms} IsDocument:1
Bei der Anzeige der SharePoint Listen Elementewird jedoch immer das gleich Icon angezeigt.
Query template: {SearchTerms} ContentClass:STS_ListItem_GenericList
Icon für SharePoint Listen Elemente anpassen
Um das Icon auch für SharePoint Listen Elemente anzupassen, kann eine eigene Spalte mit einer Handlebar Expression eingefügt werden, dafür zuerst aber das Standard SharePoint Listen Element Icon ausblenden.
Unter Managed columns nun eine eigene Spalte hinzufügen und diese mit einer Handlebar expression versehen. Um ein passendes Icon zu finden, gibt es eine Fluent UI Icon Gallerie von Microsoft, in welcher ein Icon gesucht und der Name dann weiterverwendet werden kann.
Handlebar expression: <pnp-icon style=“display: inline-block; vertical-align: middle;“ data-name=“BulletedList“ aria-hidden=“true“></pnp-icon>
Damit wird nun für jedes SharePoint Listen Elemente in den Suchergebenisse das entsprechende Icon BulletedList angezeigt:
Icon abhängig vom Speicherort
Damit nun besser ersichtlich wird, um welche Art von SharePoint Listen Element es sich handelt, können abhängig des Speicherortes verschiedene Icons angezeigt werden. Dafür muss die Handlebar expression mit CONTAINS PATH, mit der entsprechenden Pfadangabe, wo sich die SharePoint Listen Elemente befinden, angegeben werden wie auch die ELSE Abfrage, falls verschiedene Listen durchsucht werden sollen, ergänzt werden.
{{#contains Path ‚PrjList‘}}
<pnp-icon style=“display: inline-block; vertical-align: middle;“ data-name=“WaitlistConfirm“ aria-hidden=“true“></pnp-icon>
{{else}}
{{#contains Path ‚SessionTracker‘}}
<pnp-icon style=“display: inline-block; vertical-align: middle;“ data-name=“EventInfo“ aria-hidden=“true“></pnp-icon>
{{else}}
<pnp-icon style=“display: inline-block; vertical-align: middle;“ data-name=“BulletedList“ aria-hidden=“true“></pnp-icon>
{{/contains}}
{{/contains}}
Das Ergebnis lässt sich sehen, nun werden für verschiedene Speicherorte entsprechende Icons angezeigt.
Titel Spalte und Icon verlinken
Anstelle einer eigenen Spalte für das SharePoint Listen Element-Icon kann auch die bestehende Title Spalte verwendet werden, damit lässt sich auch gleich das Icon mit dem Element verlinken.
Um das Icon direkt im Title vorangestellt anzuzeigen, muss die Handlebar expression der Spalte wie folgt angepasst werden, hier mit dabei wird auch gleich das SharePoint Theme für die Links und Icons angewendet.
{{#contains Path ‚PrjList‘}}
<a href=“{{slot item @root.slots.PreviewUrl}}“ target=“_blank“ style=“color: {{@root.theme.semanticColors.link}}“>
<pnp-icon style=“display: inline-block; vertical-align: middle;“ data-name=“WaitlistConfirm“ aria-hidden=“true“></pnp-icon> {{slot item @root.slots.Title}} </a>
{{else}}
{{#contains Path ‚SessionTracker‘}}
<a href=“{{slot item @root.slots.PreviewUrl}}“ target=“_blank“ style=“color: {{@root.theme.semanticColors.link}}“>
<pnp-icon style=“display: inline-block; vertical-align: middle;“ data-name=“EventInfo“ aria-hidden=“true“></pnp-icon> {{slot item @root.slots.Title}}</a>
{{else}}
<a href=“{{slot item @root.slots.PreviewUrl}}“ target=“_blank“ style=“color: {{@root.theme.semanticColors.link}}“>
<pnp-icon style=“display: inline-block; vertical-align: middle;“ data-name=“BulletedList“ aria-hidden=“true“></pnp-icon> {{slot item @root.slots.Title}}</a>
{{/contains}}
{{/contains}}
Mit Handlebar expressions in den SharePoint Suchergebnissen lassen sich so die SharePoint Listen Elemente besser darstellen, damit direkt ersichtlich ist, um was für ein Element es sich handelt.