CS

Layout settings

Home / Support / Manuals / Administrator Guide /

Layout settings

CS

1. Application layout settings

  • Layout settings define the typography, colors, dimensions, and structure of the NET Genium user interface.
  • Layout settings apply to the header, menus, tables, and forms.
  • The layout is configured on the view page “Layout” within the “Settings” application or application group.
  • A new layout is created using the “New layout” button.
  • Multiple layouts can be defined, however, only one layout can be active at a time.
  • The default NET Genium installation includes a layout named “Default”, which is set as active.
  • A detailed description of the individual parts of the user interface is provided in the separate guide Control area.

Obrázek.png

1.1. Basic parameters

Obrázek.png

  • Name – Textual identifier of the layout record
  • Save as active layout – An option that, when saved, sets the selected layout as the default for all application users
  • Font name – Name of the font that is used as the default for all text across the entire application (e.g. Tahoma, Helvetica, Arial)
  • Font size – Size of the default font specified in points
  • Font color – Text color of the default font

1.2. Header

1.2.1. Logo

Obrázek.png

  • Header – Logo – Relative path to the logo file displayed in the header
  • Header – Background image – Relative path to the image used as the graphical background of the header (e.g. a color bar, texture, or visual pattern)
  • Header – Image – Uploading a custom image from a file – after clicking the “Browse…” button, a new file can be selected and used as the logo or background image in the header

1.2.1.1. Logo variants and basic parameters

  • The application uses two logo variants:
    • a logo for desktop devices, and
    • a logo for mobile devices (typically including a menu icon — hamburger)
  • The preferred logo format is vector - based “svg”, alternatively, raster formats such as “png”, “gif” or “jpg” can also be used.
  • The recommended logo size is 190×68px this size is also used by the default NET Genium layout
    • The logo width must be smaller than the menu width specified in the “Menu – Width” field (the default value is set to 10+185+10 = 205px)
    • The logo height must be smaller than the header height specified in the “Header – Height” field (the default value is set to 0+68+0+56+7= 131px).

1.2.1.2. Procedure for creating a new logo or modifying an existing one

  • Create a new file in an image - editing application, or copy the default logos “Logo-NetGenium.svg” and “Logo-NetGenium.mobile.svg” from the “Themes” directory.
  • Set the canvas size to the default value 190×68px, or to custom dimensions in accordance with the values specified in the “Menu – Width” and “Header – Height” fields.
  • Insert the custom logo, for the mobile variant, also include the menu (hamburger) icon.
  • Check the logo alignment — the logo is always displayed in the top-left corner of the header (0px from the left, 0px from the top).
  • Save the logo to the server containing the NET Genium files:
    • manually to the “Themes” directory, for example using Remote Desktop, or
    • via the “Layout” form using the “Header – Image” control and the “Browse” button.
  • Use a unified file-naming convention:
    • “Logo-Company.svg” for the desktop logo (the default logo is named “Logo-NetGenium.svg”),
    • “Logo-Company.mobile.svg” for the mobile logo (the default logo is named “Logo-NetGenium.mobile.svg”).
  • Enter the relative path to the logo in the “Layout” form in the “Header – Logo” field:
    • the field value contains the path to the desktop logo,
    • the logo for mobile devices is detected automatically based on the “mobile.svg” suffix. If such a file is found in the “Themes” directory, it is displayed on mobile devices.
  • The SVG format is vector-based and therefore ideal for web applications. However, editing SVG files in graphic editors can be very complex — and often even impossible — especially when working with highly complex logos containing a large number of shapes and lines. For this reason, raster formats such as PNG, GIF, or JPG may be used as a fallback, although they are not ideal for web use, primarily due to blurriness on mobile devices or for desktop users who use browser zoom.

1.2.2. Header colors

Obrázek.png

  • Header – Top bar – Color of the top header bar in which the logo and basic information such as the user name or date are displayed
  • Header – Bottom bar – Color of the bottom header bar in which application groups are displayed
  • Header – Font color – Color of the text displayed in the header (user name, date)
  • Header – Application group toolbar – Background color of the bar in which individual application groups are displayed
  • Header – Selected group background – Highlight color for the currently selected application group and application
  • Header – Application group – Text color of inactive application groups
  • Header – Selected group – Text color of the currently selected application group and application, and the color of buttons on view pages and edit forms
  • Header – Horizontal line – Color of the separating line between the header and the main application window

