The widgets

Everything you see on a screen is a widget. The Widgets palette, to the left of the canvas, ships with 32 widgets — you leave this page knowing what each one is for, and with the main ones explained in detail. If the app has widgets programmed by you, they appear on the same palette, in the Custom section.

#The catalogue, by category

#Form fields

They all bind to a field of a record datastore (Data binding section) and enter the validation — see the forms.

Widget	What it is for
Textbox	Single-line text. Has Mask, Password (hide text) mode and placeholder.
Text area	Long, multi-line text — notes, descriptions.
Number	Numeric values.
Yes/No	A boolean switch.
Dropdown	Choice of options: Fixed list, Model enum or Datastore; with Searchable, Multi-select and Tree (hierarchical) mode.
Date	Date, Date & time or just Time (the Type field decides).
Color	Choice of a colour.
File upload	Upload by drag and/or button, with preview, size limit and choice of storage.

#Actions and navigation

Widget	What it is for
Button	The classic action. Show: Icon + Text, Icon only or Text only; the Click action navigates, opens a modal or runs code.
Menu button	A button that opens more options. Look: Split (the body acts, the arrow opens the menu), Menu or Hamburger. Each option can hide or disable itself by conditions.
Link	Clickable text — Target: App screen (with parameters) or External URL (with Open in a new tab).
Breadcrumb	The "you are here" path, with clickable levels and the last level fixed or bound to a field.
Export	A button that downloads a datastore's data as a spreadsheet (.xlsx) — chosen fields, optional Header row and File name with {date}.

#Structure

Widget	What it is for
Panel	A container with a frame and a title — it tidies up widgets, which now move together.
Tabs	A container with tabs; each child widget belongs to one tab. Tab style: Boxed, Pills or Underline.
Fixed bar	A full-width bar, pinned to the Top or the Footer of the screen — for always-visible action bars.
Line	A separator line, Horizontal or Vertical — the colour and stroke come from Appearance.

#Content and media

Widget	What it is for
Label	Plain text — titles, captions, loose values. Accepts Phrase values ({n} in the text).
Markdown	Rich text written in Markdown — fixed or coming from a field.
Image	An image by Fixed URL, app Asset or Field (dynamic); Fit: Contain, Cover or Fill.
External page	Embeds an outside page (a map, a video, third-party BI) or HTML written by you. It runs isolated: it sees neither the session nor the app's data.

#Data

Widget	What it is for
Table	The grid of records — typed columns, sorting, selection and action buttons. Detail below.
List	Records in a vertical list, with fields in roles (Title, Subtitle, Body, Caption) and an optional image.
Cards	The same template as the List, but as a grid of cards with N Columns.
Chart	Drawn series — bars, lines, pies and more. Detail below.
KPI	A strip of numeric indicators with trends, target and sparkline. Detail below.

#Boards and planning

Widget	What it is for
Kanban	Cards draggable between status columns. Detail below.
Calendar	Events in Day/Week/Month/Year views. Detail below.
Gantt	Start→end bars with progress, groups and dependencies. Detail below.

#Documents and processes

Widget	What it is for
Report	Shows an app report (PDF) inside the screen, with parameters bound to what is on the screen and an Action bar to refresh and download.
Process status	The history and current step of a record's workflows, with decision buttons when the open task belongs to whoever is looking.
My tasks	The workflow task inbox of the signed-in user — it opens the task's screen and decides from there.

#The Table

The Table is the platform's most used widget: it binds to a list datastore and shows the records in a grid, with paging, sorting and selection.

#Columns

When you bind the datastore, the columns are born one per field. Then you fine-tune: under Columns, use + column to add, and click a column on the canvas to edit it — the inspector switches to it.

Each column has a Header, Width, Sortable by header, Hidden — and a Type:

