ProblemI'm creating a solution that uses 6.2's new Workspace design, and am following Appway's recommendations on how Screens should be built. However, many of the Screens I'm building tend to become very long. This requires people to scroll a lot, and it's often not immediately obvious what the Screen actually contains, as a lot of content is "below the fold".
SolutionLong screens are an intentional result of our new Screen design guidelines. There are a number of reasons for this.
1. Screens that only require vertical scrolling help guide users
The interaction design of a Screen becomes complicated once you start adding in tabs and other UI elements. Users have to scroll down, scroll back up, change the tab, look through the next tab, and so on. Also, in some situations, tabs can cause nested scrollbars to appear, which is confusing.
If you instead go with a single long Screen, the interaction design is clear and obvious: Users start at the top and work their way down. Once they've reached the bottom of the Screen, they can be sure that they've filled in every text field, seen every validation error, and noticed every mandatory field.
2. Screens that only require vertical scrolling don't hide anything
UI elements like tabs hide parts of the screen. This is particularly problematic if you have mandatory fields or validation errors. With tabs, it's possible that the user can't progress to the next screen, but also doesn't see what the error is, because the error is hidden inside a tab.
If you instead go with a single long screen, nothing is hidden from the user.
3. Screens that only require vertical scrolling work consistently across screen sizes and devices
Tabs and nested scrollbars become cumbersome and hard to use on smaller devices like phones and tablets.
Single long screens, on the other hand, are simple to use - and common on these types of devices. People are used to just scrolling through a form or a list.
Providing users with an overview of screen content
But that still leaves us with the issue you pointed out: A single, long screen means that the user sometimes doesn't immediately see the structure of the screen. For example, if the screen shows multiple address forms, the user might want to be able to jump directly from form to form, without manual scrolling.
To solve this problem, Appway offers the Adaptive Table Of Contents component. It can be used in two different ways: in conjunction with the Adaptive Flow Layout, or as a standalone component.
Using the Adaptive Table Of Contents component in conjunction with the Adaptive Flow Layout
If you already use the Adaptive Flow Layout, and Groups with titles, just add the Adaptive Table Of Contents component to your Screen (typically to the left sidebar), and everything will work properly.
Let's say your screen contains four Adaptive Flow Layout Groups, and looks a bit like this:
Upon opening the screen for the first time, the user won't immediately see how many groups there are, nor be able to jump to groups directly without scrolling.
Add the Adaptive Table Of Contents component to the sidebar, and the Screen now looks like this:
The user can now immediately see what the screen contains, and can jump to each section.
But wait, there's more! If you're using the Adaptive Flow Layout Group's validation feature, the Adaptive Table Of Contents component automatically picks up validation states. If all groups are valid, it won't show anything. But if there are any groups that don't validate, the Adaptive Table of Contents shows the correct validation state for each group.
Using the Adaptive Table Of Contents component as a standalone component
• What if the Adaptive Flow Layout Groups don't correspond to the entries you want to show in the Adaptive Table Of Contents?
• What should you do if you want to show a validation state for the different sections immediately when the user first opens the screen, and not only after validation?
• What if a section could have a warning, but still be complete - and thus need the checkmark and the warning icon?
• And what if you want to have more than one Adaptive Table Of Contents component on a single screen, showing different entries?
Two steps are required:
1. Switch the Adaptive Table Of Contents component into standalone mode by changing its "Take entries from..." property from "Adaptive Flow Layout" to "Adaptive Table Of Contents Entries".
This enables an additional property called "Entry Group Name", with a default value of "Default". For now, you can leave this value unchanged.
2. Go through your screen, and add Adaptive Table Of Content Entry components at every target location; that is, the location the screen scrolls to when the user clicks on the corresponding entry in the Table Of Contents component.
The Table Of Contents Entry component has the following properties:
TOC Entry Text is the text shown in the Table of Contents for this entry.
Group Name is the name is used to sort Table of Contents Entries into different groups. The Table of Contents component has a corresponding "Entry Group Name" property; each Table of Contents component only shows the entry with that specific Group Name. Again, since we only have one Table of Contents component on our screen, you can leave it as "Default".
Complete is a String returning a Boolean. If it's true, the checkmark is shown. If false, the checkmark is not shown.
Validation State (non-blocking) contains a Script that returns true (no validation problem) or false (there is a validation problem in this section). Note that unlike normal validation, this is non-blocking, and evaluated immediately when the Screen is opened for the first time. This allows you to show errors without validating the Screen first, and it allows you to show errors that don't prevent the user from moving ahead in the process.
Validation Message is the message shown when the user hovers over a validation error icon in the Table Of Contents component.
Using these properties, you can model relatively complex behavior. You can also add and remove Table Of Contents Entries dynamically using Ajax Update Areas, causing the Table Of Contents component to adjust automatically.
Back to Cookbook
Could this article be better?Yes, let me send feedback