Customizing von Seiten

Seiten ausblenden

Reihenfolge der Seiten ändern

Felder und andere Elemente auf einer Seite ändern

Die verschiedenen Layout-Möglichkeiten

Eine Combobox auf einer Seite anpassen
Felder auf eine andere Seite verschieben

Zusatzfelder in den Seiten platzieren
Stichwörter in den Seiten platzieren
Eigene Seiten erstellen
Scroll-Kopplung mehrerer UI Controls
Customizing von Tabellen-Zeilen
Einen Script Button einfügen

Seiten ausblenden

Seiten, die Sie nicht benötigen, können Sie einfach ausblenden. Als Beispiel entfernen wir die Seite Budget auf dem Projekt. In den Klasseneinstellungen Projekt suchen wir in der eingebauten Seite nach der Budget-Seite, um den Namen herauszufinden.

Hier sehen wir: Die Seite heisst ProjectBudget. Um diese auszublenden, stellen wir die Eigenschaft Visible auf False.

Wir stellen um auf den Reiter Anpassung und geben folgenden Code ein:

<Page Override="ProjectBudget" Visible="False" />

Damit wird die Seite nicht mehr angezeigt.

Anzeige an eine Bedingung knüpfen

Soll die Seite nicht immer, sondern nur unter gewissen Bedingungen ausgeblendet werden, kann dies mit der Eigenschaft VisibleExpression gesteuert werden.

Als Beispiel möchten wir, dass die Adress-Seite für den Projektleiter sichtbar ist. Wir setzen also in der obigen Expression nicht die Eigenschaft Visible, sondern geben als VisibleExpression eine OCL-Expression an:

<Page Override="ProjectBudget" VisibleExpression="(projektleiter = Timsession.allInstances->first.login)" />

Das Ergebnis der OCL-Expression muss ein Boolean (Wahr/Falsch) sein. Ist das Resultat Wahr, wird die Seite angezeigt.

Reihenfolge der Seiten ändern

Die Reihenfolge der Seiten kann ebenfalls umgestellt werden. Es gibt dafür folgende beiden Eigenschaften

  • PlaceBefore="PageName": Damit wird angegeben, vor welcher Seite die aktuelle Seite dargestellt werden soll. Die Seite wird mit dem Namen angegeben.
  • PlaceAfter="PageName": Damit wird angegeben, nach welcher Seite die aktuelle Seite dargestellt werden soll. Die Seite wird mit dem Namen angegeben.

Als Beispiel möchten wir die Seite Adressen auf dem Projekt direkt nach der Hauptseite anzeigen.

Wir suchen im eingebauten Code nach dem Namen der Adress-Seite und finden: ProjectAddress. Weiter müssen wir den Namen der Seite suchen, vor oder nach der wir die Seite einfügen wollen: Project oder ProjectFurtherInfo.

Der Code für die Umplatzierung lautet also:

<Page Override="ProjectAddress" PlaceAfter="Project" />

Oder alternativ:

<Page Override="ProjectAddress" PlaceBefore="ProjectFurtherInfo" />

Felder und andere Elemente auf einer Seite ändern

Die einzelnen Felder (und anderen Elemente wie Beschriftungen, Linien etc.) können abgeändert, verschoben, im Layout angepasst oder ausgeblendet werden. Wird ein Element einer Seite geändert, dann muss die Seite selbst überschrieben werden. Das heisst, eine Änderung findet immer innerhalb der Seite statt:

<Page Override="Project">
Hier werden die Elemente der Seite 'Project' angepasst.
</Page>

Werden mehrere Elemente einer Seite überschrieben, dann fügt man das alles in den gleichen Rahmen ein:

<Page Override="Project">
<Group Override="AttributionGroup" Header="Zuständigkeiten" />
<TextArea Override="Remarks" Lines="4" />
</Page>

Hier nachfolgend ein paar exemplarische Beispiele:

Eine Beschriftung ändern

Als Beispiel nehmen wir auf der Projekt Hauptseite die Überschrift Zuweisung. Diese möchten wir ändern in Zuständigkeiten.

