Skip to content

How to create a form with tabs

Please refer here for general information about Form Controllers and Layouts.

using the PageBreak node you can divide fields between pages in the same form: it is a very useful feature in case of models with a large number of fields.

In the following example from a real project, a model with 60 fields has been divided in 4 different tabs. The value assigned to the PageBreak node becomes the caption of the tab:

yaml
FieldSet:
  Row:
    Field: Description
      CharWidth: 30
    Field: IdNumber
      CharWidth: 20
  Row:
    Field: LastPromotionDate
      CharWidth: 15
    Field: WorkingLocation
      CharWidth: 20
  Row:
    Field: BirthDate
      CharWidth: 15
    Field: BirthPlace
      CharWidth: 35
  Row:
    Field: BirthCountry
      CharWidth: 25
FieldSet:
......
Pagebreak: Permanent Address
FieldSet:
......
Pagebreak: Contact Address
FieldSet:
......
Pagebreak: Other Info
FieldSet:
.....

StandAloneForm.png

Required fields validation across pages

When a field marked as required (from a not null column in the model, or IsRequired: True on the ViewField) is left empty and the user clicks Save from a different page than the one containing the field, the form automatically switches to the page holding the first invalid field and shows the native browser validation tooltip anchored to it. The user never has to guess which tab contains the missing value.

This behavior works uniformly for simple forms, master forms with detail tables (Save-cache path) and detail forms (Tabs/Bottom/Popup styles).

Released under Apache License, Version 2.0.