Alternative Darstellungsform

Jedes Widget kann über beliebig viele Templates für die Darstellung verfügen. Diese Templates können vom Anwender entweder über die Widget-Eigenschaften ausgewählt werden oder über das Widget-Feld Elementvorlagen-Auswahl, das Sie als Feld Ihrem Widget hinzufügen können.

Für das Widget Textbox mit Link wird in diesem Beispiel eine alternative Darstellungsform (Template) erstellt, in welcher die Überschrift oberhalb der Textbox und der Link als Button dargestellt wird.

1. Alternative Template-Datei erstellen

Erstellen Sie im Widget-Ordner textbox-mit-link eine neue Template-Datei alternative.html. Sie können hierfür auch die bereits vorhandene Datei standard.html kopieren und umbenennen. Fügen Sie in die Datei folgende Code ein:

Markup

<$=system.partial("article-begin.html")$>
    
    <div class="textbox-mit-link-alt">
        
        <$=system.partial("article-headline.html")$>
        
        <$= article.value("textfeld") $>
        
        <a href="<$= article.value("linkauswahl") $>" class="button">
            Los geht's
        </a>
    
    </div>

<$=system.partial("article-end.html")$>

Wie Sie sehen sind für das alternativen Templates die Widget-Felder anders angeordnet. Der <div>-tag erhält die CSS-Klasse textbox-mit-link-alt mit deren Hilfe das CSS angepasst werden kann. Des Weiteren erhält der <a>-tag die CSS-Klasse button.

2. Template-Info den Widget-Einstellungen hinzufügen

Damit das Widget erkennt, dass es ein alternatives Template gibt, muss dieses in den Widget-Einstellungen hinzugefügt werden. Öffnen Sie dazu die Datei widget.json in Ihrem Editor und fügen folgenden Code im Bereich itemTemplates hinzu:

JSON

{
	"fileName": "alternative.html"
}

JSON-Datei komplett

{
    "settings": {
        "category": "favs",
        "maincategory": "text",
        "showcssinputfields": false,
        "uiname": "Textbox mit Link"
    },
    "fields": [
        {
            "displayname": "Text",
            "name": "textfeld",
            "type": "html-wysiwyg-editor"
        },
        {
            "displayname": "Link",
            "name": "linkauswahl",
            "type": "url-selection"
        },
        {
            "displayName": "Darstellung",
            "name": "darstellung",
            "type": "itemtemplate-selection"
        }
    ],
    "assets": [
        {
            "fileName": "textbox-mit-link.css",
            "mode": "Bundle",
            "order": 50
        }
    ],
    "itemTemplates": [
        {
            "fileName": "standard.html"
        },
        {
            "fileName": "alternative.html"
        }
    ]
}

3. Widget-CSS-Datei anpassen

Öffnen Sie die CSS-Datei textbox-mit-link.css in Ihrem Editor und fügen folgenden Code hinzu:

CSS

.textbox-mit-link-alt a.button {
    padding: 10px;
    background-color: #0983D3;
}
.textbox-mit-link-alt a.button:hover {
    background-color: #F0694B;
}

4. Elementvorlagen-Auswahl hinzufügen

Öffnen Sie über den Befehl Extras | Entwickler | Widgets den Widget-Editor. Wählen Sie das Widget Textbox mit Link und klicken auf den Button Bearbeiten.

Fügen Sie über den Button Neu folgendes Widget-Feld (Elemente) ein:

  • Elementvorlagen-Auswahl (Gruppe Verschiedenes)
    Beschriftung: Darstellung
    Name: darstellung

Klicken Sie zum Schließen auf den Button OK.

5. Aktuelle Darstellung des Widgets

Öffnen Sie in Zeta Producer das eingefügte Widget Textbox mit Link zum Bearbeiten. Waählen Sie aus der Liste Darstellung den Eintrag alternative. Klicken Sie anschließend auf den Button OK.

Wie Sie sehen können, hat sich die Darstellung des Widget Textbox mit Link entsprechend der alternativen Einstellungen geändert.