Skip to main content
Skip table of contents

Grid Component

Eine Grid Component eignet sich ideal, um Daten in einer tabellarischen Darstellung abzubilden. Das Verhalten der Grid Component kann über einzelne Elemente in den Grid Settings festgelegt werden.

Hinweis:

Die Grid Component wird in einer zukünftigen Version der X4 BPMS für die Anzeige auf mobilen Geräten optimiert.

Grid Component definieren

Eine Grid Component wird innerhalb einer eigenen Definitionsdatei <GridName>.grid deklariert. Diese wird im Projektordner Components angelegt. 

So legen Sie eine neue Definitionsdatei an

  1. Klicken Sie auf das Menü New > Add <entsprechende Komponente>.
    Alternativ lässt sich die Datei auch über das Kontextmenü New > Add <entsprechende Komponente> anlegen.
  2. Wählen Sie die gewünschte Definitionsdatei aus.
  3. Geben Sie in File name den Namen der Definitionsdatei ein.
  4. Wählen Sie Finish aus.
    Eine neue Definitionsdatei mit einer vordefinierten Struktur wird angelegt.

Die Daten, die angezeigt werden sollen, müssen durch einen Technical Process zur Verfügung gestellt werden und einem bestimmten Datenmodell entsprechen.

In den Properties muss das Datenmodell abgebildet werden, das durch den Technical Process geliefert wird. Um die durch den Technical Process gelieferten Daten mit der Darstellung innerhalb der Webanwendung zu verknüpfen, muss die entsprechende Property definiert und per Data Binding in der Definition der <GridColumn/> hinterlegt werden.

Hinweis:

Wenn eine Property in einer Grid Component verwendet werden soll, muss sie mit dem Typ Complex definiert werden. Diese Property kann weitere Propertys enthalten.

Die Grid Component wird über das Element <GridComponent> erzeugt, das folgende Attribute haben kann:

AttributBeschreibung
background

Definiert eine Hintergrundfarbe.

  • Data Binding (Color) möglich
Diese Einstellung überschreibt die Standardfarbe des Farbschemas.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

    • Verwenden Sie keine Raute vor dem Farbwert.
    • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.
  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200
fontFamily

Legt die Schriftfamilie innerhalb der Component fest. Die Eigenschaft wird an alle Controls und Actions der Component vererbt.

  • Data Binding (String) möglich

Mögliche Werte: Fontcode aus der Font-Palette, z. B. Font04

fontSize

Legt die Schriftgröße innerhalb der Component fest. Die Eigenschaft wird an alle Controls und Actions der Component vererbt.

  • Data Binding (String) möglich

Mögliche Werte:

  • Beliebige ganze Zahl oder Dezimalzahl mit einem Punkt als Dezimaltrennzeichen, z. B. 20; 20.8; .9
  • Schriftgröße in Pixel, z. B.  20px
  • Schriftgröße in Punkt, z. B. 18pt
  • Schriftgröße im Vergleich zur Schriftgröße des Elternelements, z. B. .8em  oder  120%
  • Schlüsselwörter:xx-Small, x-small, small, medium, large, x-large, xx-large, smaller, larger
fontStretch

Legt die Breite der einzelnen Schriftzeichen fest. Die Eigenschaft wird an alle Controls und Actions der Component vererbt.

  • Data Binding (String) möglich

Mögliche Werte:

  • Condensed
  • Expanded
  • ExtraCondensed
  • ExtraExpanded
  • Medium
  • Normal (Standard)
  • SemiCondensed
  • SemiExpanded
  • UltraCondensed
  • UltraExpanded
fontStyle

Legt die Neigung der Schrift fest. Die Eigenschaft wird an alle Controls und Actions der Component vererbt.

  • Data Binding (String) möglich

Mögliche Werte:

  • italic: kursive Schrift
  • normal: normale Schrift (Standard)
  • oblique: schräg gestellter Schriftstil (berechnet)
fontWeight

Legt die Schriftstärke fest. Die Eigenschaft wird an alle Controls und Actions der Component vererbt.

  • Data Binding (String) möglich

Mögliche Werte:

  • Black
  • Bold
  • DemiBold
  • ExtraBlack
  • ExtraBold
  • ExtraLight
  • Heavy
  • Light
  • Medium
  • Normal (Standard)
  • Regular
  • SemiBold
  • Thin
  • UltraBlack
  • UltraBold
  • UltraLight
foreground

Definiert die Schriftfarbe.

  • Data Binding (Color) möglich
Diese Einstellung überschreibt die Standardfarbe des Farbschemas.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

    • Verwenden Sie keine Raute vor dem Farbwert.
    • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.
  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200
headerBackground

Definiert die Hintergrundfarbe der Kopfzeile.

  • Data Binding (Color) möglich
Diese Einstellung überschreibt die Standardfarbe des Farbschemas.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

    • Verwenden Sie keine Raute vor dem Farbwert.
    • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.
  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200
