Basic Freeflow Editor

Studio provides you with different types of UI Editors that allow you to build your Apps in a matter of minutes. At the moment Studio has the Basic Freeflow Editor and the Advanced Layout Editor for creating apps.

The Basic Freeflow Editor is a basic editor that has a simple interface to position your controls on a grid layout to create a pixel-perfect design. This is typically useful when you have simple apps that do not need any complex positioning whether you use it on a mobile browser or the desktop.

The Basic Freeflow Editor is a grid-based editor that enables you to add controls and create forms with an easy layout that can be up and ready in a matter of minutes. The Basic Freeflow Editor allows absolute resizing of your controls with pixel precision.

The major difference between the Basic Freeflow Editor and Advanced Layout Editor is the absolute positioning of controls that the Basic Freeflow Editor allows as against the relative positioning of controls on the Advanced Layout Editor. It allows you to arrange your control in a columnar layout which offers comprehensive design capabilities for the more advanced app designs.

With the Basic Freeflow editor, even novice users will find it easy to start designing their own apps. You can create mobile-friendly layout and dynamic responsive content that look good on mobile devices as well, without any distortion in proportion.

The Basic Freeflow editor contains the Container Control that allows you to group your controls within it and arrange and resize them to in any order based on the pixels grid. However, the Advanced Layout Editor contains the Panel control that can be used for advanced columnar grouping and layout of the controls. You can define the columnar layout settings for the specific arrangements with advanced layouts with the Advanced Editor.

You can have an altogether different arrangement of controls in the Mobile and Desktop views of the Basic Freeflow Editor while in the case of Advanced Layout Editor you can have separate columnar settings for the different screen sizes. The columnar arrangement of controls for each type of device in Desktop, Mobile in portrait and landscape mode, and for tablets can be defined individually. For wider screens, you can define the sizes of some of the panel or container type controls. However, these are not completely independent screen designs that we can define when using the Basic Freeflow Editor.

The Basic Freeflow Editor contains only the Mobile and Desktop views while the Advanced Layout Editor has the Desktop, Mobile Landscape and Portrait, and Tablet views.

A few templates are being added that would be a wonderful addition to your Basic Freeflow Editor building experience.

To summarize the differences in the two editor types:

Points Freeflow UI Editor Layout UI Editor
Responsive apps Position controls separately on mobile and desktop and they will work in % grid view on different form factors. Use Layout and Column controls and use properties on the right to factor responsive experiences across different form factors.
Grouping of controls Use Container control Use Panel control
Auto height of controls Supports Auto height of controls Does not support Auto height of controls
Multi-column UI Drag drop, move, position. Use panel for basic multi-column, use layouts and columns for advanced multi-column UI.
Dynamic Height Supports dynamic height. Supports dynamic height .

Basic Editor supports Relative control Position

The Basic Freeflow editor interface allows you to position your controls according to your design. There may be scenarios where you want to hide some specific controls. You have seen that this can be obtained by the Hide on Mobile or Hide on Desktop option. When a control is hidden the other controls shift up or down dynamically.

Hide/Show on Mobile or Desktop

You can also use Hide/Show on Mobile or Desktop by setting rules. When you hide a control, the other controls shift dynamically.

Note: Use the toggle button to define rules. On enabling/disabling you can see the selected control hidden/shown.

Text Control

While designing your apps, if you have used text based controls, then its size increases or decreases dynamically depending on your content.

Thus, relative positioning is shifting of other controls dynamically up or down.