ProblemIn previous versions of Appway, I've used Flow Layouts or Tables to design my forms. I see that Flow Layouts are deprecated in Appway 6, and the regular old Table has disappeared from the list of Screen components. Why are they gone, and what should I do?
SolutionWe've removed the old Table component in Appway 6 (to find out more about this, please read the document Changes to the Table Component in Appway 6). We've also deprecated the Flow Layout component. Both changes were made because the Table component and the Flow Layout component were no longer in line with our goal of making Appway Apps mobile-compatible by default.
Existing solutions will continue to work as they have previously. For new Appway Apps, we recommend that you no longer use Tables or Flow Layouts to design the basic layout of forms. Instead, we recommend that you use the new Adaptive Flow Layout component.
Working with the Adaptive Flow Layout component
Use the Adaptive Flow Layout component to lay out elements on an Appway Screen that implements a basic form. If your Screen mainly contains input fields, dropdowns, date pickers, buttons, labels, headers, and other such elements, the Adaptive Flow Layout is for you. It automatically lays out these elements based on screen size and device type.
The Adaptive Flow Layout consists of a parent component and three children (Element, Full-Width Element and Group).
Adaptive Flow Layout
The Adaptive Flow Layout component itself is the parent component. Use it to create a new Adaptive Flow Layout. One option would be to put the Adaptive Flow Layout component into your Template, and put a Placeholder component inside it.
Important: never nest Adaptive Flow Layouts inside each other. Doing so will cause performance problems.
Adaptive Flow Layout Element
Use this to add elements to your Layout that dynamically change their width and position based on the browser window and target system. In a typical use case, each Adaptive Flow Layout Element contains one Info Box component, which itself contains one Control (e.g. an input field).
Adaptive Flow Layout Full-Width Element
Use this to add elements to your layout that should always use the full width of the window (e.g. titles or text paragraphs).
Adaptive Flow Layout Group
Often, you have groups of elements that belong together (e.g. a person's name and last name). You can use the Adaptive Flow Layout Group component to ensure that Appway keeps these elements together, if the situation allows it.
Important: avoid deep nesting. While it's possible to nest groups inside groups, there are almost never any situations where this is a useful way of conveying relationships between the things on the screen to your users.
Putting everything together
How would you use all of these components in a real-life situation? In a typical use case, you'd add the Adaptive Flow Layout component to a Template, and put a placeholder inside it.
Next, create a Screen, and add the Template. First, let's add some basis elements to the layout. Remember, in an optimal situation, each Adaptive Flow Layout Element contains one Info Box component, which contains one control.
Your Screen should look a bit like this:
If you go ahead and open this Screen in a browser, you'll notice that it is responsive. You can resize the window, and the layout will adapt itself to the window size:
Note: For these layouts to appear correctly on mobile devices, you need to set a viewport meta tag. Typically, you would do this on your main template.
But that's not quite good enough yet. We want to make sure that Street and Number are always next to each other. We also want to add a title, and we want to add buttons. The title should span the full width of the window, and the buttons should not appear in the same grid as the fields.
To achieve the first goal, we'll group Street and Number using an Adaptive Flow Layout Group:
To achieve the second goal, we'll add an Adaptive Flow Layout Full-Width Element to the top of the Screen, and add a header. Then, we'll add another Adaptive Flow Layout Full-Width Element at the bottom, and add our buttons.
Let's look at this in the browser again.
Now, Street and Number are grouped together. There's a header at the top, and there are buttons at the bottom, which aren't affected by the relayouting. And everything still looks properly in all screen sizes.
Finally, if you want some buttons to be right-aligned, add a Float Layout inside the Adaptive Flow Layout Full-Width Element. Add Float Layout Elements for each button, and in the Float Layout Element's properties panel, pick whether it should be aligned to the left or the right. Voilà! Now you have buttons aligned to both sides of the form!
The Adaptive Flow Layout components offer a number of configuration propoerties to achieve more fine-tuned results. Note that it works just fine if you don't set any of these. However, if you have more advanced requirements for how the layout should work, these properties will help.
Starting with Component Extension version 3.5.1, you can change Adaptive Flow Layout configurations globally in your system by changing the extension's configuration options that start with "ext.workspace.adaptiveflowlayout.".
Important! These configurations are explicitly not intended to create different configurations for different devices! For example, do not try to create two different configurations for mobile devices and desktops. Instead, they are meant to create a configuration that makes sense for the elements that you put into your Adaptive Flow Layout. Let's say your Adaptive Flow Layout contains a form for an address. Traditionally, you would want to have two columns for this form, because the fields come in pairs of two: "first name" and "last name" belong together. "Street" and "Number" belong together. "ZIP" and "City" belong together. In this case, you would configure the Adaptive Flow Layout to show at most two elements next to each other.
Here's a list of the properties you can set on the individual components.
Adaptive Flow Layout component properties
Max Elements Per Row: No more than the given number of elements will be shown side-by-side. For example, if you set this to "3", there will never be more than three elements positioned horizontally next to each other.
Target Element Pixel Width: The Adaptive Flow Layout will attempt to size each individual element at this target size. Since size is dynamic, elements will usually not be exactly this size. If there's more room, they will be wider. If there's less room and there are no elements that could be moved away to make more room, elements will be smaller.
Max Element Pixel Width: Elements will never be larger than this width.
Top Label Cutoff: If elements get smaller than this width, the label will be moved to the top of the field in order to provide more horizontal space for the element.
Label Width Type: This allows you to specify whether you want to define the width of your labels in pixels or in percents. Depending on what you choose, another property will appear where you can enter the width in pixels or in percents.
Adaptive Flow Layout Group component properties
Groups basically allow you to set the same properties as the parent component. By default, the property "Inherit All Parent Properties" is set, which causes the group to reuse its parent component's properties. For example, if a Group is inside an Adaptive Flow Layout that has "Max Elements Per Row" set to four, and that group is set to inherit its parent's properties, then it will also show no more than four elements next to each other.
When "Inherit All Parent Properties" is turned off, the Group shows the same properties as the Adaptive Flow Layout component, with one small difference: for the property "Label Width Type", in addition to "Pixels" and "Percentage", you can also pick "Inherit". It allows you to change properties like "Max Elements Per Row", while still inheriting how labels are displayed from the parent component.
Finally, the Group component has a "Layout" tab. There, you can enable the "Group Has Layout" property. Once this is turned on, you can enter a Group Title. These two properties will cause the Group to receive a visual layout, indicating to the user that the child components are grouped.
Here's an example that uses some of these advanced properties. Let's say you want to replicate this layout using the Adaptive Flow Layout components:
First, start out by adding an Adaptive Flow Layout to your Screen. Set Max Elements Per Row to "1" (the first few rows only show one element). Set Target Element Pixel Width to "800", and Max Element Pixel Width to "900" (you want the first few fields to be really wide).
You should also set Label Width Type to "Pixels", and Label Width Pixels to "120". Setting pixels instead of percents allows you to make sure that the labels always have the same width, regardless of the width of their parent elements. This is important, because the first four elements will be wider than the last four. The last four are only half as wide as the first four, so if you set percents, you would have to double the percent values for the last four elements in order to make sure that the labels for all elements have the same width.
Now, you can add a Full-Width Element for the header, and the four Adaptive Flow Layout Elements for the fields. Add Info Box components inside the four Adaptive Flow Layout Elements.
Your Screen should look similar to this:
When you render it, you should see this:
Go back to your Screen and add an Adaptive Flow Layout Group to your Adaptive Flow Layout. This group will contain the first two fields that are shown next to each other, so add Adaptive Flow Layout Elements, Info Boxes, and Text Fields for those. Go back to the Adaptive Flow Layout Group, and turn off "Inherit All Parent Properties". This time, set Max Elements Per Row to "2", Target Element Pixel Width to "400", and Max Element Pixel Width to "450". Now that you have two elements per row, each individual element should only be half as wide as before.
Leave Label Width Type set to "Inherit", so that all Labels will display at the same pixel width.
Duplicate the Adaptive Flow Layout Group, and adjust the Labels.
Your Screen should now look something like this:
Finally, render your Screen. It should now look correctly. As you resize the window, the elements should adapt dynamically to the window width.
Dynamically Reloading Adaptive Flow Layouts
Starting with Component Extension 6.2.5, all relevant Adaptive Flow Layout components now work as Ajax Update Areas. This means that it is now possible to redraw them dynamically by setting an HTML ID, and then using an Ajax Update Area Action with the same HTML ID to re-render them on the fly.
Note: If you're still on an earlier version of Appway, you can achieve a similar effect. This document explains how.
Note: This document assumes that the "nm.workspace.css.version property" is set to "v2" or higher. If it is set to "v1", additional CSS styles may be needed to achieve the behavior described .
Back to Cookbook
Could this article be better?Yes, let me send feedback