Skip to main content
Skip table of contents

ListView

ListView-Controls werden verwendet, um Datenobjekte (einfach oder komplex) aus Listen darzustellen. Wie ein einzelnes Objekt dargestellt wird, wird als Elementvorlage definiert. Dazu wird die Darstellung innerhalb eines Layouts (Flow- oder Grid-Layout) definiert. Diese Darstellung wird für jedes einzelne Objekt übernommen. Da die Datenobjekte, die dargestellt werden sollen, von einem Technical Process geliefert werden, muss in der Component, die die ListView enthält, ein entsprechender Technical Process definiert sein.

AttributBeschreibung
elementWidth

Gibt die Breite eines Elements (entspricht einem Listeneintrag in der XML-Datei) an.

Mögliche Werte: Ganzzahl

elementWidthUnits

Gibt die Einheit an, die für Größenangabe des Elements gilt.

Mögliche Werte:

  • pixels
  • percents (Standard)
maxLength

Gibt an, wie viele Einträge maximal angezeigt werden. Sind in der Liste mehr Einträge vorhanden, kann sich der Benutzer diese über einen Ausklapp-Pfeil anzeigen lassen.

Mögliche Werte: Ganzzahl

objectList

Erforderlich. Quelle der Daten. Die Anzahl der Einträge definiert die Anzahl der angezeigten Elemente.

  • Data Binding (Liste) möglich

Mögliche Werte: Beliebige Zeichenkette

background
Definiert eine Farbe für den Hintergrund des Controls.


  • Diese Einstellung überschreibt die Standardfarbe des Farbschemas!
  • Dieses Attribut funktioniert nicht für die Controls Maps und HtmlDocument!

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
enabled

Legt fest, ob der Nutzer mit dem Control interagieren kann.

  • Data Binding (Boolean) möglich

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

Das Attribut enabled ersetzt das veraltete Attribut disabled. enabled="true" entspricht damit dem veralteten Attribut disabled="false" .
fontFamily

Legt die Schriftfamilie fest. 

  • Mit diesem Attribut wird die Standardschrift der Web App für dieses Control überschrieben.
  • Wird das Attribut auf einem Element definiert, so wird die Schriftfamilie an die Kindelemente des Elementes vererbt, sofern die Kindelemente das Attribut fontFamily nicht explizit gesetzt haben.
  • Dieses Attribut funktioniert nicht für die Elemente ImageMap und HtmlDocument.

Mögliche Werte:

  • MainFont: hinterlegte Hauptschrift
  • Fontcode aus der Font-Palette, z. B.  Font04
fontSize

Legt die Schriftgröße fest.

  • Mit diesem Attribut wird die Standardschriftgröße der Web App für dieses Control überschrieben.
  • Dieses Attribut funktioniert nicht für die Elemente ImageMap und HtmlDocument.

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.

Mit diesem Attribut wird die Standardbreite der Schriftzeichen für dieses Control überschrieben.

Mögliche Werte:

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


Dieses Attribut funktioniert nicht für die Elemente ImageMapChart und HtmlDocument .

fontStyle

Legt die Neigung der Schrift fest.

Mit diesem Attribut wird die Standardneigung der Schriftzeichen für dieses Control überschrieben.

Mögliche Werte:

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


Dieses Attribut funktioniert nicht für die Elemente ImageMap und HtmlDocument.

fontWeight

Legt die Schriftstärke fest. 

Mit diesem Attribut wird die Standardstärke der Schriftzeichen für dieses Control überschrieben.

Mögliche Werte:

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


Dieses Attribut funktioniert nicht für die Elemente ImageMap und HtmlDocument.

foreground

Definiert eine Farbe für den Vordergrund (Texte usw.) des Controls.

  • Diese Einstellung überschreibt die Standardfarbe des Farbschemas!
  • Dieses Attribut funktioniert nicht für die Controls Map und HtmlDocument!

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
horizontalAlign

Richtung, in die die Elemente fließen. Reihenfolge der Elemente entspricht ihrer Deklaration.

Mögliche Werte:

  • left (Standard)
  • center
  • right
visible

Legt fest, ob das Control sichtbar ist.

  • Data Binding (Boolean) möglich

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

<SelectAction> innerhalb eines ListView-Controls

Die Action Select wird über das Element <SelectAction/> innerhalb von <ListView> erzeugt und ausgelöst, sobald der Benutzer einen Eintrag in der Listenansicht auswählt.

Hinweis:

Das ausgewählte Element wird im Output mit dem Attribut selected="true" gekennzeichnet.

<DoubleclickAction> innerhalb eines ListView-Controls

Die Action DoubleClick wird über das Element <DoubleClickAction/> innerhalb von <ListView> erzeugt und ausgelöst, sobald der Benutzer auf einen Eintrag in der Listenansicht doppelklickt.

Beispiele

Liste ohne Aktionen

Input

XML
<DetailComponent name="ExampleListView" path="ExampleListView" displayName="Example ListView" process="example.wrf">
	<Properties>
		<Property name="ListObject" type="List">
			<Property name="Caption" type="String" />
			<Property name="Name" type="String" />
			<Property name="City" type="String" />
		</Property>
	</Properties>
	<FlowLayout>
		<ListView objectList="#ListObject">
			<FlowLayout>
				<Label value="#Caption"/>
				<Label value="#Name"/>
				<Label value="#City"/>
			</FlowLayout>
		</ListView>						
	</FlowLayout>
</DetailComponent>

Output

Die Daten, die vom Technical Process geliefert werden, haben folgendes Format:

XML
<?xml version="1.0" encoding="UTF-8" ?>
<Ok>
	<ListObject>
		<Caption>Example 1</Caption>
		<Name>Max Mustermann</Name>
		<City>Ettlingen</City>
	</ListObject>
	<ListObject>
		<Caption>Example 2</Caption>
		<Name>John Doe</Name>
		<City>New York</City>
	</ListObject>
	<ListObject>
		<Caption>Example 3</Caption>
		<Name>Kari Nordmann</Name>
		<City>Oslo</City>
	</ListObject>
	...
</Ok>

Obiger Code erzeugt folgende ListView:

Liste mit Aktionen

Input

XML
<DetailComponent
	path="Dashboard"
	displayName="Dashboard"
	process="DataInput.wrf"
	default="true">
	<Properties>
		<Property
			name="ListObject"
			type="List">
			<Property
				name="name"
				type="String" />
		</Property>
	</Properties>
	<FlowLayout>
		<ListView objectList="#ListObject">
			<SelectAction process="Response.wrf" />
			<FlowLayout>
				<TextBox value="#name" />
			</FlowLayout>
		</ListView>
	</FlowLayout>
</DetailComponent>

Output

Die Daten, die vom Technical Process geliefert werden, haben folgendes Format:

Das ausgewählte Element wird im Output mit dem Attribut selected="true" gekennzeichnet.

Damit alle Einträge der ListView vollständig gelöscht werden können, muss im Output das Attribut empty="true" gesetzt werden.

XML
<?xml version="1.0" encoding="UTF-8"?>
<Action>
   <ListObject selected="true">
      <name>Ettlingen</name>
   </ListObject>
   <ListObject>
      <name>New York</name>
   </ListObject>
   <ListObject>
      <name>Oslo</name>
   </ListObject>
</Action>
JavaScript errors detected

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

If this problem persists, please contact our support.