Customizing of pages

Pages you don’t need can be easily hidden. As an example, let’s remove the Budget page on the project. In the project class settings, 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 stop showing 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 True, the page is shown.

If the expression is invalid, True 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 current page should be displayed. The page is specified by name.
• PlaceAfter=”PageName”: Specifies the page after which the current page should be displayed. The page is specified by name.

As an example, we would like to show the Addresses page on the project directly 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”>
    This is where the elements of the 'Project’ page are adjusted.
</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 couple examples:

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

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 want to make the text box 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 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 remarks 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=”Group Header”
    Orientation=”Vertical”>
    <TextBox Label=”Text 1”/>
    <TextBox Label=”Text 2” />
</Group>

<Group Header=”Group Header”
    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=”Group Header”
    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=”Group Header”
    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, let’s adapt the Combobox project to the service. This is done in the class settings of the Openperformance class. The Combobox should look the same as the one in the example in the list settings. Therefore, we can copy the code from the control element XML field 1:1 into the class settings and adapt 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 will be re-created on the desired page with all the required properties. However, it will not disappear in its original location, but will be displayed in both locations.
2. If you no longer want the field to show in its original location, it must be hidden.

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

To do this, this group and fields are created 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 show in both locations. When you type 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 their old location. To do this, we will hide this group on the Presets 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 field items can also be placed in the pages. This is not quite as easy as other fields that can be copied, because custom field items are automatically displayed on the More Info page.
Here you insert the fields manually and set the custom field item via OCL in the Valueexpression property.
As an example, we would like to set a Runtime custom field item on the main mask of the project. This custom field item is entered as follows:

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

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

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

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 element, see the article on custom field items.

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.

Starting with 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 FolderId property is set, or since Vertec 6.2.0.9 also the FolderEntryId property.

As an example, we insert the keyword Industry on the main project page after the invoice interval:

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

or from Vertec 6.2.0.9 also:

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

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

• FolderEntryId: Start with Vertec 6.2.0.9 you can also specify the Entryid of the folder. This can be found in the folder properties of the corresponding folder:

Now this keyword is shown directly on the main mask:

The designation of the keyword folder is always set as the label. The label of the Keywordgroup cannot be set in the code, so if you want to change the label of the field, you need to change the designation of the folder.

Hiding the keyword page as it shows 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 table and Resource Planning view, which use horizontal scroll bars to display data in stacked lists. However, the horizontal alignment was not coupled, so each item had to be scrolled individually to visually stack 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 self-created, a name must be set (e.g. <DataGrid Name=”DataGrid1” />). This name 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 display to be correct, the quantity of cells must be the same as the quantity of table columns.

As an example, an add-on class called “Role” is displayed as an editable table (Datagrid) in an additional page “Role and Functions” on the class address. The table columns (Columndefinition) display the custom field items on the add-on 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 entering 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, as shown in the example here, is to show a script button and to outsource the create of an entry to a corresponding script.

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

<Page Header=”Rollen und Funktionen” PlaceBefore=”AddressFurtherInfo”> 
    <Textblock Appearance=”Info” Text=”Neue Role und Funktionen mittels Button create und in untenstehender Liste enter.” /> 
    <DataGrid ListExpression=”getlinks('Rollen’).oclAsType(Zusatzklasse20)->orderby(additional fielddate('date’))” 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 Role create” Scriptname=”Rolle create” Flexwidth=”0” Horizontalalignment=”Left” /> 
</Page>

• EditControlName: Specify a control element
• Converter: The converter corresponds to a renderer. The renderers available in DataGrids are described in ConverterType
• Since there is no control element 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 enable sorting in the DataGrid, AllowSort=”True” must be enabled. If sorting is to be enabled at startup, the expression must be adjusted accordingly: ListExpression=”getlinks('Roles’).oclAsType(additional class20)->orderby(additional fielddate('date’))”