Mobile First BASE: Listen um Objektdaten erweitern und beliebig formatieren

20. Apr 2017

Das Mobile First Projekt bietet Ihnen eine Vielzahl neuer und einfacher Möglichkeiten, Objektdaten auf einfachste Weise in einer Liste abzugeben und zu formatieren.

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:

  • Neue Objektdaten über CSS-Only ergänzen
  • Einfache Formatierungen über CSS-Only Dekoratoren umsetzen
  • Beliebige Ausgaben über das Objekt-Template mit XSLT erstellen.

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.

Ausgabe von Standardinformationen

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

CSS-Only Definition zur Anzeige des Bildes und des Titels, welcher als Vorname, Nachname hinterlegt ist

-w-displayElements:thumbnail=yes,title=yes;
-w-displayElements:title=yes,wpath("/wd:extension/wd:meta/wd:copyright/text()")=yes;

Ergebnis im HTML

<div class="listEntryInner">
<
div class="listEntryThumbnail">...</div>
<
h3 class="listEntryTitle">...</h3>
</
div>

Zusätzliche Objektdaten ausgeben

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.

CSS-Only Definition zur zusätzliche Ausgabe des Objektwertes phone und email

-w-displayElements:thumbnail=yes,title=yes,phone=yes,email=yes;

Ergebnis im HTML

<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.

Zusätzliche Objektdaten um HTML ergänzen

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.

CSS-Only Definition mit zusätzlichem Dekorator um die Telefonnummer und die E-Mail

-w-displayElements:thumbnail=yes,title=yes,decorator[div.listEntryContact]=yes,phone=yes,email=yes,decorator[/div]=yes;

Ergebnis im HTML

<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.

Listendarstellung im Objekt-Template definieren und Objektdaten beliebig formatiert ausgeben

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 entsprechende Template mit dem Namen objectContactPersonListEntry aufgerufen wird.

CSS-Only Definition zum Aufruf der Darstellung über das Objekt-Template

-w-displayElements:callObjectContactPersonListEntry=yes;

Definition der Listenausgabe im Objekt-Template

<!-- 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.