headerForeground

Definiert die Schriftfarbe der Kopfzeile.

  • Data Binding (Color) möglich
Diese Einstellung überschreibt die Standardfarbe des Farbschemas.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

    • Verwenden Sie keine Raute vor dem Farbwert.
    • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.
  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200
headerFontFamily

Legt die Schriftfamilie der Kopfzeile fest.

  • Data Binding (String) möglich

Mögliche Werte: Fontcode aus der Font-Palette, z. B. Font04

headerFontWeight

Legt die Schriftstärke der Kopfzeile fest.

  • Data Binding (String) möglich

Mögliche Werte:

  • Black
  • Bold (Standard)
  • DemiBold
  • ExtraBlack
  • ExtraBold
  • ExtraLight
  • Heavy
  • Light
  • Medium
  • Normal 
  • Regular
  • SemiBold
  • Thin
  • UltraBlack
  • UltraBold
  • UltraLight
iconColor

Definiert die Farbe des Icons der Component.

  • Data Binding (Color) möglich
Diese Einstellung überschreibt die Standardfarbe des Farbschemas.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

    • Verwenden Sie keine Raute vor dem Farbwert.
    • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.
  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200
iconUrl

Pfad zu einer Grafikdatei oder Angabe eines Material Icons, der als Icon der Component verwendet wird.

  • Die Grafikdatei muss im Ordner Resources direkt unterhalb des Web-App-Projekts enthalten sein. Pfadangabe relativ zum Ordner Resources.
  • Das Material Icon muss mit dem Präfix icon, z. B. icon:<MaterialIconName> angegeben werden.

Mögliche Werte: 

  • Zeichenkette (URI), z. B. clock.png
  • icon:<MaterialIconName> , z. B. icon:extension
Mit Strg+Leertaste erhalten Sie eine Übersicht der verfügbaren Icons. Die Auswahl kann von den tatsächlich verfügbaren Material Icons abweichen.
itemsPerPage

Definiert die Anzahl der pro Seite angezeigten Reihen.

Mögliche Werte:

  • 5 (Standard)
  • 10
  • 20
  • 50
  • 100
process

Erforderlich. Pfad zur .wrf-Datei, die die Daten für die Component liefert. Der Prozess muss im Ordner Services/Processes enthalten sein. Pfadangabe relativ zum Ordner Services/Processes.

Mögliche Werte: Zeichenkette (URI)

title

Titel der Component. Wird in der Anwendung als Header angezeigt.

  • Data Binding (String) möglich

Mögliche Werte: Beliebige Zeichenkette oder Ausdruck für Data Binding

titleBackground

Definiert eine Titel-Hintergrundfarbe.

  • Data Binding (Color) möglich

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

    • Verwenden Sie keine Raute vor dem Farbwert.
    • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.
  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200
titleForeground

Definiert eine Farbe für den Titel-Vordergrund.

  • Data Binding (Color) möglich

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

    • Verwenden Sie keine Raute vor dem Farbwert.
    • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.
  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200
viewmodel

Pfad zu einer .viewmodel-Datei, in der Entitäten mit Eigenschaften aus einem Data Model Project referenziert sind. Für weitere Informationen zu Data Model Projects, siehe Data Model in einer Web App nutzen.

Die .viewmodel-Datei muss im Ordner ViewModels enthalten sein.

Pfadangabe relativ zum Ordner ViewModels.

Mögliche Werte: 

Zeichenkette (URI)

visible

Legt die Sichtbarkeit fest.

  • Data Binding (Boolean) möglich.

Mögliche Werte: Boolean oder Zeichenkette für Data Binding

Beispiel für eine Grid Component

XML 
<?xml version="1.0" encoding="UTF-8"?>
<GridComponent xmlns="http://softproject.de/webapp/1.0" process="loadGrid.wrf">
	<Properties>
		<Property name="list" type="Complex">
			<Property name="id" type="Integer" displayName="No." />
			<Property name="company" type="String" displayName="Company" />
		</Property>
	</Properties>
	<GridSettings>
		<Resize />
		<Reorder />
		<ColumnVisibility />
		<Filtering />
		<Multiselect checkboxSelection="true" />
		<Autoselection />
	</GridSettings>
	<GridColumns>
		<GridColumn value="#list.id" sortable="true" />
		<GridColumn value="#list.company" />
	</GridColumns>
</GridComponent>

Output-Format des Prozesses

Der im Beispiel genannte Technical Process loadGrid.wrf generiert folgenden Output:

XML 
<OkList>
   <list>
      <id>1</id>
      <company>Energy Station</company>
   </list>
   <list>
      <id>2</id>
      <company>Patrol Work</company>
   </list>
   <list>
      <id>3</id>
      <company>Brain Innovation</company>
   </list>
   <list>
      <id>4</id>
      <company>Solar It</company>
   </list>
   <list>
      <id>5</id>
      <company>OffGrid Promotion</company>
   </list>
   <list>
      <id>6</id>
      <company>SoftProject GmbH</company>
   </list>
   <list>
      <id>7</id>
      <company>SoftProject Ibérica SL</company>
   </list>
   <list>
      <id>8</id>
      <company>SP Digital AG</company>
   </list>