Wir haben nun zwei Möglichkeiten: Entweder wir benennen den Begriff Attribution in unserer kundenspezifischen Übersetzungsdatei um, oder wir überschreiben es direkt in den Klasseneinstellungen:

<Page Override="Project">
<Group Override="AttributionGroup" Header="Zuständigkeiten" />
</Page>

Aussehen eines Feldes verändern

Als Beispiel möchten wir das Textfeld für die Bemerkungen kleiner machen und reduzieren die Anzahl Linien von 8 auf 4:

<Page Override="Project">
<TextArea Override="Remarks" Lines="4" />
</Page>

Einen Tooltipp bei einem Feld einblenden

Mit dem Attribut Help kann ein Hilfetext als Tooltipp angezeigt werden. Als Beispiel fügen wir im Bemerkungsfeld, das wir vorher reduziert haben, einen Tooltipp ein:

<TextArea Override="Remarks" Lines="4" Help="Hier die Bemerkungen eintragen"/>

Wird der Mauszeiger auf dem Feld platziert, erscheint der Tooltipp:

Ausblenden von nicht benötigten Feldern

Felder, die Sie in Ihrer Firma nicht benötigen, können Sie nun von den Seiten entfernen. Im Beispiel blenden wir das Feld Beschreibung aus.

<Page Override="Project">
<TextArea Override="Description" Visible="False" />
</Page>

Elemente verschieben

Man kann die Felder mit PlaceBefore / PlaceAfter (siehe oben) auch an einem anderen Ort anzeigen. Als Beispiel wird der Projekttyp direkt nach dem Projektcode angezeigt:

<Page Override="Project">
<ComboBox Override="ProjectType" PlaceAfter="ProjectCode" />
</Page>

Die verschiedenen Layout Möglichkeiten

Wenn wir die Anpassung aus obigem Abschnitt Elemente verschieben gemacht haben, dann sieht das auf der Oberfläche nun so aus: Der Platz wurde standardmässig gedrittelt, weil es drei Elemente hat:

FlexWidth

Diese Aufteilung kann man beeinflussen mit der Eigenschaft FlexWidth. Diese bestimmt den Anteil, den ein Element innerhalb des gesamthaft zur Verfügung stehenden Platzes einnimmt. Die möglichen Werte sind 1 (Standard) bis 100. Wird FlexWidth auf "0" gesetzt, berechnet das Element die benötigte Breite selber. Das ist dann sinnvoll, wenn man mehrere Textfelder hintereinander hat und nicht weiss, wie breit die einzelnen Textteile sind.

In unserem Beispiel verbreitern wir die beiden Elemente Projektcode und Projekttyp . Wir setzen die FlexWidth der beiden Elemente auf 2. Dadurch erreichen wir eine Aufteilung des Platzes in 2+2+1.

<Page Override="Project">
<ComboBox Override="ProjectType" PlaceAfter="ProjectCode" FlexWidth="2" />
<ComboBox Override="ProjectCode" FlexWidth="2" />
</Page>

Nun sieht es so aus:

LabelWidth

Die einzelnen Elemente bestehen aus einem Label und einem Edit- bzw. Input-Feld. Das Label hat eine Standardbreite von 105:



Diese Breite kann man Beeinflussen mit der Eigenschaft LabelWidth: Wird das LabelWidth gesetzt, verbreitert oder verschmälert sich das dazugehörende Edit- bzw. Input-Feld entsprechend.

Als Beispiel hätten wir gerne ein etwas grösseres Feld bei Projekttyp. Darum setzen wir hier die LabelWidth auf 80:

<Page Override="Project">
<ComboBox Override="ProjectType" PlaceAfter="ProjectCode" FlexWidth="2" LabelWidth="80" />
<ComboBox Override="ProjectCode" FlexWidth="2" />
</Page>

Nun sieht das so aus:



Die Eigenschaft LabelWidth erbt von den übergeordneten Elementen. Möchte man alle Labels einer Gruppe breiter oder schmaler machen, setzt man die Eigenschaft LabelWidth direkt auf der Gruppe.

