This article is outdated, you can access the most current versions here:

• https://doc.onedata.de/apps/apps-docs/odml-documentation/AppBuilder/screens/Screens.html
• https://doc.onedata.de/apps/apps-docs/odml-documentation/AppBuilder/layouts/AvailableLayouts.html

Article Content

1. Screens
   1. Screen Properties
   2. Full Example

      
      

2. Layouts
   1. Available layouts
   2. Common Primitive Properties
   3. Common Object Properties
3. Fixed Grid
   1. Non-Promitive Config Properties
   2. Primitive Config Properties
   3. Full Example
4. Flex Grid
   1. Principles
   2. Config Properties
   3. Values for Columns and Rows
   4. Why Is the Configs-Property an Array?
   5. Full Example
5. Flexbox
   • Layout Config Properties 
   • Item Config Properties

Screens

Screens are used to specify which of the configured layouts is used for which screen size. A layout can be selected according to screen width, height and/or aspect ratio. The first screen that matches the conditions is selected. If no screen matches, the first layout is rendered as a fallback. Layouts require an id property to be able to be referenced by a screen.

Screen Properties

Full Example

Layouts

In previous ONE DATA you had only one report layout available. This worked with dividing the available view port in equally sized units with given amount of units you wanted to have. In OD Markup language this will be further enhanced to give the possibility to choose from different layout systems ("layout types"). To be able to migrate old reports as good as possible, we already implemented a layout which behaves exactly like the old layout used to. This layout type is called "fixedGrid".

Available layouts

Common Primitive Properties

Common Object Properties

Example Value

Example Value

Fixed Grid

type = "fixedGrid"

To use a fixed grid, you have to define its dimensions (amount of x and y units) first. To actually place elements in this layout you have to add "containers" to the layout configuration. A container is then referenced in "placements[]" which provides the connection of a container to an element.

Non-Promitive Config Properties

Example Value:

Primitive Config Properties

Full Example

Flex Grid

type = "flexGrid"

(Available from version 1.82.0 // 1.59.1 and upwards)

In previous version of Apps you only had the Fixed Grid layout available.
Now we introduce Flex Grid. A layout system that allows you to create complex responsive wed design (Apps) layouts more easily and consistently across browsers.

Principles

In contrast to fixed grid, where you define a relative but fixed width and fixed height for your containers, flex grid will also adjust to the size of the content of the containers. This allows to give containers enough size to always show all content without wasting much space.

But it also means that it won't cut off content or let it overflow. Keep in mind, that even when you configure a size to an absolute value like 200px and your content needs 300px, it will result in 300px. If you nevertheless want your content to overflow or to be cut off, you need to define your value as a maximum with minmax().

Config Properties

Values for Columns and Rows

You can pass a CSS track sizing as a string to the grid and use the values you need to realize your sizing behavior. Take advantage of the functional notations like "minmax", "repeat" and new values like "min-content" and "max-content" to meet your layout goals.

Why Is the Configs-Property an Array?

You can pass multiple config objects to configure different layouts for different min-widths to create a responsive grid.
The configuration will be transformed to CSS, wrapped in media queries. The first one will always be the default layout without media query restriction, so there's always a configuration applicable. If you provide a "minWidth" in the first config object, it'll be ignored.
The media queries will follow a mobile first approach and the attributes omitted in the configurations with "min-Width" restriction will apply the attributes defined in the default (the first) config object.
Imagine a layout where small viewports have 1 column and 7 rows, a mid-size viewports with 2 columns and 5 rows, and larger viewports with 3 columns and 4 rows.

Multiple configs by minWidth are implemented in CSS media queries

Important: They take action on the window/viewport width, not the width of the preview area in split mode. You should use a seperate preview window to check your layout then.

Full Example

Flexbox

The Flexbox Layout is highly experimental and not bugfree. As soon as we reach a stable state here, it will be communicated.

type = "flexbox"

To use a fixed grid, you have to define a direction in which the items are dynamically arranged. To actually place elements in this layout you have to add a "container_id" to the layout configuration. This container is then referenced in "placements[]" which provides the connection of a container to an element.

Layout Config Properties 

Item Config Properties