</OkList>

Grid Settings

Innerhalb des Elements GridSettings können die unten aufgelisteten Elemente deklariert werden, um das Verhalten der Grid Component festzulegen.

Mögliche Elemente

ElementBeschreibung
Appearance

Mit dem Element Appearance kann festgelegt werden. ob die Ränder in den Zeilen, Spalten und Zellen in der Grid Component verkleinert werden sollen, um mehr Daten auf einem Bildschirm anzeigen zu können.

Bei Verwendung des Elements Appearance kann das Attribut spacingMode gesetzt werden und folgende Werte enthalten.

Mögliche Werte:

  • Data Binding möglich
  • dense (Standard)
  • normal 

Hinweis

Wenn Sie das Attribut spacingMode deklarieren, ist dense der Standardwert. Wenn Sie das Element Appearance innerhalb des Elements GridSettings nicht setzen, wird das normale Aussehen der Grid Component beibehalten.

Autoselection

Das Element Autoselection legt fest, dass die erste Zeile der Tabelle automatisch ausgewählt wird, wenn die Grid Component geöffnet wird.

ColumnVisibility

Mit dem Element ColumnVisibility können einzelne Spalten ein- und ausgeblendet werden.

Editing

Das Element Editing hat nur eine Funktion, wenn im Element GridColumn das Attribut editable="true" gesetzt wurde.

Bei Verwendung des Elements Editing kann das Attribut reloadOnSave gesetzt werden und folgende Werte enthalten:

Mögliche Werte:

  • true: Beim Speichern mithilfe einer Save Action wird die Grid Component neu geladen.
  • false: Beim Speichern mithilfe einer Save Action wird die Grid Component nicht neu geladen.
Filtering

Mit dem Element Filtering können Bedingungen festgelegt werden, nach denen gefiltert werden soll.

Footer

Mit dem Element Footer können verschiedene Einstellungen für den Footer der Grid Component festgelegt werden.

Bei Verwendung des Elements Footer können folgende Attribute verwendet werden:

cleanupEnabled 
Legt fest, ob im Footer der Grid Component eine Schaltfläche zum Löschen von Einstellungen wie Spaltenbreite, Spaltensichtbarkeit, Filter- und Sortiereinstellungen angezeigt wird. Mit dieser Schaltfläche werden alle Einstellungen, die der Benutzer im Browser vorgenommen hat, aus dem lokalen Speicher des Browsers gelöscht, und die Grid Component wird wie in der .grid-Datei konfiguriert angezeigt.

Hinweis:

Erfahrene Benutzer können die Einstellungen alternativ wie folgt im Browser löschen:

  1. Öffnen Sie die Entwicklertools.
  2. Gehen Sie zu Anwendungen > Speicher > Lokaler Speicher.
  3. Löschen Sie die gespeicherten Einstellungen manuell.

  • Data Binding möglich

Mögliche Werte:

  • true (Standard): Die Schaltfläche zum Löschen der Einstellungen aus dem lokalen Browserspeicher wird angezeigt.
  • false: Die Schaltfläche zum Löschen der Einstellungen aus dem lokalen Browserspeicher wird nicht angezeigt.

pagingEnabled
Legt fest, ob im Footer der Grid Component die Elemente zum Blättern durch mehrere Seiten angezeigt werden.

  • Data Binding möglich

Mögliche Werte:

  • true (Standard): Die Elemente zum Blättern durch mehrere Seiten werden angezeigt.
  • false: Die Elemente zum Blättern durch mehrere Seiten werden nicht angezeigt.

Hinweis:

Wenn das serverseitige Paging aktiviert ist und pagingEnabled auf false gesetzt ist, wird der serverseitige Paging-Modus daktiviert, und clientseitige Filter können verwendet werden.

reloadEnabled
Legt fest, ob im Footer der Grid Component eine Schaltfläche zum erneuten Laden der Seite angezeigt wird.

  • Data Binding möglich

Mögliche Werte:

  • true (Standard): Die Schaltfläche zum erneuten Laden der Seite wird angezeigt.
  • false: Die Schaltfläche zum erneuten Laden der Seite wird nicht angezeigt.

Wenn alle drei Attribute auf true gesetzt sind, sieht der Footer der Grid Component wie folgt aus:


Hinweis:

Die Attribute cleanupEnabled, pagingEnabled und reloadEnabled werden auch dann standardmäßig auf true gesetzt, wenn in GridSettings kein Footer-Element deklariert wurde. Wenn alle drei Attribute auf false gesetzt werden, wird in der Grid Component kein Footer angezeigt. Das kann sinnvoll sein, um Bildschirmplatz einzusparen, wenn Sie keinen Footer benötigen.

