Veröffentlichungsdatum: 20. April 2017
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE
Das Mobile First Projekt bietet Ihnen eine Vielzahl neuer und einfacher Möglichkeiten, Objektdaten auf einfachste Weise in einer Liste abzugeben und zu formatieren.
Dieser Artikel zeigt Ihnen, wie Sie ohne Anpassungen im Zeilen-Template:
Während bei vielen Listen Bild, Datum, Titel und Beschreibung ausreichen, benötigt man bei der Listendarstellung von komplexeren Objekten weitere Daten, die zum Teil speziell formatiert und manchmal auch bedingt ausgegeben werden sollen.
Sehen Sie in den folgenden Beispielen, welche Technik für welche Anforderungen ausreicht.
Im einfachsten Fall werden nur Standardwerte, für welches das Listen-Template bereits Schablonen hat, ausgegeben. In unserem Beispiel sind das ein Bild und der Titel und der Name
-w-displayElements:thumbnail=yes,title=yes;
-w-displayElements:title=yes,wpath("/wd:extension/wd:meta/wd:copyright/text()")=yes;
<div class="listEntryInner"> <div class="listEntryThumbnail">...</div> <h3 class="listEntryTitle">...</h3> </div>
Nun sollen zusätzliche Objektdaten ausgegeben und deren Container formatiert werden.
In unserem Beispiel wollen wir zusätzlich die Telefonnummer (phone) des Ansprechpartners und dessen E-Mail Adresse (email) ausgeben.
-w-displayElements:thumbnail=yes,title=yes,phone=yes,email=yes;
<div class="listEntryInner"> <div class="listEntryThumbnail">...</div> <h3 class="listEntryTitle">...</h3> <div class="listEntryData-phone">01234 / 9876 123</div> <div class="listEntryData-email">aenna@team.dd</div> </div>
Die Objektdaten werden jeweils mit einem DIV umschlossen, welches eine der Objektdaten entsprechende Klasse hat. So können Sie jedes Element einzeln über CSS formatieren.
Sollen HTML-Formatierungen aus einem WYISWIG-Feld übernommen werden, ist die ID um -disable-output-escaping zu ergänzen, also z.B. descriptionext-disable-output-escaping=yes, statt descriptionext=yes.
Wenn mehrere zusätzliche Daten ausgegeben werden sollen, kann es sinnvoll sein, diese zum umschließen, um sie besser per CSS formatieren zu können.
In unserem Fall sollen die Telefonnummer und die E-Mail Adresse in ein einzusätzliches DIV gesetzt werden. Dazu verwenden wir einen Dekorator, welcher über die CSS-Only Definition an der entsprechende Stelle definiert wird.
-w-displayElements:thumbnail=yes,title=yes,decorator[div.listEntryContact]=yes,phone=yes,email=yes,decorator[/div]=yes;
<div class="listEntryInner"> <div class="listEntryThumbnail">...</div> <h3 class="listEntryTitle">...</h3> <div class="listEntryContact"> <div class="listEntryData-phone">01234 / 9876 123</div> <div class="listEntryData-email">aenna@team.dd</div> </div> </div>
Die Objektdaten werden nun entsprechend dem Dekorator mit einem DIV und der gewünschten Klasse umschlossen. So können Sie nicht nur jedes einzelne Element, sondern auch den umschließenden Container formatieren.
Reichen die gezeigten Techniken nicht aus, um die Objektdaten in der gewünschten Form aufzulisten, steht Ihnen eine weitere Technik zur Verfügung, um die Ausgabe beliebig zu gestalten.
Während bisher CSS-Only ausgereicht hat, um das passende HTML zu generieren, wird die Ausgabe nun über XSLT beliebig gestaltet. Dazu wird allerdings kein eigenes Zeilen-Template mehr benötigt. Die Listendarstellung des Objektes wird ebenfalls im Objekt-Template definiert.
Wird als anzuzeigendes Element eine im Objekt-Template hinterlegte Listendefinition aufgerufen, genügt folgende Syntax:
callObjectContactPersonListEntry=yes
Wichtig dabei ist, dass der Aufruf mit callObject beginnt. Dies führt dazu, dass ein entsprechendes Template mit dem Namen objectContactPersonListEntry aufgerufen wird.
-w-displayElements:callObjectContactPersonListEntry=yes;
<!-- Darstellung als kompletter Listeneintrag --> <xsl:template name="objectContactPersonListEntry"> ... <xsl:if test="wd:extension/wd:object/wd:data[@id='degree']/text()"> <div class="listEntryDegree"> <xsl:value-of select="wd:extension/wd:object/wd:data[@id='degree']/text()"/> </div> </xsl:if> <xsl:if test="wd:extension/wd:object/wd:data[@id='position']/text() != ''"> <div class="listEntryStaffPosition"> <xsl:value-of select="wd:extension/wd:object/wd:data[@id='position']/text()"/> </div> </xsl:if> </xsl:template>
Sie können über dieses Prinzip sowohl das gesamte Zeilen-Template gestalten als auch nur einzelne Elemente. Das Prinzip lässt sich mit beliebigen anderen Elemente kombinieren.
Nachfolgend ein Auszug der callObject-Templates, welche im Standard verfügbar sind:
Über diese Technik können Sie z.B. auch ein Datum innerhalb einer Liste bezogen auf Objekte anders formatieren.
<xsl:template name="objectJobOfferListEntry"> <xsl:call-template name="listEntryDate"> <xsl:with-param name="time"><xsl:value-of select="wd:object/wd:data[@id = 'applicationDate']/text()"/></xsl:with-param> <xsl:with-param name="class">listEntryData-applicationDate</xsl:with-param> </xsl:call-template> </xsl:template> <!-- in der CSS-Only-Variante sieht ein Aufruf auf dieses Template so aus: -w-displayElements:callObjectJobOfferListEntry=yes; Die Formatierung des Datums kann wie gewohnt über die CSS-Only-Eigenschaften vorgenommen werden. -->
Wie Sie Listen um weitere Daten, z.B. aus den Objektdaten, erweitern, finden Sie in den Artikeln der weiterführenden Links beschrieben.