Customizing von Seiten

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.

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 Budget-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.

Ist die Expression ungültig, wird Wahr angenommen und die Seite immer angezeigt. Es gibt keinen Fehler.

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" />

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:

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>

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>

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:

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>

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>

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:

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:

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

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:

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

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:

<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:

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)
• Trennlinie oberhalb (Separator)

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.

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

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

<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>

<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>

<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>

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>

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

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

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.

Ab Vertec 6.3.0.12 können auch Ordner, die nicht als Stichwort-Ordner markiert sind, auf diese Art in den Seiten platziert werden.

Dafür wird die Eigenschaft FolderId oder ab Vertec 6.2.0.9 auch die Eigenschaft FolderEntryId gesetzt.

Als Beispiel fügen wir das Stichwort Branche auf der Projekt-Hauptseite nach dem Rechnungsintervall ein:

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

oder ab Vertec 6.2.0.9 auch:

<KeywordGroup FolderEntryId="Branchen" PlaceAfter="InvoicePeriod" />

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

• FolderEntryId: Ab Vertec 6.2.0.9 kann auch die EintragID des Ordners angegeben werden. Diese finden Sie in den Ordnereigenschaften des entsprechenden Ordners:

Nun wird dieses Stichwort direkt auf der Hauptmaske angezeigt:

Als Beschriftung wird immer die Bezeichnung des entsprechenden Stichwort-Ordners gesetzt. Das Label der KeywordGroup kann nicht im Code gesetzt werden. Falls Sie also die Beschriftung des Feldes ändern möchten, müssen Sie die Bezeichnung des Ordners ändern.

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

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

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. Eine Auflistung aller verfügbaren Elemente finden Sie in der UI Customizing Dokumentation. 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>

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. Bei den zu koppelnden Elementen, welche selbst erstellt werden, muss also ein Name gesetzt werden (z.B. <DataGrid Name="DataGrid1" />). Dieser darf keine Leerzeichen enthalten.

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

• ShowHorizontalScrollbar: Sichtbarkeit der horizontalen Scrollbar (Default="True")

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

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.

Als Beispiel wird eine Zusatzklasse namens "Rolle" als editierbare Tabelle (DataGrid) in einer zusätzlichen Seite "Rollen und Funktionen" auf der Klasse Adresseintrag dargestellt. Die Tabellenspalten (ColumnDefinition) zeigen die Zusatzfelder auf der Zusatzklasse an und sind editierbar.

Es geht in diesem Beispiel vor allem darum, aufzuzeigen, wie in selbst erstellten Tabellen verschiedene Arten von Controls eingebunden und Spalten dargestellt werden können. So zeigt z.B. die Spalte Rolle eine ComboBox an und die Spalte Organisation dient zur Auswahl eines Objekts.

Eine Sternzeile zum Erfassen von neuen Einträgen kann nicht angezeigt werden in einem DataGrid, da die Logik zum Erzeugen nicht vorhanden ist (hier im aktuellen Beispiel handelt es sich um eine Verknüpfung zwischen einer Adresse und einer Zusatzklasse20). Die Einträge werden also wie gewohnt erzeugt, z.B. im Neu-Menü der Adresse oder via Drag & Drop, und erscheinen dann in der Liste. Eine andere Variante ist, wie hier im Beispiel dargestellt, einen Script Button anzuzeigen und das Erzeugen eines Eintrags in ein entsprechendes Script auszulagern.

Der nachfolgende Code wurde in den Klasseneinstellungen Adresseintrag eingefügt:

<Page Header="Rollen und Funktionen" PlaceBefore="AddressFurtherInfo"> 
    <TextBlock Appearance="Info" Text="Neue Rollen und Funktionen mittels Button erzeugen und in untenstehender Liste erfassen." /> 
    <DataGrid ListExpression="getlinks('Rollen').oclAsType(Zusatzklasse20)->orderby(zusatzfelddate('datum'))" FillLastColumn="True" ScrollToGhostRow="False" AllowSort="True" RowCount="6" >
        <DataGrid.ColumnDefinitions> 
            <ColumnDefinition Header="Rolle" Expression="zusatzfeldint('rollentyp')" EditControlName="cmbZusatzfeld" Converter="MultiString" Width="70"/> 
            <ColumnDefinition Header="Organisation"  Expression="zusatzfeldobj('rollenorganisation')" EditControlName="edtAdresseintrag" Width="125"/> 
            <ColumnDefinition Header="Datum" Width="80" Expression="zusatzfelddate('datum')" SortOrder="Asc" /> 
            <ColumnDefinition Header="Bemerkung"  Expression="zusatzfeldblob('bemerkungen')" Width="150"/> 
            <ColumnDefinition Header="Aufwand" Expression="zusatzfeldint('aufwand')" Converter="Minutes" ContentAlignment="Right" IsSummed="True" BackgroundColor="clYellow" Width="66" />
            <ColumnDefinition Header="OK?"  Expression="zusatzfeldbool('anzeigen')" DisplayType="Toggle" Converter="InvariantBoolean" Width="40" /> 
        </DataGrid.ColumnDefinitions> 
    </DataGrid> 
    <ScriptButton Text="Neue Rolle erstellen" ScriptName="Rolle erstellen" FlexWidth="0" HorizontalAlignment="Left" /> 
</Page>

• EditControlName: Damit wird ein Steuerelement angegeben
• Converter: Der Converter entspricht einem Renderer. Die in DataGrids verfügbaren Renderer sind unter ConverterType beschrieben
• Da es für einen Boolean kein Steuerelement gibt (in bestehenden Tabellen wird das mit dem Renderer rndBoolean implizit gemacht), muss zusätzlich zum Converter="InvariantBoolean" die Checkbox mit DiplayType="Toggle" eingeblendet werden
• Um die Sortierung im DataGrid zu aktivieren, muss AllowSort="True" aktiviert sein. Soll beim Start eine Sortierung aktiv sein, muss die Expression entsprechend angepasst werden: ListExpression="getlinks('Rollen').oclAsType(Zusatzklasse20)->orderby(zusatzfelddate('datum'))"