Customizing of pages

Pages you don’t need can be easily hidden. As an example, we’ll remove the Budget page on the project. In the project class settings, we’ll look for the Budget page in the built-in page to find out the name.

Here we see: The page is called ProjectBudget. To hide it, we set the Visible property to False.

We switch to the Customization tab and enter the following code:

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

This will no longer show the page.

If the page is not always hidden, but only under certain conditions, this can be controlled with the VisibleExpression property.

As an example, we want the budget page to be visible to the project leader. So we do not set the Visible property in the above expression, but instead specify an OCL expression as VisibleExpression:

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

The result of the OCL expression must be a Boolean (True/False). If the result is Wahr, the page is shown.

If the expression is invalid, Wahr is assumed and the page is always shown. There is no error.

The order of the pages can also be changed. There are two properties for this

• PlaceBefore=”PageName”: Specifies the page before which the up-to-date page should be displayed. The page is specified by the name.
• PlaceAfter=”PageName”: Specifies the page after which the current page should be displayed. The page is named.

As an example, we would like to show the Addresses page on the project right after the main page.

We look in the built-in code for the name of the address page and find: ProjectAddress. Next we have to look for the name of the page before or after which we want to insert the page: Project or ProjectFurtherInfo.

So the code for the relocation is:

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

Or alternatively:

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

The individual fields (and other elements such as labels, lines, etc.) can be changed, moved, modified in the layout, or hidden. If an element of a page is changed, the page itself must be overwritten. This means that a change always takes place within the page:

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

If several elements of a page are overwritten, then you put them all in the same frame:

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

Here are a few examples:

As an example, on the project main page, we take the heading Assignment. We want to change this to Responsibilities.

We now have two options: Either we rename the term attribution in our custom translation file, or we overwrite it directly in the class settings:

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

As an example, we would like to make the text field for the remarks smaller and reduce the quantity of lines from 8 to 4:

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

With the Appearance attribute, text fields can be displayed differently, e.g. as InfoBox:

<Page Override="Project">
    <TextArea Override="Description" Appearance="InfoBox" />
</Page>

The field will then only be displayed as text and cannot be described:

With the Help attribute, a help text can be shown as a tooltip. As an example, let’s insert a tooltip in the comment field that we reduced before:

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

When the mouse pointer is placed on the field, the tooltip appears:

Fields that you do not need in your company can now be removed from the pages. In the example we hide the field description.

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

You can also show the fields in a different location using PlaceBefore (see above). As an example, the project type is shown immediately after the project code:

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

If we made the adjustment from the Move Items section above, the interface now looks like this: The space has been tripled by default because it has three items:

This division can be influenced by the FlexWidth property. This determines the percentage that an element occupies within the total available space. The possible values are 1 (default) to 100. If FlexWidth is set to “0,” the element calculates the required width itself. This is useful if you have several text fields in a row and do not know how wide the individual text parts are.

In our example, we widen the two elements Project Code and Project Type . We set the FlexWidth of the two elements to 2. This results in a division of the space into 2+2+1.

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

Now it looks like this:

Each element consists of a label and an edit or input field. The label has a default width of 105:

As an example, we would like to have a slightly larger field for project type. That’s why we set the LabelWidth to 80:

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

Now it looks like this:

If you want to make all labels on a page wider or narrower, set the LabelWidth property directly on the page.

The WidthFraction property specifies which factor the element should use from the available width. Possible values are 0 to 1 (default). For example, if an element should use only half the width, this can be achieved as follows:

<TextBox WidthFraction="0.5" />

As an example, let’s take the Invoice Interval field on the project page. This field is now full width, as we moved the Project Type field:

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

Now it looks like this:

By grouping items into a group, they can be arranged horizontally or vertically evenly.

<Group>
  ....
</Group>

A group offers the following features:

• Orientation: Horizontal/Vertical Arrangement (Default=Horizontal)
• Setting a group title (attribute header)
• Determine the default width of the labels (LabelWidth, see section above)
• Separating line above (separator)

A group has many more properties that can be set. A list of all options can be found here.

Groups can be nested on top of each other.

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

Comboboxes on the pages are customized like the comboboxes in the list settings. The same conventions and properties apply.

As an example, we customize the Combobox project on the service. This is done in the class settings of the class OpenPerformance. The Combobox should look the same as the one in the example in the list settings. Therefore, we can copy the code from the XML control field 1:1 to the class settings and adjust only the name of the Combobox accordingly:

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

A field can also be displayed on another page. This is done in two steps:

1. The field is re-created on the desired page with all the required properties. However, it does not disappear in its original location, but is displayed in both locations.
2. If the field is no longer to be shown in its original location, it must be hidden.

As an example, we would like to move the fields in the Services group of the Settings page to the main page:

To do this, this group is created anew with fields on the main page (Project). The code can be applied from the original:

We copy the whole text and paste it again in the Customization tab, inside the <Page Override=”Project”> </Page> tags:

The “Services” preset group is now displayed on the main page:

Now these fields will be shown in both locations. When you enter a value, it will automatically appear in both locations because the value is written to the same record.

In our example, we no longer want to display these fields in the old location. To do this, we will hide this group on the Settings page. We need the name of the page (ProjectPrerequisites) and the name of the group (ServicesGroup):

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

Custom fields can also be placed in the pages. This is not quite as easy as with other fields that can be simply copied, because custom fields are automatically displayed on the More Info page.
Here you insert the fields manually and set the custom field via OCL in the ValueExpression property.
As an example, we would like to set a custom field Runtime on the main mask of the project. This custom field is entered as follows:

This field can be placed in any location with the following code:

<AdditionalFieldComboBox ValueExpression=”zusatzfeldint('laufzeit’)” />

• AdditionalFieldComboBox: ComboBox for displaying additional selection fields (see Which control for which additional item? below)
• ValueExpression: The OCL expression for the custom item field

The Navigation Button is shown by default and must be hidden with ShowNavLinkButton=”False” if it is not needed.

For a matrix for selecting the appropriate control, see the article on custom fields.

Individual keywords can also be placed in the pages with the KeywordGroup element. This represents a group with the designation of the keyword folder and a selection depending on the type with checkboxes or a combo box.

As of Vertec 6.3.0.12, folders that are not marked as keyword folders can also be placed in the pages in this way.

For this purpose, the property FolderId is set, or starting with Vertec 6.2.0.9 the property FolderEntryId is also set.

As an example, we insert the industry keyword on the main project page after the billing interval:

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

or from Vertec 6.2.0.9 also:

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

• FolderId: To specify the folder keyword to use, the ID of the folder must be specified. This can be found in the folder properties of the corresponding folder:

• FolderEntryId: From Vertec 6.2.0.9, the entry ID of the folder can also be specified. This can be found in the folder properties of the corresponding folder. For newly created folders, the Entry id can be set via python console must be set via the Python console.

Now this keyword is shown directly on the main mask:

The label is always set to the designation of the corresponding keyword folder. The label of the KeywordGroup cannot be set in the code, so if you want to change the label of the field, you have to change the designation of the folder.

Hiding the keyword page as it is shown by default works the same way as other pages:

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

Custom pages can be created with a Page Element – without override:

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

Fields and groups can be arranged as desired. For a list of all available elements, see the Ui customizing documentation . The elements of the page are arranged vertically by default.

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

Starting with version 6.1 it is possible to synchronize the horizontal scroll bars of several controls.

This was introduced for the weekly tracking and resource planning views, which use horizontal scroll bars to display data in overlapping lists. However, the horizontal alignment was not coupled, so each item had to be scrolled individually to visually overlap the same columns of data.

The ScrollSynchronizer has created the possibility to pair these scroll bars. Now only one bar has to be scrolled and all the paired lists move at the same time.

The Control ScrollSynchronizer has no visual representation and has the following properties:

• SourceNames: A comma-separated list of element names to be synchronized. For the elements to be coupled, which are created by yourself, a name must be set (e.g. <DataGrid Name="DataGrid1" />). This must not contain spaces.

Coupling is possible with the DataGrid and ScrollableGroup control types. These each contain the property

• ShowHorizontalScrollbar: Visibility of horizontal scrollbar (Default=”True”)

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

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

For a good result, the linked tables should be the same width.

For tables in pages (e.g. project > budget), the following customizing options are available:

• Hide an existing table row (Visible Override)
• Insert a new table row (PlaceBefore)

The following example replaces a table row on the Project > Budget page:

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

For the representation to be correct, the quantity of cells must be identical to the quantity of table columns.

As an example, a custom class called “Role” is displayed as an editable table (DataGrid) in an additional page “Roles and Features” on the class address entry. The table columns (ColumnDefinition) display the custom fields on the custom class and are editable.

The main purpose of this example is to show how different types of controls can be included and columns displayed in self-created tables. For example, the Role column displays a ComboBox and the Organization column is used to select an object.

A star row for capturing new entries cannot be shown in a DataGrid, because the logic to create it is not present (in the current example it is a link between an address and an additional class20). The entries are thus created as usual, e.g. in the new menu of the address or via drag & drop, and then appear in the list. Another variant is, as shown here in the example, to show a script button and to outsource the creation of an entry to a corresponding script.

The following code has been inserted in the class settings Address entry:

<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: Specifies a control
• Converter: The converter corresponds to a renderer. The renderers available in DataGrids are described in ConverterType
• Since there is no control for a Boolean (in existing tables this is done implicitly with the renderer rndBoolean), the checkbox with DiplayType=”Toggle” must be displayed in addition to the Converter=”InvariantBoolean”.
• To activate sorting in the DataGrid, AllowSort="True" must be activated. If sorting is to be active at startup, the expression must be adjusted accordingly: ListExpression=”getlinks('roles’).oclAsType(additional class20)->orderby(additional fielddate('date’))”