1.2.3. Header dimensions and separators

Obrázek.png

  • Header – Application group separator – Used only in the legacy design (up to 2016), defines the text separator between application groups
  • Header – Height – Total height of the header
    • Calculated as the sum of sections A + B + C + D + E, where:
      • A – Top margin
      • B – Top bar
      • C – Bottom bar
      • D – Application group toolbar
      • E – Bottom margin
    • Default value: 0+68+0+56+7
  • Header – Right margin – Width of the free space between buttons and the right edge of the window

1.3. Menu (Navigator)

Obrázek.png

  • Menu – Image – Used only in the legacy design (up to 2016), defines the image displayed in the top-left corner of the menu
  • Menu – Background – Background color of the navigation area
  • Menu – Vertical line – Used only in the legacy design, defines the color of the vertical line on the right side of the navigation area
  • Menu – Title background – Background color of the application group or application title
  • Menu – Title – Text color of the application group or application title
  • Menu – Content background – Background color of unselected view pages
  • Menu – Admin-Text – Text color used in administrator mode in the navigation area
  • Menu – Width – Total width of the navigation area
    • The width is calculated as A + B + C:
      • A – Left margin
      • B – Menu width
      • C – Right margin
    • Default value: 10+185+10

1.4. View table

Obrázek.png

  • Table – Title background – Background color of the table title and record detail
  • Table – Title – Text color of the table title
  • Table – Header – Background color of the column header row and action column
  • Table – Horizontal line – Color of the line separating the header and data area
  • Table – Line 1 – Background color of odd table rows
  • Table – Line 2 – Background color of even table rows
  • Table – Footer background – Background color of the footer containing paging controls
  • Table – Details – Background color of the selected record
  • Table – Border – Color of the table outline

1.5. Form

Obrázek.png

  • Form – Left column – Background color of the left column containing control labels
  • Form – Title background – Background color of title type C
  • Form – Title – Text color of title type C
  • Form – Margins – Form margins
    • The margin value is calculated as A + B + C + D:
      • A – Top margin
      • B – Right margin
      • C – Bottom margin
      • D – Left margin

1.6. Textbox

Obrázek.png

  • TextBox – Height – Height of the textbox, i.e. the input field used for entering text, numbers, dates, etc.
  • TextBox – Radius – Corner radius of the textbox (a higher value means more rounded corners)
  • The height of the textbox is considered the primary dimension from which the heights of other controls are automatically derived. For example, buttons have the same height as the textbox, and multi-line input fields have their height defined as a multiple of the textbox height and the number of rows.

1.7. Ajax Picker

  • Ajax Picker is a tooltip that is displayed in a view table after clicking a table row, or in an edit form during the process of transferring values into the edit-form fields.

Obrázek.png

  • Ajax Picker – Background – Tooltip background color
  • Ajax Picker – Links – Tooltip text color
  • Ajax Picker – Border – Tooltip outline color

1.8. “Save”, “Delete”, and “Back” buttons

  • “Save” buttons – Saves changes to the layout record
  • “Delete” buttons – Permanently deletes the layout record
  • “Back” buttons – Exits layout editing without saving changes

2. Visual layout of the edit form

2.1. Rules and recommendations for designing edit forms

  • The edit form displays controls vertically one below another
  • Each control occupies the full width of the form by default and is divided into two or optionally three columns
    • The first column contains the control label
    • The second column contains the control itself
    • The optional third column contains help text for the control
  • As a result, the form visually appears as a two column or three column layout
    • Column 1: control labels
    • Column 2: controls
    • Column 3: optional help texts
  • The recommended standard width of controls in an edit form is 400px