GridHeader

Mit dem Element GridHeader kann die Ausrichtung  des Spaltentitels festgelegt werden.

Bei Verwendung des Elements GridHeader kann das Attribut horizontalAlign gesetzt werden und folgende Werte enthalten:

Mögliche Werte:

left (Standard): Der Spaltentitel wird linksbündig ausgerichtet.

center: Der Spaltentitel wird zentriert ausgerichtet.

right: Der Spaltentitel wird rechtsbündig ausgerichtet.

Multiselect

Mit dem Element Multiselect wird ermöglicht, dass mehrere Einträge gewählt werden können.

Bei Verwendung des Elements Multiselect kann das Attribut checkboxSelection gesetzt werden und folgende Werte enthalten:

Mögliche Werte:

true/false

Remember

Mit dem Element Remember kann die Einstellung für bestimmte Eigenschaften der Grid Component gespeichert werden. 

Bei Verwendung des Elements Remember können folgende Attribute verwendet werden:

rememberFiltering

Legt fest, ob die festgelegte Filtereinstellung gespeichert und beim nächsten Öffnen angewendet werden soll.

  • Data Binding möglich

Mögliche Werte:

  • true (Standard): Die festgelegte Einstellung wird gespeichert.
  • false: Die festgelegte Einstellung wird ignoriert.

rememberPage

Legt fest, ob die festgelegte Paginierungseinstellung gespeichert und beim nächsten Öffnen angewendet werden soll.

  • Data Binding möglich

Mögliche Werte:

  • true (Standard): Die festgelegte Einstellung wird gespeichert.
  • false: Die festgelegte Einstellung wird ignoriert.

rememberSelection

Legt fest, ob die für die Auswahl von Elementen in der Web App festgelegte Einstellung gespeichert und beim nächsten Öffnen angewendet werden soll.

Mögliche Werte:

  • true (Standard): Die festgelegte Einstellung wird gespeichert.
  • false: Die festgelegte Einstellung wird ignoriert.

rememberSorting

Legt fest, ob die festgelegte Sortiereinstellung gespeichert und beim nächsten Öffnen angewendet werden soll.

  • Data Binding möglich

Mögliche Werte:

  • true (Standard): Die festgelegte Einstellung wird gespeichert.
  • false: Die festgelegte Einstellung wird ignoriert.

rememberVisibility

Legt fest, ob die festgelegte Einstellung für die Sichtbarkeit gespeichert und beim nächsten Öffnen angewendet werden soll.

  • Data Binding möglich

Mögliche Werte:

  • true (Standard): Die festgelegte Einstellung wird gespeichert.
  • false: Die festgelegte Einstellung wird ignoriert.
Reorder

Mit dem Element Reorder können die Spaltenüberschriften angeklickt und per Drag&Drop an eine andere Position verschoben werden.

Resize

Mit dem Element Resize können die Übergänge der Spaltenüberschriften angeklickt und die Breite der jeweiligen Spalten mit gedrückter Maustaste verändert werden. 

RowSettings

Mit dem Element RowSettings werden die Zeilen innerhalb der Grid Component definiert. Innerhalb des Elements RowSettings kann das Element RowStyle deklariert werden, mit dem das Aussehen der Zeile definiert wird. Weitere Informationen finden Sie unter "Zeilen in der Grid Component definieren".


Zeilen in der Grid Component definieren

Innerhalb der Grid Component müssen die Zeilen über das Element RowSettings definiert werden. Mit dem in RowSettings enthaltenen Element RowStyle können Sie Farben für einzelne Zeilen festlegen.

Hinweis:

Wenn sich eine Zelle in einer Schnittmenge aus Zeile und Spalte befindet, für die Farben festgelegt wurden, haben die Spaltendefinitionen Vorrang.


Innerhalb des Elements RowSettings kann das Element RowStyle deklariert werden, das folgende Attribute haben kann:

AttributBeschreibung
background

Definiert eine Hintergrundfarbe.

  • Data Binding (Color) möglich

    Hinweis:

    Das Data Binding für dieses Attribut kann innerhalb der für die gesamte Grid Component gültigen Property vom Typ Complex definiert werden.

    Diese Einstellung überschreibt die Standardfarbe des Farbschemas.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

    • Verwenden Sie keine Raute vor dem Farbwert.
    • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.
  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200



fontFamily

Legt die Schriftfamilie innerhalb der Component fest. Die Eigenschaft wird an alle Controls und Actions der Component vererbt.

  • Data Binding (String) möglich

Mögliche Werte: Fontcode aus der Font-Palette, z. B. Font04

fontSize

Legt die Schriftgröße innerhalb der Component fest. Die Eigenschaft wird an alle Controls und Actions der Component vererbt.

  • Data Binding (String) möglich

