Flexible form

From Resco's Wiki
(Redirected from Form layout)
Jump to navigation Jump to search
User interface components

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.

A potential disadvantage of flexible forms is that the entire form is loaded every time, resulting in higher number of API calls compared to tabbed view (where tabs are loaded on demand).

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.

  1. Edit an app project.
  2. Select Configuration from the Project menu.
  3. 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.
  4. 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.

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.
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.
Set the width of the item to one (normal) or two (large) columns.
If the tab is a list view, it means the number of rows (other rows are accessible with a scrollbar); otherwise, it is the number of "segments" of a pre-defined height. The height can be also defined in pseudo-pixels (e.g., 100px). To learn more about it, please check this webinar. Webinar

Configuring flexible forms in the app

To enable flexible forms in Resco apps, tap Setup and enable Appearance > New Form UI.