Tableless form design in Appway versions before 6.0

Screen Design

Screen Layout

Adaptive Design

Problem

Appway 6 has this nifty new Adaptive Flow Layout component. But I'm stuck with an older version of Appway. What can I do to avoid using tables when I design forms in Appway?

Solution

Historically, people used tables to design HTML pages because HTML simply didn't provide any better tools. Nowadays, HTML does provide these tools. The disadvantages of using tables outweigh their advantages by far.

Tables are complicated, and require using many different Screen components.
Screens designed using tables are large, and can take a long time to transfer over the web.
Screens designed using tables have a fixed layout that can't be changed without changing each Screen individually.
Tables are not mobile responsive, and don't scale down to mobile devices.
Tables can cause accessibility problems, because they force the HTML code to match the visual design of the page.

Fortunately, Appway offers many different ways of implementing layouts for which tables were traditionally used in a much more modern way that doesn't have these issues. For this particular example, we'll look at a typical use for tables, and show how it can be replaced with a better solution. Even though the new solution takes a tiny bit of work to set up, once this setup is done, it's actually much easier to use than the table-based approach.

First, let's look at a typical Screen that uses tables for its layout. You've probably seen Screens like this one:

When this Screen is rendered, it looks like this:

In addition to requiring a lot of Screen components, this produces a lot of HTML for a small Screen. And the Screen always looks like this, regardless of the device it runs on. Finally, if you have several of these Screens and you want to change the layout, add some more padding, or make any other consistent visual change, you'll have to manually go through all of the Screens and make the change on each Screen individually.

A better way

This document shows a better way of achieving a similar kind of layout. It requires a bit of setup, but once this is done, the actual Screen design will become even a bit simpler than with the table-based solution.

Setup

Upload this CSS file as a Resource.

AppwayResponsiveForm.css

It just contains two classes:

1
2/** This class sets the max width of your form **/
3div.ResponsiveForm {
4    max-width:600px;
5}
6/** This class sets the size of an individual Form element **/
7div.ResponsiveForm div.ResponsiveFormElement {
8    float:left;
9    width:300px;
10}

Next, go to your main template, and include the uploaded CSS file as a HTML Head Link. In this example, I'll include it directly in the Screen, but in a real-world situation, putting it into the main template makes much more sense.

That's all of the setup you need. Let's look at how you'll use these CSS classes.

Usage

Go back to your Screen and throw out your table. Instead, add a div element, go to its "Style" tab, and add a Style with the name "class" and the style "ResponsiveForm". This will associate the div with the ResponsiveForm CSS style we've defined above.

Next, add another div element, inside the previous div element, but this time, set the class to "ResponsiveFormElement". Copy the div as needed, and then add InfoBoxes inside the divs, and Controls inside the InfoBoxes. Unlike with tables, you don't have to worry about Rows and Cells. Just add as many fields as you need.

Eventually, your Screen should look something like this:

Now, go the the Library and run the Screen. It should look very close to your table-based design, but load a bit quicker, because there's much less HTML to send to the browser.

Here's a nifty trick, though. Resize your window so the fields don't fit anymore. The form adapts to the window size!

Here's another bonus: if you need to make changes to how forms are shown in your solution, you only have to edit the CSS Resource you created at the beginning. With one change to a single Resource, you can make global changes to every form in your solution!

Forwards Compatibility

This approach to form design will continue working in Appway 6. However, there's actually a pretty simple upgrade path to Appway 6's new Adaptive Flow Layout component. Simply replace all divs that have the class "ResponsiveForm" with Adaptive Flow Layout components, and replace all divs that have the class "ResponsiveFormElement" with Adaptive Flow Layout Element components. And you're done!

Could this article be better?Yes, let me send feedback

Back to Cookbook

Comments (0)

Cookbook

Tableless form design in Appway versions before 6.0

How Could This Recipe be Improved?

Developer is transitioning to Appway Community

See Also

COOKBOOK