Form Settings

Form Settings are top-level configuration options that apply to the entire form — not to individual pages or elements. You can access them by clicking the form name (top level) in the left panel of the form editor.

Overview of settings

Setting	Description
Page container type	Controls the width of the form. Contained (default) centres the form with a max-width. Full width stretches it to fill the browser window.
Show changes warning	When enabled, warns the user if they try to leave the page with unsaved changes (dirty flag).
On form loaded actions	A list of actions that run automatically when the form first loads.
PDF settings	Options that control how the form is rendered when exported to PDF.

---

Page container type

Use this setting to control the layout width of your form.

• Contained (default) — wraps the form in a centred container with a maximum width. Suitable for most forms.
• Full width — the form stretches to fill the entire browser window. Useful for forms with wide tables or charts.

How to change:

1. Add a new Form to the Ruleset
2. Go to tab Settings
3. Under Page container type, select Contained or Full width
4. Save the Ruleset
5. Click Preview at the top to see difference between Contained and Full widt

---

Show changes warning (dirty flag)

When this setting is enabled, the form tracks whether the user has made any changes since the form loaded or was last saved. This is called the dirty flag.

If the user tries to navigate away or close the tab while the dirty flag is set, they will see a browser warning: "Leave site? Changes you made may not be saved."

How to enable:

1. Go to tab Settings
2. Toggle Show changes warning on
3. Save the Ruleset

Resetting the dirty flag

After a successful save or submit action, you typically want to clear the dirty flag so the user is no longer warned. Use the Remove form dirty flag action for this.

Example — clear dirty flag after saving:

1. Go to te tab Definition
2. Add a Button element with label Save
3. Under On click actions, add Execute ruleset (to save data)
4. Add a second action: Remove form dirty flag
5. Save the Ruleset

Now, after the user clicks Save and the ruleset executes, the dirty flag is cleared and the warning will not appear until they make further changes.

---

On form loaded actions

Actions listed here run automatically when the form is first loaded — before the user interacts with anything. Use this to pre-populate fields, show a welcome message, load data, or set default values.

How to add:

1. Go to tab Settings
2. Under On form loaded actions, click +
3. Select the action type (e.g. Execute ruleset, Set variable, Show toast message)
4. Configure the action
5. Save the Ruleset

Example — show a welcome toast on load:

1. Go to tab Settings
2. Under On form loaded actions, click +
3. Select Show toast message
4. Set Message to Welcome!
5. Save and click Preview

The toast appears immediately when the form loads.

Tip: On form loaded actions run in sequence, just like On click and On change actions. You can chain multiple actions — for example, execute a ruleset first to fetch data, then set a property based on the result.

---

PDF settings

These settings control how the form looks when rendered as a PDF (via PDF.renderForm()). They configure the paper layout, margins, and custom header/footer HTML.

Setting	Description	Default
Format	Paper size	A4
Landscape	Portrait or landscape orientation	Portrait (off)
Scale	Zoom level of the rendered page (0.1–2)	1
Margin top / right / bottom / left	Page margins (numbers or CSS units like 1cm, 10px)	30 / 35 / 70 / 25
Header template	HTML for the page header (printed on every page)	—
Footer template	HTML for the page footer (printed on every page)	—

Header and footer templates

Header and footer templates are HTML strings. Use the following CSS classes to inject dynamic print values:

Class	Value injected
date	Formatted print date
title	Document title
url	Document URL
pageNumber	Current page number
totalPages	Total number of pages

Example — create a PDF:

1. Go to tab Settings
2. Click on Set default footer under Footer template (default code for page number appears)
3. Go to tab Definition
4. Click on the + Element button and add an element of type Header
5. Set its Label to Print
6. Click on the + Element button and add an element of type Button
   1. Set its Label to PDF
   2. On click actions: select Print form to PDF and select the current form
7. Save the Ruleset
8. Click on Preview
9. Click on the PDF button