Screens

List, detail, filter and layout screens stored as Form.io definitions.

Version

A screen is a Form.io definition bound to a saved query. The runtime renders four screen types (List, Detail, Layout and Filter) and can open them as a page, sidebar, dialog, child screen or quick view.

Components

33 platform components extend Form.io: data grid with inline editing and export, kanban, Gantt, scheduler, pivot table, charts, file manager, document editor, spreadsheet, query builder, lifecycle stage, comments, history and more.

Layout rules

Rules show, hide or require fields and sections based on the record's values, and a record can switch between layouts.

Permissions

The metadata service checks screen access and marks components hidden or disabled for the user before the definition is sent, so one screen serves every role.

Screen types

Type	Use it for
List	Tabular data: a project list, a task list, an expense request list.
Details	A detailed view or form for one record: a user profile, an expense request.
Layout	A reusable layout that keeps design consistent across screens.
Filter Panel	Advanced filtering for large lists, shown with a list screen.

Dashboards, kanban boards and master-detail pages are composed from these, using components such as charts and the screen renderer, which displays other screens inside a screen.

Create a screen

Go to App Builder > App Setup > Screens and choose + Add Screen. In TAF Studio, run TAF: New Screen.
Enter a unique screen name, the screen type, the data source (the DSQ the screen reads, for example the detail DSQ of the entity) and a short description.
Save, then design the screen in Designer Mode.
Use Preview to check how it looks and behaves before you finalise it. From the screen list you can also edit or delete screens.

The designer

The screen designer uses the same rendering engine as the runtime web app, so what you design is what users see. The left panel lists the components; the canvas on the right is where you arrange them. Drag a component onto the canvas, then set its properties.

Edit JSON opens the screen's JSON representation for direct editing, and Preview JSON shows it read-only.
Screen Analytics shows the lowest, highest and average execution time, total usage, and a trace of when and by which user the screen ran.
In Studio, TAF: Design Screen opens the same drag-and-drop designer and TAF: Preview Screen previews it.

Designer components

Form components

The form components come from the Form.io library: text field, text area, number, checkbox, select, radio, date picker, email, file upload and signature, plus structural components such as panels, tabs, columns and content blocks. On a Details screen, a field's key must match the name of a field the DSQ returns, so the form loads and saves the right values.

Rich components

TechAppForce adds components for business screens, among them the grid, list view, tree view, kanban board, chart, pivot table, scheduler, Gantt chart, spreadsheet, rich text and document editor, file manager, comments, history and query builder. A grid is bound to a DSQ and derives its columns from the query; you override how each column is displayed in the grid's configuration.

Note

Lookup fields can be shown as dropdowns whose options come from a DSQ, so the choices respect the user's access and any filters you set.

List and detail layouts

Add the Layout component to give a screen the platform's standard page chrome. Select it, open the Configuration tab and choose a layout.

Layout	Settings
List layout	Target component key (the grid it manages), filter screen, hide page title or breadcrumbs, enable custom views, hot actions, and menu actions in the top-right menu.
Detail layout	Hide page title, breadcrumbs, close icon or tags, prevent default navigation after close or submit, hot actions, menu actions and header actions.

The detail layout reads platform data from the screen's DSQ:

Include recordinfo.title to show the record title.
Include recordinfo.blueprintid to show the lifecycle status dropdown. If it is empty, the dropdown does not appear.
Include recordinfo.createdon, recordinfo.updatedon, recordinfo.ownerfirstname and recordinfo.ownerlastname to show record history.

Actions and events

Buttons and other controls do things through events. A user-defined event has a trigger spot (a toolbar, a button, a dropdown), a trigger component with its icon and permissions, and an action:

Open Screen, with an opening mode (for example a modal) and parameters such as the record id.
Broadcast Event, which raises a named event other components respond to.
Submit, which submits the form or runs a data action.

Component-based events are predefined system events; the one available today is Add Record. A common pattern is a toolbar button that broadcasts Add Record, which opens the create form.

Permissions, scripts and styling

Permissions tab. Create permissions for the screen and apply them to components to show or hide parts of the screen by role, team or user. A whole screen can also be restricted to roles; those roles still need read access to the entity for data to appear. See Roles and access.
Scripts tab. Business logic that runs when the screen is displayed, for dynamic behaviour based on the record or the user. See Custom scripts.
Custom CSS tab. Styles applied only to this screen.

Menus and publishing

A screen is reachable once a menu item opens it. Add menu items from the menu settings in the web app, or with TAF: Menus in Studio. In Studio, edits stay local until you publish them, and an empty screen cannot be published because it would blank the live screen. Run TAF: Check for problems first: it reports duplicate component keys, fields a query uses that its entity does not have, and filter logic the platform would ignore.

Keep screens consistent by reusing layout screens, add filter panels to large lists, and review screen analytics after release to find slow pages.