kanone

Address Widget

Mit diesem Widget lassen sich Adressangaben einfach darstellen. So können zum Beispiel Tourenleiter und der Vorstand ansprechend aufgelistet werden. Der HTML-Code entspricht sauber der Item-Struktur. Das Address-Widget bietet unterschiedliche Ausgaben. Die einfachste Ausgabe heisst item und liefert die Adressen als Liste. Die folgende Auflistung zeigt die Möglichkeiten des Widgets.

Einbau des Widgets

data-typeBeschreibung
item

Der Defaulttyp ist item. Dann wir das Item als HTML ausgegeben. Das eignet sich für Listen, Bildübersichten usw.

<img class="dropapp-address" data-type="item" alt="" data-category="12" data-interface="/dropnetapps/tours/api/" data-limit="10" src="/dropnetimages/dropbox/standard/status-wait.gif" height="16" width="16" />

appDieser Typ ist eine spezielle Form des Item. Die einzelnen Blöcke sind auf- und zuklappbar. Wie der Name schon sagt, eignet sich diese Ausgabe vorallem für die mobile Darstellung.
selectAus der Item-Liste wird eine komfortable HTML-Select Liste erstellt. Diese enthält neben dem Namen auch das Thumbnail und kann per Livesearch durchsucht werden. Ein gutes Beispiel ist in DropTours bei den Anmeldungen zu finden.
insert

Zum Beispiel für Vereine eignet sich der Typ Insert. Damit können sich Neumitglieder einfach und schnell anmelden. Im ersten Schritt wird immer die E-Mail-Adresse erfragt. Gibt man diese an, überprüft das Widget, ob die Adresse bereits in DropAddress erfasst wurde. So können Duplikate vermieden werden. Ist die Adresse noch nicht erfasst, erscheint das nächste Formular mit den in DropAddress eingestellten Feldern.

<img class="dropapp-address" data-type="insert" alt="Ich werde Mitglied" data-success="Vielen Dank für die Registrierung" data-interface="https://www.dropnet.ch/dropnetapps/address/api/" data-language="de" src="/dropnetimages/dropbox/standard/status-wait.gif" height="16" width="16" />

Gibt man im Parameter data-category eine Kategorie-ID an, so werden nur die Unterkategorien dieser Kategorie aufgelistet.

Parameter im img-Tag

Mit Parametern lässt sich das Widget beeinflussen. Die Parameter können im Widget angegeben werden oder per URL übergeben werden. In der URL heissen sie gleich, ausser dass das “data-” nicht mitgegeben wird. Per URL können nicht ganz alle Parameter übergeben werden. Zuerst werden die Parameter der URL übernommen und wenn nicht definiert, dann die Parameter des Widgets.

ParameterBeschreibungPflichfeld
class"dropapp-address" (Selektiert das Address-Widget)Ja
srcURL zum Ersatzbild bis das Javascript fertig ist.Ja
title [dropapp-filter]Der title wird als erster Eintrag in der Select-Box angezeigt.Nein
name [dropapp-filter]Wenn “category” dann wird die Kategorie gefiltert.Nein
data-interfaceWoher sollen die Daten bezogen werden? (/dropnetapps/address/api/)Ja
data-typeWelche Daten sollen geholt werden? Es stehen verschiedene Darstellungen zur Verfügung. Standardmässig ist es item. Eine detaillierte Beschreibung der verschiedenen Typen ist oben zu finden.Nein
data-categoryKategorie ID der AdresseNein
data-searchFilter nach SuchbegriffNein
data-startcharacterFilter nach Anfangsbuchstabe des NachnamenNein
data-limitMax. Anzahl zurück gegebener AdressenNein
data-offsetAb dieser Adresse anzeigenNein
data-commandNormalerweise ist es “getItems”. Es kann aber auch jedes andere command sein.Nein

Suchfunktion oder Filter für das Widget

Adressen können auch mit dem Widget dropapp-search-field durchsucht oder mit Filtern eingeschränkt werden. Dazu wird das Widget dropapp-filter eingesetzt. Das Widget dropapp-search-field wird immer gebraucht, weil es den Form-Tag erstellt. Erst dann können weitere Filter eingesetzt werden.

Suchfeld

<img id="dropapp-search-field-content" class="dropapp-search-field" src="/dropnetimages/dropbox/standard/status-wait.gif" data-class="fa fa-search" data-interface="/demo/info/eyeco-kontrolliert.php" data-title="Suchen ...">

<img id="dropapp-filter-02" class=”dropapp-filter" src="/dropnetimages/dropbox/standard/status-wait.gif" data-interface="/dropnetapps/address/index.cgi" data-command="category" title="Kategorie" name="category">