5. Using Editor Mode

How to adjust backend (modules, entities, fields, scripts) and understand the frontend scaffold.

Use the Editor Mode for “surgical” adjustments to what the AI generated. Use the AI Chat for larger changes, with multiple screens and rules.

If you want the complete reference (field types, events and structure), also see Editor Mode.

Prerequisites

• You have edit permission on the project.
• Your app opens in Preview.

Backend (final example)

Example goal: a Task Manager module with entity Task, common fields, relationship and status rule.

1

1) Adjust the module and menus

In the Editor, open Modules and edit (or create) a module:

• Module name: Tasks
• Icon: choose one that makes the card easy to identify.
• Display Name Translations:

  • pt-BR: Tasks

Create a menu inside the module:

• Name: My tasks
• URL Path: /tasks

Avoid changing the URL Path later. This breaks links and bookmarks.

Expected result: the module card appears on the Home. The menu navigates.

2

2) Create/adjust the component (entity)

Create a Component:

• Name (lowercase): task
• Module: Tasks
• Display Name Translations:

  • pt-BR: Task

When saving, use these options (when they appear):

• Create frontend files: yes (if you want scaffolded screens)
• Create menu automatically: optional (if you already created the menu manually)

Expected result: the component exists and already has UI structure (if checked).

3

3) Model fields (with ready examples)

Inside task, create the fields below:

• title

  • Type: String
  • Required: yes
• description

  • Type: Text
• status

  • Type: Picklist
  • Options: New | In Progress | Review | Completed
  • Required: yes
• priority

  • Type: Picklist
  • Options: Low | Medium | High
• dueDate

  • Type: Date
• assignedTo

  • Type: User
• attachments

  • Type: Attachments

Quick tip:

• If the list becomes “tight”, adjust the Grid Width per field.

Expected result: the Task form has all fields. The list shows the main ones.

4

4) Add a (1-N) relationship with Project

Create a second component:

• Name: project
• Minimum fields:

  • name (String, required, unique)

Now go back to task and create a field:

• project

  • Type: Component
  • Related component: project
  • Cardinality: 1 (a task belongs to a project)
  • Display Field: name

Only check deleteCascade if you accept deleting data in bulk.

Expected result: in the Task form, you select a Project.

5

5) Create a reusable query (optional but useful)

In task, create a Query called Overdue:

• Filter: dueDate less than today
• And status not equal to Completed

Expected result: you reuse this filter in lists and reports.

6

6) Business rule via Script (no “code” in the frontend)

Example rule: do not allow status regression.

Implement as a script in the component event task:

• Recommended event: Before Update
• Validation:

  • Allow only progression: New → In Progress → Review → Completed
  • Block any regression
• Clear error message:

  • “Status rollback is not allowed.”

Test in Preview:

• Create a task in New
• Advance to In Progress
• Try to go back to New and validate the block

Expected result: the rule works in the backend. It applies to UI and API.

Frontend (generated scaffold)

The scaffold only exists if you checked Create frontend files when saving the component.

What you get (summary)

• Base app routes.
• Pages protected by module.
• Forms and lists generated per component.
• Base theme and styles.

Where your module screens are usually located

Look for a structure like:

• pages/protected/

  • {module}/ (e.g.: tasks/)

    • list, create and edit screens

What to edit vs what to avoid

Edit safely:

• Module pages (screens).
• UI components of your app.
• Theme (colors, typography).

Avoid editing:

• Files marked as locked (managed by the platform).

Validation checklist (Preview)

• Module card appears on the Home.
• Menu opens the listing.
• Create/edit Task works.
• Picklists have the correct options.
• Relationship with Project selects and saves.
• Status rule blocks regression.

If the goal is to change only theme and texts, this is usually faster in Project Settings.