ProblemMy Process template needs to show buttons aligned to the left and to the right, next to each other:
I heard I shouldn't use tables. How do I achieve this layout?
SolutionThis kind of layout can easily be achieved using Appway 6's new Float Layout component. Simply drag a Float Layout component into your Screen, and add four Float Layout Element components to it. Add a button inside each Float Layout Element. Click on each element and select whether it should be aligned to the left or right side of the Screen.
This is rendered exactly the way you asked for:
Ordering the Elements
If you go back to the screenshot of the Screen editor, you'll notice something peculiar: the way the buttons are ordered seems a bit strange. On the rendered Screen, the order is:
However, in the Screen Designer, the order is:
Why is that?
It's because the Float Layout Element components are ordered by priority. The higher up a component is, the higher its priority. This has two effects:
- Horizontal Ordering. The higher up a Float Layout Element component is, the further left (for left-aligned components) or right (for right-aligned components) it will be rendered. Because in the example above, "Next" is above "Previous", "Next" is rendered to the right of the "Previous" button.
- Vertical Ordering. The higher up a Float Layout Element component is, the higher up it will be rendered if there's not enough horizontal space to render all elements side-by-side.
We've already seen the effect of the "Horizontal Ordering" priority above. Now let's look at the effect of the "Vertical Ordering" priority.
Vertical Ordering Priority
If you replicate the Screen from the screenshot above, and make the window smaller, you'll see this:
Because "Cancel" and "Next" are above "Reassign" and "Previous", they are rendered above these two elements on smaller screens. Let's say you want to change this, and have "Previous" and "Next" shown above "Cancel" and "Reassign" on smaller screens. "Next" should be the right-most button, and thus the highest-priority button. This means that the buttons should now be ordered like this:
If you rearrange the buttons like this and preview the Screen, you get the intended arrangement on smaller screens:
This scheme can be a bit counter-intuitive for right-aligned buttons, because they "change" their sorting order (because "Next" is above "Previous", it appears after "Previous"). Just remember the following rules, and you should be fine:
- Float Layout Element components are added to the Float Layout component by priority
- Higher-priority Float Layout Element components appear further left (for left-aligned components) or further right (for right-aligned components)
- Higher-priority Float Layout Element components appear higher up if there's not enough horizontal space to render all elements side-by-side
If you want to visually group buttons together, you can use the Float Layout Group component. This allows you to have several buttons aligned to one side of the Screen, while still making sure that buttons that offer similar features (such as "forward" and "back") are chunked together, rather than bumping up against other kinds of buttons (such as "Cancel").
Download this awexport file to see some examples of the effect that this ordering has on the rendered screen.
FloatLayoutExample.awexport (Appway 6.0)
Back to Cookbook
Could this article be better?Yes, let me send feedback