2.1.1. Snapping controls

  • Snapping is used to place controls next to each other and allows the creation of multi-column form layouts.
  • Snapping is used for controls that can be displayed next to each other. It is not used for controls that form standalone units or complex components (e.g. Tree, Tab, Map).
  • Controls can be placed next to each other in columns using the option “Snap to previous control” (on the “General” tab). This option determines how the control is positioned:
    • Enabled – the control is displayed to the right of the previous control.
    • Disabled – the control is displayed below the previous control (default display according to the form layout).
  • Snapped controls together form a separate column of the edit form.
  • Snapped controls are marked in administrator mode with an arrow icon pointing up and to the right.
  • If a control is snapped to the previous one, its offset can be defined.
    • The offset defines the horizontal distance from the previous control.
    • The offset is entered in pixels in the “Offset” text field, which is located to the left of the “Width” field.
  • Snapped controls that form one column should have the same offset.
  • Recommendations for designing the form layout:
    • Align controls so that they form as few vertical lines as possible
    • Controls in the same column should have a uniform width
    • Snapped controls that form one column should have the same offset
  • Designing a column layout:
    • First determine the width of the controls in the first column
    • Then determine the total width of the second column
  • Specifics of the first column:
    • All controls start on the same vertical line
    • The width of labels is adjusted automatically according to the longest text
  • Specifics of the second column (snapped controls):
    • The column has a fixed offset
    • Labels of snapped controls are displayed within this offset
    • If a label is longer than the offset, the control may be shifted to the right
  • The total width of the second column consists of:
    • The offset
    • The width of the snapped control
  • The offset can also be specified indirectly using a calculation:
    • An entry in the form “500 -” means:
    • Offset = total column width - control width
  • Examples of control layouts while maintaining a total width of 400px:
    • One column (without snapping)
      • Control - width 400px
    • Two columns
      • Principle: the sum of the offset and the width of the second control corresponds to the total width of 400px
      • First control - width 100px
      • Second control - offset 300px, width 100px, “Snap to previous control” enabled
    • Three columns
      • Principle: each additional column respects the same total width of 400px.
      • First control - width50px
      • Second control - offset 150px, width 50px, snapped.
      • Third control - offset 150px, width 50px, snapped.

Obrázek.png

2.2. Appearance of titles and buttons

2.2.1. Title

  • The appearance and meaning of a title are determined by the “Type” field in the settings dialog of the “Title” control on the “General” tab:
    • Type A – Title of level “H1”
    • Type B – Title of level “H2” with a colored background taken from the layout settings in the “Form – Left column” field
    • Type C – Title of level “H2” with a colored background taken from the layout settings in the “Form – Title background (Title C)” field
  • A detailed description of the “Title” control is provided in the separate guides Edit form – Title and View page – Title.
  • Examples of individual title types:

Obrázek.png

2.2.2. Button

  • The appearance and meaning are determined by the “Type” field in the settings dialog of the “Button” control on the “General” tab:
    • Type A – a button with a more prominent appearance, used for actions of greater importance
    • Type B – a button with a less prominent appearance, used for actions of lesser importance
  • A detailed description of the Button control is provided in the separate guides Edit form – Button and View page – Button.
  • Examples of individual button types:

Obrázek.png

