Referencing Components in the Web App Definition

Each individual Component used in the Web App is declared in a separate definition. These individual definitions are then referenced in the Web App Definition via the <ComponentReference> element.

Within the <ComponentReference> further <Components> with their respective references (<ComponentReference>) can be contained. This way a hierarchical navigation can be implemented.

The <ComponentReference> element has the following attributes:

Attribute	Description
`default`	Required for exactly one component. Defines which component is displayed first ("Home"). Possible values: `true` / `false`
`displayName`	Display name of the component in the menu. Possible values: Any string with the display name of the component
`fontFamily`	Defines the font family within the component. The property is inherited by all controls and actions of the component. Possible values: Font code from the font palette, e.g. `Font04`
`fontSize`	Defines the font size within the component. The property is inherited by all controls and actions of the component. Possible values: Font size in pixels, e.g. `20px` Font size in point, e.g. `18pt` Font size compared to the font size of the parent element, e.g. `.8em` or `120%` Key words, e.g. `small` or `larger`
`fontStretch`	Defines the width of each character. The property is inherited by all controls and actions of the component. Possible values: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (default) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded`
`fontStyle`	Defines the slant of the font. The property is inherited by all controls and actions of the component. Possible values: `italic`: italic font `normal`: normal font (default) `oblique`: oblique font style (calculated)
`fontWeight`	Defines the font weight. The property is inherited by all controls and actions of the component. Possible values: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (default) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight`
`iconUrl`	Path to the image file or specification of a Material Icon that will be used as the component's icon. The image file must be contained in the `Resources` folder directly below the Web App project. Path specification relative to the `Resources` folder. The material icon must be specified with the prefix `icon`, e.g. `icon:<MaterialIconName>`. Possible values: String (URI), e.g. `clock.png` `icon:<MaterialIconName>` , e.g. `icon:extension` With `Ctrl`+`Space` you get an overview of the available icons. The selection may differ from the actual available Material Icons.
`iconColor`	Defines the color of the component's icon. This setting overwrites the default color of the color scheme! Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value or a shortened notation of the color value! Colour code from the colour palette of the web app (cf. Theming), e.g. `A200`
`name`	Unique name of the Component. Possible values: Any string with the name of the Component
`path`	Required. Unique URL of the component, visible in the browser address bar. Possible values: String of alphanumeric characters (no umlauts, dots, etc.)
`showInMenu`	Defines if the component is shown in the menu. This attribute has no effect on a Master/Detail Component. Possible values: `true` (default) / `false` This setting affects also all subcomponents. If no component is displayed in the menu, the entire menu is hidden. The content area then extends across the entire width.
`source`	Path to the definition file relative to the `Components` folder. Possible values: String (URI)
`title`	Title of the component. Displayed as header in the component. Data Binding possible Possible values: Any string with the title of the component
`titleBackground`	Defines a title background color. Possible values: Hexadecimal colour value, e.g. `ff5a00` Do not use a hash before the colour value and do not use a shortened notation of the colour value! Colour code from the colour palette of the web app (cf. Theming), e.g. `A200`
`titleForeground`	Defines a color for the title foreground. Possible values: Hexadecimal colour value, e.g. `ff5a00` Do not use a hash before the colour value and do not use a shortened notation of the colour value! Colour code from the colour palette of the web app (cf. Theming), e.g. `A200`

Example

XML

<?xml version="1.0" encoding="UTF-8"?>
<WebApp xmlns="http://softproject.de/webapp/1.0"
        path="SimpleCRM">
	<Translations>
		<Translation displayName="Deutsch" name="de"/>
		<Translation displayName="English" name="en"/>
	</Translations>
	<Modules>
		<Module displayName="My Module" path="Module">
			<Components>
				<ComponentReference default="true" displayName="$Customers" 
                     iconUrl="logo.png" name="Home"
                     path="Home" source="Customer/Customer.masterdetail"/>
				<ComponentReference displayName="Statistik" iconUrl="Statistic.png" 
                     path="Statistic" source="Statistic/Statistic.detail"/>
				<ComponentReference displayName="$Administration" iconUrl="Gear.png" 
                     path="Administration" source="Administration/Administration.detail">
				  <Components>
						<ComponentReference displayName="$Country" iconUrl="Country.png" 
                             name="Countries" path="Country"
                             source="Administration/Country/Country.masterdetail"/>
						<ComponentReference displayName="$Category" iconUrl="Category.png" 
                             name="Categories" path="Category"
                             source="Administration/Category/Category.masterdetail"/>
						<ComponentReference displayName="$LegalForm" iconUrl="LegalForm.png" 
                             name="LegalForm" path="LegalForm"
                             source="Administration/LegalForm/LegalForm.masterdetail"/>
						<ComponentReference displayName="$Event" iconUrl="Event.png" 
                             name="Event" path="Event"
                             source="Administration/Event/Event.masterdetail"/>
				 </Components>
			    </ComponentReference>	
		   </Components>
		</Module>
	 </Modules>
</WebApp>