Migrate a section from Classic UI to Freedom UI

Level: beginner

Move your Classic UI sections to Freedom UI without rebuilding their list pages, form pages, expanded lists, and mini pages by hand. The coding agent creates a Freedom UI counterpart of each section and leaves the original unchanged.

The migration goes through multiple stages:

1. Analysis. The agent reads the Classic UI section from the environment. It reconstructs the structure: fields, expanded lists, and related pages.
2. Plan. The agent produces the migration plan as a single document.
3. Approval. You review and approve the plan. You also decide on scope and any ambiguous points.
4. Construction. The agent builds the Freedom UI pages according to the approved plan and the Freedom UI design guidelines. It builds child pages first, then the main page.
5. Verification. The agent compares the result with the plan and produces the verification summary table.

The Classic UI section stays available. Creatio disables it only with your separate approval.

Prerequisites

• A coding agent with Creatio AI app development toolkit set up. Learn more: Set up Creatio AI app development toolkit.
• Access to the Creatio environment that contains the Classic UI section.
• A migration target: a link to the section, its name, or the name of a package or app.

Custom Classic UI logic is harder to analyze and reproduce. For this case, use Claude Opus 4.8 at medium effort, or GPT 5.5 (Codex) at medium effort.

Migrate the section

Important

Approve the plan before construction begins. The agent creates no Freedom UI pages until you approve.

1. Open your coding agent and start a new session.

2. Send the agent a request that states the target and asks to migrate the section to Freedom UI.

   The target can be a link, a section name, or the name of a package or app. Add the environment name if the agent cannot determine it from the link. Example requests:

   • "Migrate the Candidates section from Classic UI to Freedom UI. Environment: <environment name>."
   • "Here is the section: <link>. Build the migration plan for Freedom UI and submit it for approval."
   • "Migrate the entire Recruiting application to Freedom UI."

   The agent states that it uses the classic-to-freedom-migration skill and retrieves the section metadata from the environment on its own.

3. Review the migration plan that the agent produces.

   The plan describes the full scope of work before construction. It includes the following parts:

   Part	Description
   Overview	What is migrated and where, and the chosen approach.
   Main scope	A new Freedom UI page or an update to an existing one.
   List	List page columns, quick filters, and section actions.
   Form layout	All fields, groups, and tabs of the form page.
   Logic	Business rules, actions, business process launch, and custom logic.
   To confirm	Checks to perform in the environment before construction.
   Child pages	A separate layout for each related form.

   Check that the plan reflects all Classic UI section elements:

   • The form page includes fields, tabs, and expanded lists with their composition.
   • The list page includes columns and filters.
   • The child pages and the mini page are present.
   • Every item marked for confirmation has a specific answer rather than an assumption.

   If the section has custom Classic UI logic, the agent analyzes each customization using the classic-ui-expert skill. The plan shows what each customization does and in which scenario it is used, so you can check that the Freedom UI counterpart keeps the same behavior.

4. Approve the plan.

   The agent splits the approved plan into tasks and builds them one by one. The agent might offer to check the built pages in the browser. If you agree, the migration takes longer, but the agent fixes some issues on its own, and you get a more complete result.

5. Wait for the agent to build the Freedom UI pages. For a large task, the agent might pause to clarify scope and next steps. For example, it might ask whether you want to review an intermediate result before it continues.

6. Verify the result against the verification summary table. The agent builds this table from the pages it actually created. The table also lists what the agent could not complete.

   The table uses the following statuses: "done," "missing," and "needs confirmation." Make sure the agent completed all tasks and skipped nothing.

   The Freedom UI counterpart can have more business rules than the migration plan lists. The agent implements part of the custom logic of the Classic UI section using business rules where Freedom UI supports it.

As a result, the section has a Freedom UI counterpart with its list page, form page, expanded lists, and mini page.

Watch for deviations from the process

Clarify the agent's progress if you notice any of these signs:

• At the start, the agent did not state that it would use the classic-to-freedom-migration skill.
• The agent shows only part of the migration plan and links to the detailed plan — the "plan.md" file — instead.
• Construction started before you approved the plan.
• The agent provides a shortened "done" table instead of the detailed verification summary table.
• The agent simplified the plan without approval — for example, merged groups or simplified a component.
• The agent postponed items that need confirmation instead of verifying them in the environment.

Point the agent to the discrepancy so it can correct the error.

Functionality available for migration

The migration covers functionality that standard Freedom UI components support.

Section list page:

• Layout
• Custom filters
• Business process launch
• Report print button
• Custom section actions
• Custom buttons
• Custom logic

Form page:

• Page layout and standard content (inputs, field groups, expanded lists)
• Page business rules
• Simple page customizations
• Business process launch
• Report print button
• Custom record actions
• Custom logic
• Expanded lists with their pages

note

The agent also includes the dashboards of the section in the migration plan. After you approve the plan, the agent migrates the dashboards and checks the result. If the environment does not have the Dashboards migrator app, the agent installs it first. Learn more: Dashboards migrator (Creatio Marketplace).

---

See also

Creatio AI app development toolkit

Set up Creatio AI app development toolkit

Start working with Creatio AI app development toolkit

Build an app with Creatio AI app development toolkit

Convert web pages to mobile pages