This styleguide defines the positions and sizes of the different used elements to create a consistent graphical layout of the application.

The panel size and colors are defined in the configuration file 'tdskin.ini'.

The section [UILayoutRegions] in tdskin defines the different areas of the application such as the menu on the left hand side (i.e. referred to as LEFT in tdskin.ini), the main input area in the middle of the panel (ie referred to as MAIN) and the section with the pending tasks and notifiers on the right (ie referred to as BANNER) etc. For each area, it is possible to define different colors in [UIRegionBackgrounds]. Further information is available in the Tradedesign documentation.

The size of the input area of all panels measure 788 [width] by 528 pixels [height].

There is no separation of the input areas by bevels or colored markings.

All action items are always displayed as icons in the header bar. The header bar is divided into 4 areas.

The top left area of the panel above the menu is reserved for central functions that are always available, such as “Open documentation”, “Direct transaction launch” or the “Home” icon.

On top of the main panel (i.e. input area) on the left are all functions that belong to the panel itself, such as “Add New”, “Display”, “Log Display”, “Diaries” or “Incoming messages” of a selected contract.

Located on the top right of the main panel are icons for selected grid lines (such as “Release”, “Correct” or “Delete” functionality in the Office transaction).

On the far right side are functions that lead to the exit of the transaction, such as “Pause” or “Exit”.

The icons are set via the 'RegisterButton' rules in the source code. In design mode the icons are NOT visible.

The images used for the icons have a Windows 10 look and feel. They are mostly black and should use clear, easy-to-understand symbols. Colors are only used in very special circumstances (e.g. warning icon, unmapped fields).

Font type, size and color can be defined in tdpara.ini.

The standard is:

The panels contain data fields and labels.

If possible, the data fields are placed in two columns next to each other. The fields of the first column start at position 132, the fields of the second column at position 520. The topmost field is in line 8, all other single line fields are placed at 28 pixels below it. As each single line field has a height of 22 pixels, there is a 6 pixel distance between the fields. For multiple line fields, the 6 pixel distance should be taken into account but it is not mandatory. It is better to align fields in the first and second column horizontally.

Each field has an associated label. The labels are placed directly in front of the fields. All labels are aligned to the right and defined at a distance of 6 pixels to the field. As a result, the labels for the first column begin at position 126 and the labels for the second column at position 514. Field labels should be in one single line as well, abbreviations should be avoided.

For single column panels (e.g., DBxNTF, DBxACK), the boxes begin at position 300, the labels accordingly at position 294. This is the layout used in static data transaction and does not apply to business transactions. In business transactions the fields should be positioned at 132 as this will create a better look and feel when tabbing through the application panels.

Amounts are always displayed with the corresponding currency. The amount starts 52 pixels after the currency. This leaves sufficient space between both fields in case the currency combobox is enabled. If the currency is at position 132, the amount must be at position 184.

In streamgrids, the size of each column is defined in module STRMOD. This module automatically calculates the width of the columns according to the available space.

Headlines/ headings of grid columns should be written in full length if possible. Abbreviations should be used only for good reasons.

Standard widths for typical grid columns:

• Currency (abbreviated 'Cur.'): 35 pixels, or 50 pixels for editable currencies
• Amount: 100 pixels
• Date fields: 60 pixels
• Reference number (abbreviated 'Ref.'): 100 pixels

Buttons are still used

• on popup panels
• in or beside grids and streamgrids, if this makes the function easier to understand
• in system and administrator transactions (all SYS* and GEN*)
• as icons on panels, e.g. for selecting text modules or for detailed search.

Buttons must be labeled in one single line, the text should be as short as possible.

Buttons on popup-panels are stacked one above the other on the right edge. The distance of the first button from the top edge is 8 pixels.

The button should be positioned on the panel at a distance from the left corner that is a divisible by 4. The distance between the front edge and the right edge of the panel is 4 pixel.

The standard width of a button in a grid is 22 pixel and 16 pixel in a streamgrid.

Buttons next to grids or streamgrids are positioned 6 pixels from the right edge of the grid. The same distance applies to icons on panels (for example 'Search for text modules')

Parts of panels that are repeatedly used, are to be defined in subpanels. The standards for subpanels are almost identical to the main panel standards.

The subpanel should only be defined as large as needed. The maximum allowed size is 788 x 528 pixels.

There should be no space around the panels of the subpanel in order to simplify the positioning of the subpanel on main panels, since no distances need to be calculated then and positioning of the fields can start at 0, 0 and in the corresponding 6 pixel distance between field label and field (e.g., 126, 132).

Abbreviations should not be used, if possible. However, if abbreviations have to be used, make sure that it is the same abbreviation for one term on all panels. All nouns should begin with a capital letter. All other words (such as prepositions) are basically written in small letters. This refers to all field labels as well as to panel descriptions, title bars and listings. For example: Fee Condition Report, Release of Goods.

Input-enabled fields have a white background, disabled fields have a light blue background.

If a transaction consists of several panels, each panel should have a meaningful description that describes the content. If a transaction consists of one panel only, a panel description is not necessary.

An example of a transaction with one panel is the [Office] transaction or the [xxTSEL] transactions. The Single-Page-Frame checkbox is activated in the properties of the module.

The program should be able to run without being solely dependent on a mouse. Thus, there should be a hotkey for every important button.
Samples for frequently recurring descriptions and hotkeys.

The tab key enables the user to move from one field to the next. Make sure that the standard sequence is followed - column for column from top left to bottom right. This requires a technical meaningful sequence of the tabs. All objects not to be accessed by the [Tab] key are to be located in the second tab group.

These are:

• Bitmap buttons
• Buttons inside of panels

But not:

• TXMMOD start button (the button located next to free text fields, which allows selection of the text modules)

The TXMMOD start button for selecting text modules has to be in the tab order in front of the appropriate text field. This makes it possible for the user to select the text modules first, before dealing with further additions in the text field.

To navigate forward / backwards between fields, [TAB] respectively [Shift]+[TAB] can be used. To jump to the first field of the next panel [Ctrl]+[TAB] can be used. To jump back to the previous panel [Ctrl]+[Shift]+[TAB].

Make sure that there is sufficient free, available space on each panel. This could be used to accommodate any additional functions requested by the customer (deviations should only be an exception, following consultation - for example Settlement). This does not mean, however, that on relatively empty panels fields can begin further down or further in the middle of the panel. Always start at position 8,8. see above).

Globally used panels in business transactions must be in a determined order sequence. The order sequence has to be:

• Transaction-specific panels
• Electronic message details
• Assignments
• Participation Sold
• Liability
• Settlement Details
• Settlement
• Bookings
• Completion
• Messages
• Attachments

If there is no 'Settlement' panel, the 'Electronic message details' panel is always inserted at the end.