Die Komponente Data List zeigt eine Liste von Elementen in verschiedenen Varianten an und ermöglicht dem Benutzer, ein Element auszuwählen.
In diesem Artikel lesen Sie folgende Inhalte:
Mapping von Bildern und Dateien
Tipp! Hier sehen Sie mehr von der Komponente!
1. Data List Properties
Properties |
Beschreibung |
---|---|
ID |
Bezeichnung / Benamung der Headline |
Color scheme |
Initiale Farbschemen:
|
Konfiguriert über Color Schemes |
|
CSS class |
Elemente einer Gruppe/Klasse zuordnen, für die bestimmte Formatierungen gelten sollen Option 1: in Properties bestehende Bootstrap-Klassen einfügen Option 2: über Hauptmenü in den Page Templates (für “alles verfügbar”) Option 3: Page definitions (nur für diese Seite) |
Tab index |
Legt die Navigation in der Page bzw. im Formular durch die Tab-Taste fest (Tab-Reihenfolge). Für jedes Formularfeld kann ein Tab-index vergeben werden. |
Access |
Access rights der Komponente:
|
Data layer |
Data layer der Datenbank-Tabelle, View oder einer Abfrage. |
Header / Footer |
|
Editing |
Wenn “Enable deleting” aktiviert ist, können Datensätze im Frontend gelöscht werden. |
Item template |
Für die Darstellung der Datensätze kann aus vordefinierten Item Templates gewählt oder ein eigenes Template erstellt werden. Vordefinierte Templates:
Über “Define fields” mappen Sie die Datenfelder im Item-Template - Mapping von Bildern und Dateien. |
Load mode |
|
No data text |
Text wird ausgegeben wenn keine Datensätze ausgegeben werden. |
Display Settings |
|
2. Data List Funktionalitäten
Events
Event (Form Object) |
Beschreibung |
---|---|
rowClicked |
Dieses Ereignis wird ausgelöst, wenn der Benutzer auf eine Zeile klickt. |
rowDeleted |
Dieses Ereignis wird ausgelöst, wenn eine Zeile gelöscht wurde. |
deleteRowTriggered |
Dieses Ereignis wird ausgelöst, wenn der Benutzer das Löschen einer Zeile auslöst. |
enterKey |
Dieses Ereignis wird ausgelöst, wenn die Eingabetaste gedrückt wurde. |
Actions
Kategorisierung |
Action (Form Objekt) |
Beschreibung |
---|---|---|
State |
enable() |
Aktivieren Sie das Formular. |
disable() |
Deaktivieren Sie das Formular. (Formular ist nicht bearbeitbar) |
|
setEnabled(enabled) |
Aktivieren/Deaktivieren des Formulars. |
|
show() |
Zeigt das Formular an. |
|
hide() |
Blendet das Formular aus. |
|
setVisible(visible) |
Zeigt/verbirgt das Formular. |
|
Appearance |
setTitle(title) |
Legen Sie den Titel des Formulars fest. |
setTitleText(title) |
Legen Sie den Titel des Formulars fest. |
|
setTitleHtml(title) |
Legen Sie den Titel des Formulars fest. |
|
setFooter(footer) |
Legen Sie die Fußzeile des Formulars fest. |
|
setFooterText(footer) |
Legen Sie die Fußzeile des Formulars fest. |
|
setFooterHtml(footer) |
Legen Sie die Fußzeile des Formulars fest. |
|
Data |
updateFormat() |
Aktualisieren Sie das Format aller Formularfelder. |
refresh() |
Aktualisieren der Liste. |
|
downloadSelected(column, filename) |
Herunterladen von Daten einer binären Spalte der ausgewählten Zeile. |
|
download(key, column, filename) |
Herunterladen von Daten einer Binärspalte. |
3. Mapping von Bildern und Dateien
Für die Darstellung der Datensätze können Sie aus vordefinierten Item Templates wählen oder ihr eigenes Template erstellen.
- Wählen Sie unter in den Properties unter "Item Templates" das gewünschte Format aus (z.B. Picture and text).
- Über "Define fields" können Sie nun die Datenfelder auf ihr Template anpassen / mappen:
Notiz! Bilder oder Dateien werden in der Datenbank-Tabelle in einem Feld mit binärem Datentyp gespeichert (varbinary(max)). Es wird also ein zweites Feld benötigt, in dem der Dateiname inkl. Dateiendung gespeichert wird (Charakter Feld).
Beim Mapping geben Sie bei “Image column” das binäre Feld an und bei “Name expression” das Feld, welches den Dateinamen enthält.