Side-by-Side Sections

Side-by-Side Sections display questions and answers in a condensed, two-column layout. This can make it easier and faster for field users to scan, complete, and confirm the answers in a form. This topic describes how a Side-by-Side Section works and when to use it in your form.

Available on the Enterprise tier only:

Essentials
Advanced
Enterprise

Contents

How Side-by-Side Sections work

Side-by-Side sections display questions in a two-column layout in the TrueContext Mobile App. With Side-by-Side Sections, you can:

  • Remove extra space in the form to reduce scrolling time.
  • Fit more information on a single screen, which makes it easier for field users to scan for context within and across sections.
  • Vary section formats to make a form easier to navigate.

Note:Customer Feedback forms do not support Side-by-Side sections.

Side-by-Side Sections in the Mobile App

The following example shows a comparison of a Side-by-Side and a Regular SectionClosed A Regular Section is a set of related questions grouped together for easy reference. The data captured is “non-repeating”. That is, field users enter a single instance of each answer. in the Mobile App. The first example shows a Side-by-Side Section. The second example shows the same questions in a Regular Section. The two-column layout makes the Side-by-Side section shorter than the Regular Section.

Two-column Side-by-Side layout

A Side-by-Side section labelled "Job Details" that is a list of seven questions. The two-column layout makes the section about 40% shorter than if it was a Regular Section.

Over-under Regular layout

A Regular Section labelled "Job Details" that contains seven questions.

Side-by-Side Sections in the Form Builder

When you create a Side-by-Side Section, you choose a question-to-answer ratio.

You can change the layout of a Side-by-Side section based on your section's contents. A Side-by-Side section named "Job Information" shows its layout set to the 40:60 option, since its contents have short, one-word questions but require slightly longer answers.

The ratio determines the width of question text and answer field columns in the TrueContext Mobile App. By default, the ratio is 50:50, which works well for most questions. Some question types always display at full width. You can also Keep question width to 100% for specific questions within the Side-by-Side section.

Side-by-Side section settings only apply to form pages in the Mobile App. They have no effect on the summary view, document formats, or Web Portal display.

Tip:

  • When you select a question-answer ratio, think about the question types you plan to include in the section. Wider question types, like Button Group, don’t fit well in smaller answer widths, especially on smaller devices.

  • The Side-by-Side display works with views wider than 390 dp. Smaller view screens display the questions full width.

  • Use the Change Section Type setting to easily switch between Regular and Side-by-Side sections. You don’t have to re-create existing sections. Edit the section to change its type.

Side-by-Side Section setup

To add a Side-by-Side Section, fill in the section information, choose a question-to-answer ratio, and save your changes.

The Form Index displays the Side-by-Side icon The Side-by-Side section icon that displays next to the section name in the Form Index. The icon is a two-column table with two rows. next to the Side-by-Side section name. When you add questions to the section, the Form Builder shows the questions in a two-column layout.

A Side-by-Side section labelled "Sign Off" in the main Form Builder pane view. The Side-by-Side section displays its questions in a two-column layout, and has two questions set to full width.

Info:The topic Build Sections describes in detail how to add and set up a Side-by-Side section.

When to use a Side-by-Side Section

The following table describes each section type and layout.

Section type Layout Example Works best for…
Regular Full-width, over-under (“stacked”) Regular section titled "Failure Details" with the question text "Photos of problematic inspection items" displayed full-width "over" (above) the answer field, which also displays full-width

  • Long question text or answers

  • Question types that display best as full-width

Regular with Multicolumn Layout

(Enterprise tier only)

 Flexible, questions flow from one column to the next macOS view of a Regular section with a Multicolumn Layout that spans six columns. The image shows how you can set up questions to span a specific number of columns, expand to fill empty space, and always start the next question on a new line.

  • Fitting a lot of information into a single, concise view

  • Giving form designers precise control over how questions are presented to field users

Side-by-Side

(Enterprise tier only)

 Two-column, with configurable ratio Side-by-Side section titled "Job Details" with question text "Job name" displayed next to a dropdown answer field

  • Short question text

  • Short answer text

  • Short option descriptions

Template-Based

(Enterprise tier only)

 Full-width, over-under (same as a Regular Section) Template-based section titled "Health and Safety Checks" with the question text "Floor Number" displayed "over" (above) the answer field, which also displays full-width

  • Reusable groups (blocks) of questions to help the Admin build forms more quickly and consistently, such as audit-based forms
Repeatable

Summary Table for quick reference and editing

 Repeatable section titled "List Materials" with the Summary Table view that shows column 1 "Material type" and column 2 "Quantity", with two rows (entries) completed

Note:Use a Repeatable SectionClosed A Repeatable Section is a subform that contains a set of related questions. The data captured is “repeating”, because the field user can complete the same subform more than once, which creates multiple entries. only for its intended purpose of adding information in a repeating subform. Do not use a Repeatable Section to achieve a particular layout. If you need additional layout options for questions in a Regular Section, consider upgrading to the Enterprise tier, which includes a Multicolumn Layout.
Summary Table Enterprise tier options

Compact viewClosed The term "compact view" refers to a Summary Table in a Repeatable Section. The compact view displays the Summary Table "inline" with the rest of the form. The "full view", by contrast, displays only the Summary Table. options include:

  • Wrap rows to new line
  • Hide headers

This example shows rows wrapped and headers hidden:

HVAC System Inspection summary table compact view that shows the third column wrapped to a new line and the column headings "Unit Type", "Part Wear or Damage" and "Inspection Result" inset in the cells. It's obvious from the user's answers ("Furnace, No Wear or Damage", "No Repairs Required") that the headers aren't needed to provide context.

The Full viewClosed The term "full view" refers to a Summary Table in a Repeatable Section. When a field user selects the "View All" option, the table opens in full view, and no other part of the form is visible. The "compact view", by contrast, displays the Summary Table "inline" with the rest of the form. (View All) options that help field users to show only relevant information include:

  • Allow users to sort by columns
  • Allow users to filter by one column

This example shows the filter option:
When the subform opens, the layout can be over-under, Multicolumn, or Side-by-Side Repeatable section "Materials Used" with an entry (sub-form) open that displays the Side-by-Side two column layout, with question text on the left and answer fields on the right

Info:The topic Form Layout Options provides more details about the different layouts.

Full-width question types

To ensure the best user experience, the following question types always display at full width in all sections, including Side-by-Side:

  • Audio Recording

  • Card List

  • Document Editor

  • File Upload

  • Image

  • Information Label

  • Resource Image

  • Signature

  • Sketch Pad