2.3. Help display

  • Help is text displayed to the right of the control itself in the edit form.
  • Help settings are configured in the control settings dialog on the “Help” tab.
  • The help radio button provides the following two types of help definition:
    • Text – the help text is defined by a manually entered text string placed in a multi-line text field below the radio button
    • From query – the help text is defined by the result of a database query that is evaluated when the edit form is opened
  • Help texts of all controls start on the same vertical line across the entire edit form and visually form a separate help column.
  • The display of help text differs when controls are snapped.
    • If “Automatic grouping” is enabled in the edit - form settings, a bulleted list of all controls with help placed on the same row is automatically generated in the help column, and individual list items can be expanded to display the help text.
    • If “Automatic grouping” is not enabled in the edit - form settings, help texts of controls located to the left of snapped controls are not displayed.
  • Help text supports simple text formatting using wiki syntax:
    • '''Bold text'''
    • ''Italics''
    • '''''Bold italics'''''
    • ""Text enclosed in double quotes""
    • Lists:
      • * Heading 1
      • ** Subheading 1.1
      • ** Subheading 1.2
      • * Heading 2
      • * Heading 3
      • # Numbered heading 1
      • ## Numbered subheading 1.1
      • ## Numbered subheading 1.2
      • # Numbered heading 2
      • # Numbered heading 3
  • Help text can be displayed only after clicking the question-mark icon
    • The icon is placed in the standard help location but visually occupies less space.
    • The question-mark icon is defined by placing three dots at the end of the first line of the help text and then moving to a new line (Enter).
    • A shortened help text may be entered before the three dots.
    • After the three dots, the full help text follows, including line breaks.
    • …
      Help text displayed after clicking the question-mark icon
    • Shortened help text…
      Help text displayed after clicking the question-mark icon
  • In combination with the question-mark icon, a variant can be used in which clicking the icon does not display the help text following the three dots, but instead shows or hides content (for example a div) located anywhere in the edit form.
    • On a new line after the three dots, the ID of this div is specified using the JavaScript function “el”.
      • …
        el('D1')
      • Shortened help text…
        el('D1')
  • Example of displaying help after clicking the question-mark icon when controls are arranged in columns

Obrázek.png

  • Example of displaying help when the control is standalone and no three dots are included in the help text

Obrázek.png

2.4. Server functions for additional form layout configuration

  • The layout of each edit form can be further adjusted using server functions.

Server functions can be applied in two ways:

  • By inserting them into the edit-form note, the settings apply to the entire form.
  • By using HTML controls, the start and end of a section are created in which layout rules are defined.
  • A detailed description of Server functions is provided in the separate guide Server functions.

For additional layout configuration in a specific form, the following server functions can be used.

2.4.1. COLUMN

  • COLUMN(int columnWidth, int labelWidth, int defaultControlWidth)
    • The function starts a block of controls that are arranged in columns.
    • Controls use a reverse design, they have no border, use a colored background, and display a colored bar below the control when focused.
    • A detailed description of the COLUMN function is provided in the separate guide Server functions.
  • /COLUMN
    • The function ends the block of controls defined by the COLUMN function.
  • Example of using the COLUMN function

Obrázek.png

2.4.2. DISABLEPAGETOOLS

  • DISABLEPAGETOOLS()
    • The function disables the floating icons displayed in the top - right corner of a view page or an edit form.
  • Example of using the DISABLEPAGETOOLS function

adresa.png

2.4.3. LAYOUT

  • LAYOUT
    • The function sets the layout of the current edit form according to the definition stored in the “slayout” table.
    • A detailed description of the LAYOUT function is provided in the separate guide Server functions.

2.4.4. LEFTALIGNMENT

  • LEFTALIGNMENT
    • The function starts a block of controls with labels aligned to the left.
  • /LEFTALIGNMENT
    • The function ends the block of controls defined by the LEFTALIGNMENT function.
  • Example of using the LEFTALIGNMENT function

Obrázek.png

  • Example of using the LEFTALIGNMENT function above a chart

Obrázek.png

  • Example of display without using the LEFTALIGNMENT function

Obrázek.png

2.4.5. NOBACKGROUND

  • NOBACKGROUND
    • The function starts with a block of controls without a colored background in the left column containing the control label.
    • If the block is not closed using the “/NOBACKGROUND” function, the “Save”, “Delete”, and “Back” buttons are anchored and displayed at the end of the edit form.
  • /NOBACKGROUND
    • The function ends the block of controls defined by the NOBACKGROUND function.
  • Example of using the NOBACKGROUND function

Obrázek.png

2.4.6. WEBFORM

  • WEBFORM
    • The function starts with a block of controls that do not use a colored background in the left column.
    • Controls use a reverse design; they have no border, use a colored background, and display a colored bar below the control when focused.
    • If the block is not closed using the “/WEBFORM” function, the “Save”, “Delete”, and “Back” buttons are anchored and displayed at the end of the edit form.
  • /WEBFORM
    • The function ends the block of controls defined by the WEBFORM function.
  • Example of using the WEBFORM function

Obrázek.png