Type	What it does
Text	The value as it is, with an optional Mask (# = character).
Number	Formats the value: Number (regional) (with Decimal places, Thousands separator, Compact — 1.2M instead of 1,234,567 —, Prefix and Suffix) or Mask (# = digit).
Link	The cell becomes clickable. Target: App screen (with parameters coming from Row field, URL parameter or Fixed value) or Script — your code running on the click.
Image	Shows the image whose address/content is in the field.
File	A download link for the file referred to in the field.

#The table's actions

In the Behavior category, the actions section creates the CRUD buttons: Refresh, Add new, Edit record, Delete record and Delete multiple. Each enabled action creates a loose button on the canvas, linked to the table — you position and style that button like any other.

• Add new and Edit record open a screen or a modal of your choice (typically the record's form), with the parameters filled in from the row.
• Edit record and Delete record only become enabled with a row selected; Delete multiple works over the Multi-select (the switch that adds the checkbox column).
• The actions that write require the datastore to have a primary key — the inspector warns: The datastore needs a primary key.

#Forms (inputs + record + validation)

There is no "form" widget: a form is the sum of three pieces, and it is that freedom that lets you draw the record card however you want.

1. Create a record datastore on the screen (see Datastores and data) — for example, conta, loaded by the key coming from the route's id parameter.
2. Drag the form fields (Textbox, Dropdown, Date…) and, on each one, point the Data binding at the right field of the datastore.
3. Add a "Save" Button whose event saves the datastore — the pre-defined Save datastore action of the event editor writes the code for you (see Events and the SDK).

Validation lives on each field, in the Validation category:

• Required — the field has to come filled in.
• The standard rules: Min characters, Max characters, Is email, Is phone, Is number, Min value, Max value, Pattern (regex) and Equals field (password confirmation, for example).
• Validation with a script — for logic of yours: the code receives value (the field's current value) and returns true if valid, or the error message. A tax number, an IBAN, a business rule.

On save, the validation all runs: required fields first, then the rules, then the script. The record only goes through if everything passes.

#The Chart

The Chart binds to a datastore and draws series. Under Chart type you choose: Bars, Line, Area, Pie / Donut, Scatter, Radar, Gauge, Funnel or Heatmap.

The essential part is the mapping, in the Data category:

• Category field (X axis / slices) — what separates the bars/slices.
• Value fields — one or more numeric fields; each one is a series.
• Series field (grouping) — as an alternative to the several values: it pivots by the first value field and creates one series per distinct value (with no values, it counts records).

And then the finishing touches:

Option	What it does
Stacked, Horizontal, Smooth lines, Point labels	Variations of the drawing, depending on the type.
Legend, Legend position, Tooltip	The chart's chrome. The legend can also be dragged directly on the chart to position it.
Value format	The same format as the table's Number columns, applied to axes, labels and tooltip.
Value scale	Linear or Logarithmic — logarithmic is for when the series differ by orders of magnitude.
Use a second axis	An axis on the right with its own scale — for putting a euro total and a count on the same chart.
Series	Type per series (bar and line combos) and which series go to the 2nd axis.
Advanced options	A code editor with all the chart engine's properties, with autocomplete — applied on top of the configuration, for the cases the fields do not cover.

#The KPI

The KPI is a strip of indicators — four numbers side by side are made with one widget of four indicators, not with four widgets: the alignment and the spacing come guaranteed.

Each indicator (under Indicators ▸ Add indicator) has:

• A Label and icon, with Caption position (Above the value / Below the value).
• Value (field) + Aggregation (Sum, Average, Count, Maximum, Minimum, First, Last) over the dataset — or a Manual value when there is no data bound.
• Trends (Add trend) — comparisons under the number, with a Reference field, Percentage or Absolute value format, and Lower is better (invert colors): on rising debt, the arrow has to be red.
• A Target — No target, Manual value or Datasource field, with an optional Progress bar.
• Show sparkline — the little history line, with a Series field.
• Period (from field) — which close the number refers to (an ISO date is shown as MM/YYYY).

The dataset is shared by the widget, but each indicator can have an Own dataset.

#The Kanban

The Kanban shows records as cards in columns — the opportunities pipeline of Gestão de Clientes is a kanban by status.

1. Bind the datastore and choose the Status field (column) — the field that says which column each card is in.
2. Set the Columns source: Static (you add each column with a Label, a Value and a colour) or Enum (the columns come from the values of a model enum).
3. Compose the Card template — the fields and roles, as in the List.

With Allow dragging cards on, moving a card saves the new status to the record right away. An Order field (a numeric field) makes the ordering within the column persistent. Uncategorized column catches the records whose status matches no column; Card count shows the total in the header.

The actions: Card click (edit) and Create card (column button) — each one can navigate to a screen, open a modal (with the row's and the column's parameters) or emit an event for your code.

#The Calendar

The Calendar shows records with a date as events, in the Day, Week, Month and Year views.

• Fields: Date field (start), End field (optional) (multi-day events), Title field.
• Event color: Single or By field — with a value → colour map (a type enum, for example).
• View: Initial view, Available views, First day of the week (Monday/Sunday), Max events per day in the month view, Start/End hours in the day/week views, Navigation bar and View switcher buttons.
• Actions: Event click (edit) and Day/range selection (create) — the start/end travel to the target screen as parameters, ready to pre-fill the creation form.

The calendar only loads the records of the visible range — changing month fetches the new month, not the whole table.

#The Gantt

The Gantt draws start→end bars on a timeline — project planning, campaigns, customer onboarding.

• Fields: Start field, End field, Label field, Progress field (0–100) and Group field (groups rows).
• Dependencies field — the IDs (primary key) of the predecessors, as a JSON list or comma-separated; the Gantt draws the arrows.
• Initial zoom (Day, Week, Month), Today line and Shade weekends.
• Actions: Bar click (edit) and Empty area click (create) — the clicked date travels as a parameter.

The Gantt is read-only: the bars are not dragged — the dates are changed on the record's form.

#Why doesn't…?

• Why doesn't the Validation section appear on my widget? Only form fields validate — a Button or a Label have no value to validate.
• Why does the widget appear on the palette but grey on the canvas? It is disabled (the Enabled switch in the Layout category) or a rule/event disabled it.
• Why don't I see data on the canvas? The canvas shows samples — the real data appears in the preview and in the published app. Check the binding in the chapter Datastores and data.