Flexible form

User interface components
Home screen View Responsive view design Row script Form Flexible form Process Tagged image Timeline Chart Hub Calendar Dashboard Tree view

Forms are one of the components of mobile apps. Flexible forms offer an alternate rendering of forms. All form tabs are displayed simultaneously, users no longer have to switch between tabs. Flexible forms work particularly well with larger screens, where users get a perfect overview of any record at a glance.

Enabling flexible forms

Flexible forms need to be enabled in project's configuration. If you don't enable them, the classic UI using tabs is used.

Edit an app project.
Select Configuration from the Project menu.
Set Full-screen Forms to True. This option applies to tablets only and determines whether forms open in full screen mode or in one column.
Set Flexible Forms to True. This option enables flexible forms.

Configuring layout

Edit a form and click Layout to set up its display options.

Flexible Form option

Project Default – Form is displayed in old or new UI, depending on Flexible Form option in project’s Configuration.
Enable – Enables the New UI Form.
Disable – Form with tabs will be used.

Note	Per-form setting has priority over project configuration.

Layout (Applicable for tablet devices, when form is in full screen)

Single Panel – Form is displayed in one column, all items are below each other, like on phone devices.
2 Panel Auto – Right or left panel covers more space (depending on the content – which panel has more items on it).
2 Panel 33% – Right panel is larger.
2 Panel 66% – Left panel is larger.

Full Screen

Project Default – Form follows the project settings.
Enable – Form is opened in full screen.
Disable – Form is opened in collapsed mode (like in old UI).

User Resize

Project Default – Form follows the project settings.
Enable – User can resize the form (switch to full screen or to collapsed mode).
Disable – User cannot resize the form.

Setting up item properties

For additional tweaking you can configure the properties of each item.

Side: To set whether the item should be displayed on the left or right side. By default, the detail item (where you can add entity fields) is set to be on the left side and associated or unrelated list is on the right. Users can rearrange it as they wish.

Header

Select what to show on the item’s header. Options are:

Hidden – Item won’t have a header.
Icon & Label – Both, the icon and the label (name of the item), will be shown.
Label – Only the item name will be shown.

Width: Set the width of the item to one (normal) or two (large) columns.

Height: Set the number of lines per each item. Only this number of records will be seen at first, the rest will be reachable by scrolling within the list. Or it is possible to set the height in pixels. To learn more about it, please check this webinar. Webinar

Configuring flexible forms in the app

TBD