List Component konfigurieren und einfügen

In diesem Schritt referenzieren Sie den neu angelegten Technical Process in der List Component und konfigurieren die Darstellung der Daten.

Dafür fügen Sie im Bereich <Properties/> für jedes zuvor im Mapping angelegte XML-Element eine Property ein. Anschließend definieren Sie die Spalten der anzuzeigenden Liste im Bereich <Columns/>.

Danach referenzieren Sie die neu gebaute List Component in der WAD-Datei Ihrer Web App. Diese Datei enthält die Definition Ihrer Web App, wird beim Anlegen eines Web App Projects automatisch angelegt und kann nicht gelöscht werden. Hier fügen Sie neue Module oder Komponenten zu Ihrer Web App hinzu.

Mithilfe der Tastenkombination STRG+LEERTASTE können Sie sich im Editor verfügbare Elemente und Parameter anzeigen lassen.

Prozess referenzieren

1. Öffnen Sie die Component Customer_list.list im Editor.

2. Ergänzen Sie die zweite Zeile der Component um den Wert process="<process_name>.wrf":

   CODE

   <?xml version="1.0" encoding="UTF-8"?>
   <ListComponent xmlns="http://softproject.de/webapp/1.0" process="ProcessWebApp.wrf">

Sie können den entsprechenden Technical Process auch mittels Drag und Drop zwischen die Anführungszeichen ziehen.

3. Klicken Sie auf Speichern.

Properties einfügen

1. Fügen Sie im Bereich <Properties/> für das Element Customer eine Property vom Typ Complex ein:

   CODE

   <Properties>
   		<Property name=Customer type="Complex"></Property>
   </Properties>

2. Fügen Sie innerhalb der Property Customer weitere Properties vom Typ String für alle weiteren untergeordneten XML-Elemente ein:

   CODE

   <Properties>
   	<Property name="Customer" type="Complex">
   		<Property name="Vorname" type="String"></Property>
   		<Property name="Nachname" type="String"></Property>
   		<Property name="Firma" type="String"></Property>
   		<Property name="Adresse" type="String"></Property>
   	</Property>
   </Properties>	

3. Klicken Sie auf Speichern.

Spalten festlegen

1. Legen Sie im Bereich <Columns/> eine Spalte für jede Property der Property Customer an:

   CODE

   <Columns>
   	<Column value="#Customer.Vorname"></Column>
   	<Column value="#Customer.Nachname"></Column>
   	<Column value="#Customer.Firma"></Column>
   	<Column value="#Customer.Adresse"></Column>
   </Columns>

2. Legen Sie mithilfe des Attributs displayName die anzuzeigenden Namen der Spalten fest:

   CODE

   <Columns>
   	<Column value="#Customer.Vorname" displayName="Vorname"></Column>
   	<Column value="#Customer.Nachname" displayName="Nachname"></Column>
   	<Column value="#Customer.Firma" displayName="Firma"></Column>
   	<Column value="#Customer.Adresse" displayName="Adresse"></Column>
   </Columns>

3. Klicken Sie auf Speichern.

List Component in Web App einfügen

1. Öffnen Sie die WAD-Datei Ihrer Web App.

2. Fügen Sie im Bereich <Components/> eine neue <ComponentReference/> mit den folgenden Werten ein:

   CODE

   <ComponentReference source="<Name der Component>.grid" path="Customers" displayName="Customers" default="false"/>	 

3. Klicken Sie auf Speichern.