Layers

OpenFlower offers the fantastic feature of enabling a mode where components can freely overlap on the canvas, combined with precise control over the layering of these components. This advanced functionality diverges from traditional grid-based placement constraints, offering developers and designers unparalleled UI/UX creation flexibility.

The control over component layering empowers you to build interfaces that are not only highly functional but also aesthetically pleasing. Layers are an essential step towards the Vision of OpenFlower to merge the ability to create "Apps, Websites, Presentations, and Collaboration Tools" inside a single Lowcode Platform.

From Version 2.3.1 on we introduce this feature in several steps and develop it further by the feedback of the OpenFlower Community.

Step 1 - Simple Layers

In the App Editor, we introduce a setting to switch on the "Layer Feature" within the App Editor. Each App that is edited during this feature is switched on will become capable of organizing components in layers. Existing Apps will look exactly the same till you start to place components differently. However, by the nature of "Layers", the positioning of components is "fixed" in a vertical & horizontal manner.

That means that you need to plan the layout differently, as the automatic "pushing down" of visual components with "auto-height" will not be effective in the Layers Mode. Each component is defined at the same time as a single layer. In other words, the app has as many layers as you place Components to the Canvas.

Step 2 - Layer Groups & deep Layers

In Version 2.4.x we will activate Layer Groups to help you to organize components in a layer group together. A layer group will behave like a single Layer.

Deep Layers are the possibility to organize Layer Positions for Components inside of Containers & Lists. (Child Components). The Layer & Selection List shows already the full Hierarchy, but limits in Step 1 the possibility to the root-level of Components.

Step 3 - Layers & automatic vertical scaling control

When we activate Step 3, you will be able to control the vertical auto-scaling of components in connection to the current layer group and other elements on the Canvas.

Using Layers

In the new "Layers" Settings Menu on the left Sidebar you can open the Settings regarding Layers, Bulk edit, and Layout.

Organize Layer Position

To change the Layer Position and move Components in front or back of each other, simply use the drag n drop List on the left Layers Settings section.