Skip to main content
Creatio’s quarterly bookings reach 255% of prior-year results as enterprises adopt ai 
Version: 8.3

Custom Freedom UI component implemented using coding agents

Level: intermediate
note

This functionality is available for Creatio 8.3.4 and later.

The element library of the Freedom UI Designer includes a wide set of out-of-the-box components that cover most Freedom UI page customizations. For business scenarios that require something more specific — for example, a specialized input field, a custom data visualization, or a third-party widget — you can build your own Freedom UI components and add them to the library.

Creatio lets you implement Freedom UI components of the following types:

Previously, both methods required involving developers and writing source code. Since version 8.3.4, coding agents let you implement a custom Freedom UI component of any complexity using only prompts, without writing a single line of code. Learn more about supported coding agents: Supported agents and models.

To implement a custom Freedom UI component using coding agents, complete the following steps.

1. Create an Angular project​

To create an Angular project, follow the instructions: Create an Angular project (developer documentation).

As a result, the Angular project for developing a custom UI component using a remote module is created.

2. Install npm packages​

  1. Run the npm i command at the Visual Studio Code terminal to install the npm packages.
  2. Run the npm i @creatio-devkit/common@install command at the Visual Studio Code terminal to update the @creatio-devkit/common library version.
  3. Run the npm i class-transformer command at the Visual Studio Code terminal to install the class-transformer library.
  4. Run the npm i @creatio/interface-designer command in the Visual Studio Code terminal to install the @creatio/interface-designer library. The project must include this library, which provides the API for interacting with the Freedom UI page schema from the setup area.

As a result, required npm packages are installed.

3. Create a custom Freedom UI component​

Follow these recommendations when describing the task to the coding agent:

  • Make sure your prompt covers the following functional blocks:

    • Business purpose
    • Component name
    • Standalone component
    • Runtime behavior
    • Setup area
    • Data binding
    • Validation
    • Accessibility
    • Styling

  • Do not include component registration in the prompt. Registration in Freedom UI Designer is a separate step.

To create a custom Freedom UI component:

  1. Open the coding agent. Learn more about supported agents and models: Supported agents and models.

  2. Connect the Angular project directory to your coding agent chat.

  3. Describe the task to the coding agent using the following prompt template.

    Prompt template for creating the component
    Create a custom [Specify component name] component for Creatio Freedom UI using a remote module.

    Read AI_GUIDES from @creatio libraries

    Business purpose:
    [Explain what business problem the component solves.]

    Component name:
    [Specify component name]
    Use prefix defined in project.

    Standalone component: No

    Runtime behavior:
    [Explain what users see and how they interact with the component.]

    Setup area:
    Display settings:
    - [Specify setting]

    Data settings:
    - [Specify setting]

    Behavior settings:
    - [Specify setting]

    Data binding:
    [Explain which value should bind to which Creatio data source attribute.]

    Validation:
    Design-time validation:
    - [Specify rule]

    Runtime validation:
    - [Specify rule]

    Accessibility:
    - [Specify keyboard behavior]
    - [Specify focus behavior]
    - [Specify labels]

    Styling:
    - [Specify visual style requirements, such as theme tokens, spacing, or states like hover, focus, and disabled.]

    After implementation:
    - build the project;
    - fix build errors;

    This template not only creates the component but also builds the project so you can verify the registration works end-to-end.

As a result, the corresponding component files are generated in the project.

4. Add the custom Freedom UI component to the Freedom UI Designer​

To add the custom Freedom UI component to the Freedom UI Designer, describe the task to the coding agent using the following prompt template.

Prompt template for registering the component
Register the [Specify component name] component in the Freedom UI Designer component library.

Read AI_GUIDES from @creatio libraries

Use the existing remote module project.

Requirements:
- Use the Creatio Designer integration APIs available in the project.
- Use @creatio/interface-designer where required.
- Caption: [Specify component caption]
- Add an icon for the component.
- Add default values for the component settings.

After implementation:
- build the project;
- fix build errors;
- push the workspace to Creatio.

This template not only registers the component but also builds the project and pushes the workspace to Creatio so you can verify the registration works end-to-end.

As a result, the component registration is added to the project.

5. Build the project​

Build the project in one of the following ways:

  • Use the following prompt template to build the project automatically.

    Prompt template for building the project
    Build the remote module project.

    Run:
    npm run build

    If the build fails:
    - analyze the error;
    - fix the source code;
    - rebuild.

    After the build succeeds, summarize the changed files.

  • Run the npm run build command at the Visual Studio Code terminal to build the project manually.

As a result, the build is added to the "dist" directory of the Angular project.

6. Upload the changes to Creatio​

Upload the changes in one of the following ways:

  • Use the following prompt template to upload the changes automatically.

    Prompt template for pushing the package
    Copy artifacts folder from dist folder into package /Files/src/js/[Specify project name]
    When copied:
    Push the workspace changes to the Creatio environment.

    Use this environment:
    [Specify environment]

    Run:
    clio pushw -e [Specify environment]

    If the push fails:
    - analyze the Clio output;
    - identify the issue;
    - fix what can be fixed locally;
    - rerun the push.

  • Copy the build artifacts into the package, then run the clio pushw -e [Specify environment] command at the Visual Studio Code terminal to upload the changes manually.

As a result, the component appears in the Freedom UI Designer element library, and no-code creators can add it to Freedom UI pages.

7. Add the custom Freedom UI component to the Freedom UI page​

  1. Open the needed app in the Application Designer.

  2. Open the needed page in the Freedom UI Designer.

  3. Drag the custom Freedom UI component to the canvas.

  4. Make sure the component is implemented correctly.

    • The component appears in the element library.
    • The component is added to the page.
    • Selecting the component opens the setup area.
    • Display settings save correctly.
    • Static values set in the setup area work as expected.
    • Data source binding works as expected.
    • Changing the bound value updates the component as expected.
    • Behavior settings, such as read-only or disabled modes, work as expected.
    • Validation rules show messages for invalid setup values.
    • Keyboard controls work as expected.

  5. Click Save.

As a result, the custom Freedom UI component is added to the Freedom UI page.

See also​

Custom Freedom UI component implemented using remote module (developer documentation)

Custom Freedom UI component based on a Classic UI element (developer documentation)