Mögliche Werte:

  • Beliebige ganze Zahl oder Dezimalzahl mit einem Punkt als Dezimaltrennzeichen, z. B. 20; 20.8; .9
  • Schriftgröße in Pixel, z. B.  20px
  • Schriftgröße in Punkt, z. B. 18pt
  • Schriftgröße im Vergleich zur Schriftgröße des Elternelements, z. B. .8em  oder  120%
  • Schlüsselwörter:xx-Small, x-small, small, medium, large, x-large, xx-large, smaller, larger
fontStretch

Legt die Breite der einzelnen Schriftzeichen fest. Die Eigenschaft wird an alle Controls und Actions der Component vererbt.

  • Data Binding (String) möglich

Mögliche Werte:

  • Condensed
  • Expanded
  • ExtraCondensed
  • ExtraExpanded
  • Medium
  • Normal (Standard)
  • SemiCondensed
  • SemiExpanded
  • UltraCondensed
  • UltraExpanded
fontStyle

Legt die Neigung der Schrift fest. Die Eigenschaft wird an alle Controls und Actions der Component vererbt.

  • Data Binding (String) möglich

Mögliche Werte:

  • italic: kursive Schrift
  • normal: normale Schrift (Standard)
  • oblique: schräg gestellter Schriftstil (berechnet)
fontWeight

Legt die Schriftstärke fest. Die Eigenschaft wird an alle Controls und Actions der Component vererbt.

  • Data Binding (String) möglich

Mögliche Werte:

  • Black
  • Bold
  • DemiBold
  • ExtraBlack
  • ExtraBold
  • ExtraLight
  • Heavy
  • Light
  • Medium
  • Normal (Standard)
  • Regular
  • SemiBold
  • Thin
  • UltraBlack
  • UltraBold
  • UltraLight
foreground

Definiert die Schriftfarbe.

  • Data Binding (Color) möglich

    Hinweis:

    Das Data Binding für dieses Attribut kann innerhalb der für die gesamte Grid Component gültigen Property vom Typ Complex definiert werden.

Diese Einstellung überschreibt die Standardfarbe des Farbschemas.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

    • Verwenden Sie keine Raute vor dem Farbwert.
    • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.
  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200
highlightBackground

Definiert die Hintergrundfarbe der gewählten Zeile, wenn der Benutzer mit der Maus über die Zeile fährt.

  • Data Binding (Color) möglich

Hinweis:

Bitte beachten Sie, dass das Data Binding für dieses Attribut nicht innerhalb der für die gesamte Grid Component gültigen Property vom Typ Complex definiert werden kann, sondern dass eine eigene Property festgelegt werden muss.

Beispiel

XML 
<Properties>
		<Property name="list" type="Complex">
			<Property name="id" type="Integer" displayName="Nr." />
			<Property name="company" type="String"
				displayName="Unternehmen" />
		</Property>
		<Property name="Settings" type="Complex">
			<Property name="SelectedColor" type="Color" />
			<Property name="HighlightColor" type="Color" />
			<Property name="ColumnColor" type="Color" />
		</Property>
	</Properties>


Diese Einstellung überschreibt die Standardfarbe des Farbschemas.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

    • Verwenden Sie keine Raute vor dem Farbwert.
    • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.
  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200
highlightForeground

Definiert die Schriftfarbe der gewählten Zeile, wenn der Benutzer mit der Maus über die Zeile fährt.

  • Data Binding (Color) möglich

Hinweis:

Bitte beachten Sie, dass das Data Binding für dieses Attribut nicht innerhalb der für die gesamte Grid Component gültigen Property vom Typ Complex definiert werden kann, sondern dass eine eigene Property festgelegt werden muss.

Beispiel

XML 
<Properties>
		<Property name="list" type="Complex">
			<Property name="id" type="Integer" displayName="Nr." />
			<Property name="company" type="String"
				displayName="Unternehmen" />
		</Property>
		<Property name="Settings" type="Complex">
			<Property name="SelectedColor" type="Color" />
			<Property name="HighlightColor" type="Color" />
			<Property name="ColumnColor" type="Color" />
		</Property>
	</Properties>


Diese Einstellung überschreibt die Standardfarbe des Farbschemas.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

    • Verwenden Sie keine Raute vor dem Farbwert.
    • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.
  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200
selectedBackgroundColor

Definiert die Hintergrundfarbe der Zeile, wenn der Benutzer die Zeile per Mausklick auswählt.

  • Data Binding (Color) möglich

Hinweis:

Bitte beachten Sie, dass das Data Binding für dieses Attribut nicht innerhalb der für die gesamte Grid Component gültigen Property vom Typ Complex definiert werden kann, sondern dass eine eigene Property festgelegt werden muss.

Beispiel

XML 
<Properties>
		<Property name="list" type="Complex">
			<Property name="id" type="Integer" displayName="Nr." />
			<Property name="company" type="String"
				displayName="Unternehmen" />
		</Property>
		<Property name="Settings" type="Complex">
			<Property name="SelectedColor" type="Color" />
			<Property name="HighlightColor" type="Color" />
			<Property name="ColumnColor" type="Color" />
		</Property>
	</Properties>