Möchte man alle Labels einer Seite breiter oder schmaler machen, setzt man die Eigenschaft LabelWidth direkt auf der Seite.

WidthFraction

Mit der Eigenschaft WidthFraction wird angegeben, welchen Faktor das Element von der verfügbaren Breite nutzen soll. Mögliche Werte sind 0 bis 1 (Standard). Soll ein Element z.B. nur die Hälfte der Breite nutzen, erreicht man das wie folgt:

<TextBox WidthFraction="0.5" />

Als Beispiel nehmen wir das Feld Rechnungsintervall auf der Projekt-Seite. Dieses Feld nimmt nun die ganze Breite ein, da wir das Feld Projekttyp verschoben haben:



Es soll gleich aussehen wie die Felder unterhalb (Tarifstufe, MwSt etc.), darum setzen wir die WidthFraction auf 0.5:

<Page Override="Project">
<ComboBox Override="ProjectType" PlaceAfter="ProjectCode" FlexWidth="2" LabelWidth="80" />
<ComboBox Override="ProjectCode" FlexWidth="2" />
<ComboBox Override="InvoicePeriod" WidthFraction="0.5" />
</Page>

Nun sieht es so aus:

Gruppieren

Dadurch, dass man Elemente in einer Gruppe zusammenfasst, können diese horizontal oder vertikal gleichmässig angeordnet werden.

<Group>
....
</Group>

Eine Gruppe bietet folgende Funktionen an:

  • Orientation: Horizontale/Vertikale Anordnung (Standard=Horizontal)
  • Setzen eines Gruppentitels (Attribut Header)
  • Bestimmen der Standardbreite der Labels (LabelWidth, siehe Abschnitt weiter oben)

Eine Gruppe hat noch viel mehr Eigenschaften, die gesetzt werden können. Eine Auflistung aller Möglichkeiten finden Sie hier.

Gruppen können ineinander verschachtelt werden.

Beispiel einer Gruppe (Standardlayout)

<Group Header="Gruppentitel">
<TextBox Label="Text 1"/>
<TextBox Label="Text 2" />
</Group>

Gruppe mit Ausrichtung Vertical

<Group Header="Gruppentitel"
Orientation="Vertical">
<TextBox Label="Text 1"/>
<TextBox Label="Text 2" />
</Group>

Zwei Gruppen in einer (verschachtelte Gruppen)

<Group Header="Gruppentitel"
Orientation="Vertical">
<Group>
<TextBox Label="Text 1"/>
<TextBox Label="Text 2" />
</Group>
<Group>
<TextBox Label="Text 3"/>
<TextBox Label="Text 4" />
</Group>
</Group>

Eine Untergruppe Horizontal, eine Vertikal

<Group Header="Gruppentitel"
Orientation="Vertical">
<Group Orientation="Vertical">
<TextBox Label="Text 1"/>
<TextBox Label="Text 2" />
</Group>
<Group>
<TextBox Label="Text 3"/>
<TextBox Label="Text 4" />
</Group>
</Group>

Eine Untergruppe mit Gruppentitel

<Group Header="Gruppentitel"
Orientation="Vertical">
<Group Orientation="Vertical">
<TextBox Label="Text 1"/>
<TextBox Label="Text 2" />
</Group>
<Group Header="Gruppentitel">
<TextBox Label="Text 3"/>
<TextBox Label="Text 4" />
</Group>
</Group>

Eine Combobox auf einer Seite anpassen

Comboboxen auf den Seiten werden wie die Comboboxen in den Listeneinstellungen angepasst. Es gelten dieselben Konventionen und Eigenschaften.

Als Beispiel passen wir die Combobox Projekt auf der Leistung an. Das geschieht in den Klasseneinstellungen der Klasse OffeneLeistung. Die Combobox soll gleich aussehen wie die im Beispiel in den Listeneinstellungen. Darum können wir den Code aus dem Feld Steuerelement XML 1:1 in die Klasseneinstellungen kopieren und passen nur den Namen der Combobox entsprechend an:

