Data List

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: 

Data List Properties

Data List Funktionalitäten

Mapping von Bildern und Dateien

TD_FT_DataList

Tipp! Hier sehen Sie mehr von der Komponente!

1. Data List Properties


Properties

Beschreibung

ID

Bezeichnung / Benamung der Headline

Color scheme

Initiale Farbschemen:

  • Normal: schwarz

  • Default: blau

  • Success: grün

  • Danger: rot

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:

  • Insert: Daten in das Formularfeld einpflegen

  • Update: Daten aus dem Formularfeld bearbeiten
  • Read data: ausgegebenen Daten sehen / lesen

Data layer

Data layer der Datenbank-Tabelle, View oder einer Abfrage.

Header / Footer

  • Show header / Show footer: Checkbox steuert, ob der Header / Footer angezeigt wird
    Display: 
    Option 1: Use Text (Text wird ohne Formatierung ausgegeben)
    Option 2: Use HTML (Im Text kann HTML verwendet werden)
  • Border: Checkbox Show border steuert ob die Komponente mit Rahmen angezeigt wird. Zusätzlich kann bei Padding der Abstand in Pixel definiert werden.

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:

  • Picture and text (siehe Example)

  • Picture large / medium / small 

  • One line

  • Two lines

  • Side by Side

Über “Define fields” mappen Sie die Datenfelder im Item-Template - Mapping von Bildern und Dateien.

Load mode

  • Load bei scrolling
  • Load bei paging button 

No data text

Text wird ausgegeben wenn keine Datensätze ausgegeben werden.

Display Settings

  • Show selected row
    Angeklickter Datensatz (selectedRow) wird mit Hintergrundfarbe dargestellt
  • Auto size height
    Höhe der Data list wird durch die Anzahl der Datensätze definiert (kein Scrollen) - Wenn die Checkbox nicht aktiviert ist, werden alle Datensätze innerhalb der definierten Höhe der Data list ausgegeben. (Wenn der Inhalt größer ist als der verfügbare Platz, kann innerhalb der der Komponente gescrollt werden.

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.
Bei Verwendung dieses Ereignisses wird das Standardverhalten vollständig weggelassen.

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.
aktiviert: Flagge zur Anzeige von aktiviert oder deaktiviert.

show()

Zeigt das Formular an.

hide()

Blendet das Formular aus.

setVisible(visible)

Zeigt/verbirgt das Formular.
sichtbar: Flagge zum Anzeigen oder Ausblenden.

Appearance

setTitle(title)

Legen Sie den Titel des Formulars fest.
Titel: Der zu setzende Titel.

setTitleText(title)

Legen Sie den Titel des Formulars fest.
Titel: Der zu setzende Texttitel.

setTitleHtml(title)

Legen Sie den Titel des Formulars fest.
Titel: Der zu setzende HMTL-Titel.

setFooter(footer)

Legen Sie die Fußzeile des Formulars fest.
Titel: Der zu setzende Titel der Fußzeile.

setFooterText(footer)

Legen Sie die Fußzeile des Formulars fest.
Fußzeile: Der zu setzende Fußzeilentext.

setFooterHtml(footer)

Legen Sie die Fußzeile des Formulars fest.
Fußzeile: Die zu setzende HTML-Fußzeile.

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.
Spalte: Name der Spalte, die die Daten enthält.
Dateiname: Name für die Datei der heruntergeladenen Daten.

 

download(key, column, filename)

Herunterladen von Daten einer Binärspalte.
Schlüssel: Schlüssel der Zeile, die die Daten enthält.
Spalte: Name der Spalte, die die Daten enthält.
filename: Name für die Datei der heruntergeladenen Daten.

 

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.

TD_FT_DataList2