Diese Einstellung überschreibt die Standardfarbe des Farbschemas.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

    • Verwenden Sie keine Raute vor dem Farbwert.
    • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.
  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200
selectedForegroundColor

Definiert die Schriftfarbe der Zeile, wenn der Benutzer die Zeile per Mausklick auswählt.

  • Data Binding (Color) möglich

Hinweis:

Bitte beachten Sie, dass das Data Binding für dieses Attribut nicht innerhalb der für die gesamte Grid Component gültigen Property vom Typ Complex definiert werden kann, sondern dass eine eigene Property festgelegt werden muss.

Beispiel

XML 
<Properties>
		<Property name="list" type="Complex">
			<Property name="id" type="Integer" displayName="Nr." />
			<Property name="company" type="String"
				displayName="Unternehmen" />
		</Property>
		<Property name="Settings" type="Complex">
			<Property name="SelectedColor" type="Color" />
			<Property name="HighlightColor" type="Color" />
			<Property name="ColumnColor" type="Color" />
		</Property>
	</Properties>


Diese Einstellung überschreibt die Standardfarbe des Farbschemas.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

    • Verwenden Sie keine Raute vor dem Farbwert.
    • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.
  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200


Spalten in der Grid Component definieren

Innerhalb der Grid Component müssen die Spalten über das Element GridColumn definiert werden. Alle Spalten müssen innerhalb von GridColumn-Elementen definiert werden.

Mögliche Attribute

AttributBeschreibung
displayName

Titel der Spalte.

  • Data Binding möglich

Mögliche Werte: beliebige Zeichenkette

Hinweis:

Bei sehr langen Spaltentiteln, die Sie über das Attribut displayName festlegen, können Sie wie folgt sicherstellen, dass der Spaltentitel umgebrochen wird:

  1. Fügen Sie im Element GridColumn das Element ColumnStyle hinzu.
  2. Deklarieren Sie im Element ColumnStyle das Attribut textOverflow mit dem Wert wordBreak. 
editable


Legt fest, ob die Inhalte der Spalte editierbar sind.

  • Data Binding möglich (mit Property vom Typ Boolean)

Mögliche Werte: true/false (Standard) oder Zeichenkette für Data Binding

filterable

Legt fest, ob der Inhalt der Spalte gefiltert werden kann.

Hinweis:

Das Attribut filterable hat nur dann eine Auswirkung, wenn das Element Filtering in den Grid Settings deklariert ist.

  • Data Binding möglich

Mögliche Werte: true (Standard)/false

format

Legt die Anzeige des Datumsformats mit Minuten, Sekunden oder Millisekunden fest.

Mögliche Werte:

  • Datetime with Minutes: Das Datum wird im Format hh:mm angegeben. (Standard)
  • Datetime with Seconds: Das Datum wird im Format hh:mm:ss angegeben.
  • Datetime with Milliseconds: Das Datum wird im Format hh:mm:ss.sss angegeben.
horizontalAlign

Legt die horizontale Ausrichtung des Inhalts innerhalb der Spalte fest.

Mögliche Werte:

  • left: Inhalt linksbündig
  • center: Inhalt zentriert
  • right: Inhalt rechtsbündig
order

Legt die Anordnung der Spalten fest.

  • Data Binding möglich (mit Property vom Typ Integer in dem Prozess, der die Grid-Daten lädt)

Mögliche Werte: ganze Zahlen ab 0 oder Zeichenkette für Data Binding

Hinweis:

Die Spalte mit der niedrigsten Zahl im Attribut order befindet sich ganz links, die Spalte mit der höchsten Zahl ganz rechts.

sortable

Legt fest, ob nach den Inhalten der Spalte sortiert werden kann. Weitere Informationen zum Sortieren von Spalteninhalten finden Sie im Abschnitt Sorting.

  • Data Binding möglich (mit Property vom Typ Boolean in dem Prozess, der die Grid-Daten lädt)

Mögliche Werte: true/false oder Zeichenkette für Data Binding

value

Legt den Inhalt der Spalte per Data Binding fest.

Mögliche Werte: Zeichenkette (Data Binding)

Wenn für die entsprechende Property kein Attribut displayName vergeben ist, dann wird als Spaltenüberschrift der Data-Binding-Ausdruck verwendet.

visible

Legt fest, ob die Spalte eingeblendet wird.

  • Data Binding möglich

Mögliche Werte: true (Standard)/false 

Grid Column

Innerhalb des Elements GridColumn können die unten aufgelisteten Elemente deklariert werden:

Mögliche Elemente

ElementBeschreibung
ColumnStyle

Definiert das Aussehen der Spalte.

MultiselectFilter

