Segments¶

Layout Segment is the most essential part of the Layout. Segments display a specific type of data, depending on its type. Every Segment can be individually positioned and styled.

Options of a Segment can be accessed also by clicking on a segment in the Layout preview. A selected Segment is highlighted in the Layout preview with an orange glow.

Figure 1: Selected segment

Type
Required
Determines what type of data is displayed by the Segment.

After the type of a Segment is selected, a second section is displayed. This section contains all options related to the selected type.
Title
Title of the Segment used in the Layout preview and also in the Segment list.
Appearance
The style of the Segment.
- Corner Radius
  Inheritable
  Corner radius of the segment can be adjusted with a slider or a text field for a custom value. Measured in permilles of the entire Layout’s height.
- Margin
  Inheritable
  Margin of the segment can be adjusted with a slider or a text field for a custom value. Measured in permilles of the entire Layout’s height.
- Shadow
  Inheritable
  For more information see Shadow Style section.
  Shadow of the segment.
- Transparency
  Inheritable
  Transparency of the segment, measured in percents, can be adjusted with a slider or a text field for a custom value.
- Borders
  Inheritable
  For more information see Borders Style section.
  The style, width, and color settings for the segments borders.
Data Source
A data source to be used as a source for dynamically assigned values to properties.

After selecting data source row filters can be set. They are used to determine a specific row from the Grid Data Source that should be used. Available row filters are defined by configured parent data filters on layout grid data source. For more information about parent data filter see Parent Data Filters chapter. For more information about row filters see Condition chapter.
Position and Size
Coordinates and size of the segment. Segments don’t have to be fully contained in the Layout. That means that not every coordinate field needs to contain a value between 0 and 100 or be in the range of snapping points.
If multiple Segments are overlapping, the order is determined by their order in the segments list. This order can be manually changed by dragging an item in the list or changing Z-Index property.

Figure 2: Segments overlapping
- Top
  Top boundary of the segment.
  Can be dynamically assigned. For more information see Dynamic Value Fields section.
  Measured in percents of the Layout’s size and/or number of snapping points
- Left
  Left boundary of the segment.
  Can be dynamically assigned. For more information see Dynamic Value Fields section.
  Measured in percents of the Layout’s size and/or number of snapping points
- Height
  Height of the segment.
  Can be dynamically assigned. For more information see Dynamic Value Fields section.
  Measured in percents of the Layout’s size and/or number of snapping points.
- Width
  Width of the segment.
  Can be dynamically assigned. For more information see Dynamic Value Fields section.
  Measured in percents of the Layout’s size and/or number of snapping points.
- Rotation
  Rotation of the segment.
  Can be dynamically assigned. For more information see Dynamic Value Fields section.
  Measured in degrees.
- Z-Index
  Overlaying order of each Segment. Higher Z-Index value means the Segment is more on top, while a lower value means it is more towards the bottom.
  Can be dynamically assigned. For more information see Dynamic Value Fields section.
- Lock Aspect Ratio
  Whether aspect ratio of the source should be locked. For Image source, aspect ratio is locked by default. For Nested Layout and Nested Widget, aspect ratio is locked by default only in case if the parent Layout/Widget has aspect ratio different than UNLOCKED.
- Native Aspect Ratio
  Available only for “Image”, “Nested Layout” and “Nested Widget” sources.
  Native aspect ratio of the source. This is only informative field. Native aspect ratio can be restored by clicking on the “Restore Native Aspect Ratio” button.
Title and Paging Info
Settings for the title and paging info.
- Visibility
  Inheritable
  Whether the title should be visible.
  - Show - Title is visible.
  - Hide - Title is hidden.
- Content
  Inheritable
  Content of the title.
  - Title - Title is displayed.
  - Paging Info - Paging info is displayed.
  - Title and Paging Info - Both title and paging info are displayed.
- Position
  Inheritable
  Position of the title. If Float on Top or Float on Bottom is selected, title floats over the segment which may cause overlapping.
  - Float on Top - Title floats over the segment on Top.
  - Float on Bottom - Title floats over the segment on Bottom.
  - Top - Title is displayed on the top of the segment.
  - Bottom - Title is displayed on the bottom of the segment.
- Height
  Inheritable
  Height of the title that is measured in permilles of the entire Layout’s height.
- Text Color
  Inheritable
  For more information see Color Field section.
  Color of the text.
- Background Color
  Inheritable
  For more information see Color Field section.
  Color of the background.
- Text Style
  Inheritable
  For more information see Text Style section.
  Type of font to use and whether bold or italic text should be used.
- Font Size Coefficient
  Inheritable
  The font size is calculated by multiplying available height for the text by font size coefficient.
- Horizontal Alignment
  Inheritable
  Position of the text on horizontal axis.
  - Left - Text is aligned to the left.
  - Center - Text is aligned to the center.
  - Right - Text is aligned to the right.
- Padding
  Available only when “Left” or “Right” is selected as horizontal alignment.
  Inheritable
  The size of a padding between the Title text and Title’s border in “em” units. 1 em equals to the font size of the associated text.
  The padding is applied to the side where the text is horizontally aligned.
- Enable Hyperlink
  Whether the title should be clickable and trigger configured action.
  Hyperlinks are not clickable in edit mode.
  - Target Layout
    Whether clicking on the title should open a specific Layout.
  - Layout
    Available only when “Target Layout” is enabled
    The Layout that should be opened when the title is clicked.
  - Query String Parameters
    Available only when “Target Layout” is enabled
    Parameters that will be added to the targeted layouts URL. Parameters are used for passing values to dynamic filters in grid-like sources. For more information about dynamic filters and URL parameters, see Filtering using URL parameters chapter.
    - Name
      Name of the query string parameter.
    - Value
      Value of the parameter.
  - Uri
    Not available if “Target Layout” is enabled
    Defines a Uniform Resource Identifier (URI) that determines the action triggered upon clicking. Users can specify:
    - Webpage URLs (e.g., “https://example.com”) to open specific websites.
    - Email addresses (e.g., “mailto:example@mail.com”) to compose an email using the default mail client.
    - Phone numbers (e.g., “tel:0123456”) to initiate a phone call on compatible devices.
    - Custom URIs (e.g., “im:John Smith”) for instant messaging, which opens the default messaging app to send a message.
  - Target
    Defines where the hyperlink should be opened:
    - New Tab: Opens the specified URI in a new browser tab.
    - Current Tab: Loads the URI in the current browser tab, replacing the current content.
    - Pop-up: Displays the URI content in a new pop-up window.
    - None: Disables any specific target behavior, allowing the browser’s default action. This option should probably be used when provided Uri is email addresses, phone number or custom URI.