Configuring and Inserting the List Component

In this step, you reference the newly created Technical Process in the List component and configure the display of the data.

To do this, insert a property in the <Properties/> area for each XML element previously created in the mapping. You then define the columns of the list to display in the <Columns/> area.

Then you reference the newly built List component in the WAD file of your Web App. This file contains the definition of your Web App, is created automatically when a Web App Project is created and cannot be deleted. Here, you add new modules or components to your Web App.

You can use the CTRL+SPACE key combination to display available elements and parameters in the editor.

Referencing the process

1. Open the Customer_list.list component in the editor.

2. Add the value process="<process_name>.wrf" to the second line of the component:

   CODE

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

You can also drag and drop the corresponding Technical Process between the quotation marks.

3. Click Save.

Inserting properties

1. In the <Properties/> area, insert a property of the Complex type for the Customer element:

   CODE

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

2. Within the Customer property, insert additional properties of the String type for all other subordinate XML elements:

   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. Click Save.

Defining columns

1. In the <Columns/> area, create a column for each property of the Customer property:

   CODE

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

2. Use the displayName attribute to specify the names of the columns to display:

   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. Click Save.

Inserting the List component into the Web App

1. Open the WAD file of your Web App.

2. In the <Components/> area, insert a new <ComponentReference/> with the following values:

   CODE

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

3. Click Save.