Filtert GridColumns nach mehreren Werten in Spalten. Wenn das Element MultiselectFilter gesetzt ist, kann keine weitere Filtermöglichkeit für diese Spalte gesetzt werden.

  • DataBinding möglich

Hinweis:

Wenn DataBinding verwendet wird, ist ein Element Property vom Typ list erforderlich. Zudem müssen die Attribute list und value gesetzt werden.

Für das Element MultiselectFilter können die unten aufgelisteten Attribute deklariert werden:

Mögliche Attribute

ElementBeschreibung
list

Legt den Inhalt der Spalte per Databinding fest. Im list-Element muss aus einem Property-Element das name-Attribut angegeben werden, dessen Daten angezeigt werden sollen.

Mögliche Werte: Zeichenkette (Data Binding)

value

Legt den Inhalt der Spalte per Data Binding fest.

Mögliche Werte: Zeichenkette (Data Binding)

Beispiel für <MultiselectFilter> ohne Data Binding

XML 
<?xml version="1.0" encoding="UTF-8"?>
<GridComponent xmlns="http://softproject.de/webapp/1.0"
	process="Grid.wrf">
	<Properties>
		<Property name="Entry" type="Complex">
			<Property name="Field" displayName="Field" type="String"></Property>
		</Property>
		<Property name="Filter" type="List">
			<Property name="Option" type="String"></Property>
		</Property>
	</Properties>
	<GridSettings>
		<Filtering />
	</GridSettings>
	<GridColumns>
		<GridColumn editable="false" value="#Entry.Field"
			sortable="true">
			<MultiselectFilter>
				<Option value="1" />
				<Option value="2" />
				<Option value="3" />
			</MultiselectFilter>
		</GridColumn>
	</GridColumns>
</GridComponent>

Beispiel für <MultiselectFilter> mit Data Binding

XML 
<?xml version="1.0" encoding="UTF-8"?>
<GridComponent xmlns="http://softproject.de/webapp/1.0"
	process="Grid.wrf">
	<Properties>
		<Property name="Entry" type="Complex">
			<Property name="Field" displayName="Field" type="String"></Property>
		</Property>
		<Property name="Filter" type="List">
			<Property name="Option" type="String"></Property>
		</Property>
	</Properties>
	<GridSettings>
		<Filtering />
	</GridSettings>
	<GridColumns>
		<GridColumn editable="false" value="#Entry.Field"
			sortable="true">
			<MultiselectFilter list="#Filter" value="#Option" />
		</GridColumn>
	</GridColumns>
</GridComponent>


Das Element <ColumnStyle> kann folgende Attribute besitzen:

AttributBeschreibung
background

Definiert eine Hintergrundfarbe.

  • Data Binding (Color) möglich

Hinweis:

Bitte beachten Sie, dass das Data Binding für dieses Attribut nicht innerhalb der für die gesamte Grid Component gültigen Property vom Typ Complex definiert werden kann, sondern dass eine eigene Property festgelegt werden muss.

Beispiel

XML 
<Properties>
		<Property name="list" type="Complex">
			<Property name="id" type="Integer" displayName="Nr." />
			<Property name="company" type="String"
				displayName="Unternehmen" />
		</Property>
		<Property name="Settings" type="Complex">
			<Property name="Background" type="Color" />
			<Property name="Foreground" type="Color" />
		</Property>
	</Properties>


Diese Einstellung überschreibt die Standardfarbe des Farbschemas.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

    • Verwenden Sie keine Raute vor dem Farbwert.
    • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.
  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200
fontFamily

Legt die Schriftfamilie innerhalb der Component fest. Die Eigenschaft wird an alle Controls und Actions der Component vererbt.

  • Data Binding (String) möglich

Mögliche Werte: Fontcode aus der Font-Palette, z. B. Font04

fontSize

Legt die Schriftgröße innerhalb der Component fest. Die Eigenschaft wird an alle Controls und Actions der Component vererbt.

  • Data Binding (String) möglich

Mögliche Werte:

  • Beliebige ganze Zahl oder Dezimalzahl mit einem Punkt als Dezimaltrennzeichen, z. B. 20; 20.8; .9
  • Schriftgröße in Pixel, z. B.  20px
  • Schriftgröße in Punkt, z. B. 18pt
  • Schriftgröße im Vergleich zur Schriftgröße des Elternelements, z. B. .8em  oder  120%
  • Schlüsselwörter:xx-Small, x-small, small, medium, large, x-large, xx-large, smaller, larger
fontStretch

Legt die Breite der einzelnen Schriftzeichen fest. Die Eigenschaft wird an alle Controls und Actions der Component vererbt.

  • Data Binding (String) möglich

Mögliche Werte:

  • Condensed
  • Expanded
  • ExtraCondensed
  • ExtraExpanded
  • Medium
  • Normal (Standard)
  • SemiCondensed
  • SemiExpanded
  • UltraCondensed
  • UltraExpanded