<Page Override="Service">
<ComboBox Override="Project">
<ComboBox.ColumnDefinitions>
<ColumnDefinition Override="Code" Width="150" />
<ColumnDefinition Override="Regarding" PlaceAfter="Code" />
<ColumnDefinition Width="110" Expression="projektleiter" />
</ComboBox.ColumnDefinitions>
</ComboBox>
</Page>

Felder auf eine andere Seite verschieben

Ein Feld kann auch auf einer anderen Seite dargestellt werden. Das geschieht in zwei Schritten:

  1. Das Feld wird auf der gewünschten Seite neu erstellt mit allen benötigten Eigenschaften. Damit ist es aber am ursprünglichen Platz nicht verschwunden, sondern wird an beiden Orten dargestellt.
  2. Falls das Feld am ursprünglichen Platz nicht mehr angezeigt werden soll, muss es ausgeblendet werden.

Als Beispiel möchten wir die Felder der Gruppe Leistungen der Seite Vorgaben auf die Hauptseite verschieben:

Dafür wird diese Gruppe samt Feldern auf der Hauptseite (Project) neu erstellt. Der Code kann dafür vom Original übernommen werden:

Wir kopieren den ganzen Text und fügen ihn im Reiter Anpassung wieder ein, und zwar innerhalb der <Page Override="Project"> </Page> Tags:

Die Vorgabengruppe "Leistungen" wird jetzt auf der Hauptseite dargestellt:

Nun werden diese Felder an beiden Orten angezeigt. Wenn Sie einen Wert eingeben, erscheint er automatisch an beiden Orten, da der Wert in den gleichen Datensatz geschrieben wird.

In unserem Beispiel möchten wir diese Felder am alten Ort aber nicht mehr darstellen. Dafür blenden wir nun diese Gruppe auf der Seite Vorgaben aus. Wir benötigen dafür den Namen der Seite (ProjectPrerequisites) und den Namen der Gruppe (ServicesGroup):

<Page Override="ProjectPrerequisites">
<Group Override="ServicesGroup" Visible="False" />
</Page>

Zusatzfelder in den Seiten platzieren

Zusatzfelder können ebenfalls in den Seiten platziert werden. Dies ist nicht ganz so einfach wie bei anderen Feldern, die man einfach kopieren kann, weil Zusatzfelder auf der Seite Weitere Info automatisch dargestellt werden.
Hier fügt man die Felder manuell ein und setzt das Zusatzfeld via OCL in der Eigenschaft ValueExpression.
Als Beispiel setzen möchten wir ein Zusatzfeld Laufzeit auf der Hauptmaske des Projekts darstellen. Dieses Zusatzfeld ist wie folgt erfasst:

Dieses Feld kann mit folgendem Code an einem beliebigen Ort platziert werden:

<AdditionalFieldComboBox ValueExpression="zusatzfeldint('laufzeit')" />

  • AdditionalFieldComboBox: ComboBox für die Darstellung von Auswahl-Zusatzfeldern (siehe Abschnitt Welches Steuerelement für welches Zusatzfeld? weiter unten)
  • ValueExpression: Die OCL-Expression für das Zusatzfeld

Der Navigations-Button wird standardmässig angezeigt und muss mit ShowNavLinkButton="False" ausgeblendet werden, falls er nicht benötigt wird.

Welches Steuerelement für welches Zusatzfeld?

Eine Matrix zur Auswahl des entsprechenden Steuerelementes finden Sie im Artikel über die Zusatzfelder.

Stichwörter in den Seiten platzieren

Auch einzelne Stichwörter können in den Seiten platziert werden mit dem Element KeywordGroup. Dieses stellt eine Gruppe mit der Bezeichnung des Stichwort-Ordners und einer Auswahl je nach Art mit Checkboxen oder einer Combobox dar.
Als Beispiel fügen wir das Stichwort Branche auf der Projekt-Hauptseite nach dem Rechnungsintervall ein:

