In diesem kurzen Blogbeiträg möchte ich euch mein Display Template mit Downloadoption zeigen und zur Verfügung stellen.

Das Endresultat sieht folgendermaßen aus:

Display Template download picture(de)-1

Auch das Hoverpanel wurde angepasst und hat nun Metadaten des Bildes direkt in der Ansicht.

Display Template download picture(de)-2

Mit einem Klick auf das Bild öffnet sich dies nochmals extra, sodass ihr es in der Originalgröße sehen könnt.

Display Template download picture(de)-3

Display Template download picture(de)-4

Hier als erstes das Display Template:

Wer schon ein oder zwei Display Templates sich angeschaut hat kennt sich denke ich recht schnell aus.

Bei Neueinsteigern ist zu erwähnen, dass es wichtig ist, die ManagedPropertyMappings sich anzusehen. Am Ende findet ihr einige RefinableStrings. Diese sind bei mir zu den entsprechenden Eigenschaften des Elements gemappt und können so im Display Template bzw. HoverPanel verwendet werden.

auch habe ich die moment.js und font-awesome.css zusätzlich geladen. Zum einen um das Datum sauber und einfach formatieren zu können und zum anderen um das Downloadicon zu erzeugen und mehr Freiheiten mit Icons zu haben.

Hier nun das HoverPanel:

Wie ihr seht benötigt ihr in den ManagedPropertyMappings dieses Mal keine RefinableStrings. Dies ist sehr wichtig! Dieses Mapping bzw. das hinzufügen der custom Properties muss im Display Template erfolgen.

Sobald das funktioniert könnt ihr im HoverPanel ebenfalls auf diese zugreifen.

Wie immer gilt, “don’t be afraIT” und fragt nach, wenn es etwas gibt. Auch könnt ihr mir wie immer über Twitter oder Facebook folgen um immer die neuesten Blogbeiträge zu erhalten.

Ich würde mich freuen wenn du diesen Link in deinen sozialen Netzwerken teilst und / oder mir hier in den Kommentaren Rückmeldung gibst ob weitere Display Templates hier vorgestellt werden sollen.

Da gibt es noch so einiges, was man brauchen kann…

LEAVE A REPLY

Please enter your comment!
Please enter your name here