fontStyle

Legt die Neigung der Schrift fest. Die Eigenschaft wird an alle Controls und Actions der Component vererbt.

  • Data Binding (String) möglich

Mögliche Werte:

  • italic: kursive Schrift
  • normal: normale Schrift (Standard)
  • oblique: schräg gestellter Schriftstil (berechnet)
fontWeight

Legt die Schriftstärke fest. Die Eigenschaft wird an alle Controls und Actions der Component vererbt.

  • Data Binding (String) möglich

Mögliche Werte:

  • Black
  • Bold
  • DemiBold
  • ExtraBlack
  • ExtraBold
  • ExtraLight
  • Heavy
  • Light
  • Medium
  • Normal (Standard)
  • Regular
  • SemiBold
  • Thin
  • UltraBlack
  • UltraBold
  • UltraLight
foreground

Definiert die Schriftfarbe.

  • Data Binding (Color) möglich

Hinweis:

Bitte beachten Sie, dass das Data Binding für dieses Attribut nicht innerhalb der für die gesamte Grid Component gültigen Property vom Typ Complex definiert werden kann, sondern dass eine eigene Property festgelegt werden muss.

Beispiel

XML 
<Properties>
		<Property name="list" type="Complex">
			<Property name="id" type="Integer" displayName="Nr." />
			<Property name="company" type="String"
				displayName="Unternehmen" />
		</Property>
		<Property name="Settings" type="Complex">
			<Property name="Background" type="Color" />
			<Property name="Foreground" type="Color" />
		</Property>
	</Properties>


Diese Einstellung überschreibt die Standardfarbe des Farbschemas.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

    • Verwenden Sie keine Raute vor dem Farbwert.
    • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.
  • Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. A200
textOverflow

Gibt an, was passieren soll, wenn überlaufende Texte nicht angezeigt werden können.

Mögliche Werte:

  • ellipsis: Mit ... zeigen, dass der Text nicht zu Ende ist. Ein Textumbruch wird verhindert.
  • hidden: (Standard, wenn layout="optimized") Text abbrechen, auf ganze Wörter achten. Ein Textumbruch wird verhindert. 
  • wordBreak: (Standard, wenn layout="fixed") Innerhalb des Wortes umbrechen 
  • allow: Text zwischen Wörtern umbrechen
width

Legt die Spaltenbreite fest.

Mögliche Werte:

  • Ganze Zahlen

Die Einheit, in der die Spaltenbreite angegeben wird, wird mit dem Attribut widthUnits festgelegt.

widthUnits

Legt die Einheit fest, in der die Spaltenbreite width angegeben wird.

Mögliche Werte:

  • pixels: Die Spaltenbreite wird in Pixeln angegeben.
  • percents: Die Spaltenbreite wird in Prozent angegeben.

Periodisches Neuladen

Über das Element ReloadTimer lässt sich die Grid Component periodisch neu laden.

Das periodische Neuladen von Daten kann eine hohe Last verursachen und sollte nur in seltenen Anwendungsfällen verwendet werden.

Mögliche Attribute

AttributBeschreibung
refreshTime

Zeit bis zum erneuten Laden in Sekunden

  • Data Binding (Integer) möglich

Mögliche Werte: Beliebige ganze Zahl

itemIdentifier

Optional; Eindeutiger Schlüssel für die in den Zeilen dargestellten Daten 

  • Über das Attribut lassen sich Zeilen beim Neuladen wiederfinden und der Neuladeprozess wird verbessert.
  • Wird das Attribut nicht angegeben wird ein Stringvergleich auf ein Datensatz verwendet, um die Zeile zu identifizieren.

Mögliche Werte: Data Binding an eine definierte Property der Grid Component

<SelectAction> innerhalb der Grid Component

Die Action Select wird über das Element <SelectAction/> innerhalb von <Actions> erzeugt und wird ausgelöst, wenn ein Benutzer einen Eintrag aus einer Grid Component auswählt.

<DoubleClickAction> innerhalb der Grid Component

Die Action DoubleClick wird über das Element <DoubleClickAction/> innerhalb von <Actions> erzeugt und wird ausgelöst, wenn ein Benutzer auf einen Eintrag aus einer Grid Component doppelklickt.

Hinweis:

Wenn das Attribut Editing im Element GridSettings und das Attribut editable im Element GridColumn auf true gesetzt sind, hat die Action DoubleClick keine Auswirkung.

<SaveAction> innerhalb der Grid Component

Die Action Save wird über das Element <SaveAction/>  innerhalb von <Actions> erzeugt. Mit der Action Save werden eingegebene Daten gespeichert. Der Status ist abhängig vom Validierungsstatus.

Hinweis:

Wenn die Action Save definiert ist, erhält der Technical Process die Datenobjekte der bearbeiteten Zeilen mit einem neuen Indexattribut, das den Index einer Zeile enthält. Die Nummerierung beginnt bei 0.




JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close