<KeywordGroup FolderId="14703" PlaceAfter="InvoicePeriod" />

  • FolderID: Zur Angabe des zu verwendenden Stichwortordners muss die ID des Ordners angegeben werden. Diese finden Sie in den Ordnereigenschaften des entsprechenden Ordners:

Nun wird dieses Stichwort direkt auf der Hauptmaske angezeigt:

Die Standard Stichwort-Seite ausblenden

Das Ausblenden der Stichwort-Seite, wie sie standardmässig angezeigt wird, funktioniert gleich wie bei anderen Seiten:

<Page Override="Keywords" Visible="False" />

Eigene Seiten erstellen

Eigene Seiten können mit einem Page Element – ohne Override – erstellt werden:

<Page Header="Meine eigene Seite">
</Page>

Darauf können Felder und Gruppen beliebig angeordnet werden. Die Elemente der Seite werden standardmässig vertikal angeordnet.

<Page Header="Meine eigene Seite">
<Group>
<TextBox Label="Text 1" />
<ComboBox Label="Combobox 1" />
</Group>
<CheckBox Label="Aktiv" ValueExpression="aktiv" />
<TextBox Label="Code" ValueExpression="code" />
</Page>

Scroll-Kopplung mehrerer UI Controls

Ab Version 6.1 ist es möglich, die horizontalen Scrollbalken mehrerer Controls zu synchronisieren.

Eingeführt wurde das für die Ansicht der Wochenerfassung und der Ressourcenplanung, welche in übereinander liegenden Listen horizontale Scrollbalken verwenden, um die Daten darzustellen. Die horizontale Ausrichtung war jedoch nicht gekoppelt, so dass jedes Element einzeln gescrollt werden musste, damit dieselben Datenspalten visuell übereinander liegen.

Mit dem ScrollSynchronizer wurde die Möglichkeit geschaffen, diese Scrollbalken zu koppeln. Nun muss nur noch ein Balken gescrollt werden, und alle gekoppelten Listen verschieben sich gleichzeitig.

Das Control ScrollSynchronizer hat keine visuelle Repräsentation und besitzt folgende Eigenschaften:

  • SourceNames: Eine Komma separierte Liste der Elementnamen, welche synchronisiert werden sollen

Die Kopplung ist bei den Control-Typen DataGrid und ScrollableGroup möglich. Diese enthalten jeweils die Eigenschaft

  • ShowHorizontalScrollbar: Sichtbarkeit der horizontalen Scrollbar (Default=true)

Beispiel

<DataGrid Name="DataGrid1 ... />
<ScrollableGroup Name="Group1 ... />
<DataGrid Name="DataGrid2 ... />

<ScrollSynchronizer SourceNames="DataGrid1,Group1,DataGrid2" />

Für ein gutes Resultat sollten die gekoppelten Tabellen gleich breit sein.

Customizing von Tabellen-Zeilen

Bei Tabellen in Seiten (z.B. Projekt > Budget) bestehen folgende Customizing-Möglichkeiten:

  • eine bestehende Tabellenzeile ausblenden (Visible Override)
  • eine Tabellenzeile neu einfügen (PlaceBefore / PlaceAfter)

Das folgende Beispiel ersetzt eine Tabellenzeile in der Seite Projekt > Budget:

<Page Override="ProjectBudget">
 <TableRow Override="PlanIntValueRow" Visible="False" />
 <TableRow PlaceAfter="PlanIntValueRow">
   <TableCell />
   <TableCell>
     <TextBox ShowLabel="False" ValueExpression="Exp" />
   </TableCell>
   <TableCell />
 </TableRow>
</Page>

Damit die Darstellung stimmt, muss die Anzahl der Zellen identisch sein mit der Anzahl der Tabellenspalten.


23.02.2016 | 15.11.2016: Scroll-Kopplung mehrerer UI Controls und Customizing von Tabellen-Zeilen hinzugefügt.
Produktlinien: Expert
Module: Leistung & CRM
Apps: Desktop App, Web App, Cloud App