10,655
edits
Important: Deprecating old WebView — Publish failed error
Form: Difference between revisions
Jump to navigation
Jump to search
→Displaying multiple fields per row
| Line 333: | Line 333: | ||
Traditionally, on a form tab, each row is exactly one field. This makes perfect sense on narrow devices and lower resolution displays. However, if your app users are using larger devices with high-resolution displays, such as tablets or a computer, it can be useful to display two or more fields per row. You have two options how this can be configured: | Traditionally, on a form tab, each row is exactly one field. This makes perfect sense on narrow devices and lower resolution displays. However, if your app users are using larger devices with high-resolution displays, such as tablets or a computer, it can be useful to display two or more fields per row. You have two options how this can be configured: | ||
=== Auto Grid (property of a tab) === | |||
Auto Grid can be particularly useful when your users have a variety of devices and you value flexibility. | |||
Select a form tab and on the [[Form#Properties_pane|'''Properties''' pane]], set the maximum number of columns per row (for example 3), and the minimum width of a field cell (for example 250). In the app, if the available width for your form tab exceeds 500, two fields are displayed in a row; when it's over 750, the maximum, three fields are displayed in a single row. | |||
Additionally, for each field, you can force it to be always displayed as a single row, or disallow any fields after it in a single row. This behavior is controlled by the Grid Behavior property; you can configure it for each field of your tab. | |||
[[File:Auto Grid example configuration.png|600px]] | |||
For more information about automatic grids, see the [https://www.youtube.com/watch?v=7SNgmuFbOvk feature introduction] {{Badge|Webinar}} and [https://blog.resco.net/2019/03/29/whats-new-in-rescos-spring-update-2019/ blog]. {{Badge|Blog}} | |||
If you want to enable the automatic grid for all forms of your project, go to Woodford [[Configuration]] and modify the parameter '''Auto Form Grid'''. The default value is 0 (disabled). The '''Min Width''' property of your form overrides the general project settings. | |||
=== Table === | |||
To ensure that your fields are displayed exactly as designed, use the '''Add Table''' function. You lose some of the flexibility compared to Auto Grid, but the same table is rendered on all devices. | |||
# Select a form tab and click '''Add Table'''. | |||
# On the [[Form#Properties_pane|'''Properties''' pane]], use the + and - buttons to define the number of columns and rows. | |||
# Add fields to the table (make sure they are actually inside the table element). | |||
# Select each field and on the '''Properties''' pane, select the table cell(s) to define the '''Position in table'''. Note that you can click and drag across multiple cells. | |||
[[File:Grid item example.png|600px]] | |||
[[Category:Woodford]] | [[Category:Woodford]] | ||