Mobile First BASE: Listen um Objektdaten erweitern und beliebig 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 entsprechendes 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.

Nachfolgend ein Auszug der callObject-Templates, welche im Standard verfügbar sind:

  • callObjectShopProductListEntry
  • callObjectClubData
  • callObjectClassifiedListEntry
  • callObjectPackageDeallistDescription
  • callObjectEventMultiListCalendar
  • callObjectEventMultiListLocation

Weitere Beispiele

Über diese Technik können Sie z.B. auch ein Datum innerhalb einer Liste bezogen auf Objekte anders formatieren.

Beispiel: Auszug aus dem Objekt-Template

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

Listenerweiterungen

Wie Sie Listen um weitere Daten, z.B. aus den Objektdaten, erweitern, finden Sie in den Artikeln der weiterführenden Links beschrieben.