Skip to main content
Version: 8.2

Handle system-level data using Creatio AI in the Freedom UI page schema

Level: advanced
note

The example is relevant to Case Management app.

To implement the example:

  1. Create a case. Read more >>>
  2. Develop AI Skill. Read more >>>
  3. Set up the page UI. Read more >>>
  4. Set up how to handle case resolution. Read more >>>
Example

Simplify the resolution text of the custom "Creatio instance crashes while uploading files" case using Creatio AI. Support different tones of simplified text. Out of the box, use formal text tone. Limit the simplified text to 200 characters.

Out-of-the-box text tone of the simplified case resolution
Out-of-the-box text tone of the simplified case resolution
Custom text tone of the simplified case resolution
Custom text tone of the simplified case resolution

1. Create a case​

  1. Open the Case Management app in the No-Code Designer.

  2. Open the Advanced settings tab in the No-Code Designer. To do this, click in the top right → Application management → Application Hub → Case Management app → Advanced settings.

  3. Create a user-made package to develop AI Skill. To do this, click → Create new package → fill out the package properties → Save.

    For this example, create the sdkCreatioAIInFreedomUI user-made package.

  4. Change the current package. Instructions: Change the current package.

    For this example, change the current package to sdkCreatioAIInFreedomUI user-made package.

  5. Open the Cases section.

  6. Add a new case. To do this, click New.

  7. Fill out the case properties.

    Property

    Property value

    Contact*

    John Best

    Account

    Our company

    General info tab

    Subject*

    Creatio instance crashes while uploading files

    Description

    The Creatio instance constantly crashes when trying to upload a file larger than 10 MB to the server. The issue seems to be with the file handling method not releasing resources after the upload is complete. In some cases, uploading a file also leads to a system timeout, with the connection closing before the process ends. It makes it difficult to determine the exact cause.

    Closure and feedback tab

    Resolution

    Upon further analysis, it was identified that the file upload function is not properly disposing of memory stream objects after the file is uploaded. The memory stream was held in memory, resulting in excessive memory consumption and eventually leading to out-of-memory exceptions. Furthermore, due to improper exception handling in a multithreading implementation, multiple threads attempting to access shared resources during concurrent uploads caused deadlocks, which in turn triggered timeouts as connections waited indefinitely for resource locks to be released.
    We solved this issue by implementing a more efficient memory management strategy, ensuring that all threads are explicitly disposed of after use. We implemented more efficient "try-finally" blocks to ensure that the cleanup logic is executed even in the event of an unexpected failure. We also introduced a semaphore to limit the number of concurrent downloads, preventing the server from overloading due to insufficient resources. Finally, we added more detailed logging to capture thread state and memory usage during the upload process for future troubleshooting.

  8. Select the "In progress" status on the progress bar. This saves the case.

As a result, Creatio will add the "Creatio instance crashes while uploading files" case to the Cases section.

2. Develop AI Skill​

  1. Open the Creatio AI setup section (Copilot setup section in Creatio 8.2.0). To do this, click in the top right → System setup → Creatio AI setup (Copilot setup in Creatio 8.2.0).

  2. Add an AI Skill. To do this, click New.

  3. Fill out the properties of the AI Skill.

    Fill out the Code* property in Creatio 8.2.0. The property is populated automatically in Creatio 8.2.1 and later.

    Property

    Property value

    Title*

    Simplify the case resolution

    Code*

    UsrSkillSimplifyTheCaseResolution

    Description*

    AI Skill that simplifies the case resolution

    Status*

    Active

    Usage mode*

    API

  4. Specify the user's goal when using the AI Skill.

    Property

    Property value

    Prompt

    For Creatio 8.2.1 and later, specify "Your task is to simplify the following case resolution: inputText. Use the textTone text tone and limit the simplified text to 200 characters."

    For Creatio 8.2.0, specify "Your task is to simplify the following case resolution: [# inputText #]. Use the [# textTone #] text tone and limit the simplified text to 200 characters."

  5. Save the changes.

As a result, Creatio will add the "Simplify the case resolution" AI Skill to the Creatio AI setup section (Copilot setup section in Creatio 8.2.0).

Simplify the case resolution AI Skill in the Creatio AI setup section
Simplify the case resolution AI Skill in the Creatio AI setup section
Simplify the case resolution AI Skill in the Copilot setup section
Simplify the case resolution AI Skill in the Copilot setup section

3. Set up the page UI​

  1. Open the Case Management app in the No-Code Designer.

  2. Open the Cases form page.

  3. Open the Closure and feedback tab.

  4. Add a field.

    For this example, add the field that contains the text tone to simplify the case resolution. To do this:

    1. Add a field of needed type to the working area of the Freedom UI Designer.

    2. Click and fill out the field properties.

      Element

      Element type

      Property

      Property value

      Field that contains the text tone to simplify the case resolution

      Text

      Title on page

      Resolution tone

  5. Add a button.

    For this example, add the button that calls the "Simplify the case resolution" AI Skill.

    To do this:

    1. Add a Button type component to the toolbar of the Freedom UI Designer.

    2. Click and fill out the button properties.

      Element

      Property

      Property value

      Button that calls the "Simplify the case resolution" AI Skill

      Title

      Simplify the resolution

      Style

      Outline

  6. Save the changes.

4. Set up how to handle case resolution​

Configure the business logic in the Client Module Designer. For this example, set up how to handle case resolution.

  1. Open the source code of the Freedom UI page. To do this, click .

  2. Add the dependencies. To do this, add @creatio-devkit/common library as a dependency.

    AMD module dependencies
    /* Declare the AMD module. */
    define("Cases_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
        return {
            ...
        }
    });

  3. Add an attribute.

    1. Go to the viewModelConfigDiff schema section → values configuration object.
    2. Add a IsCreatioAIElementsVisible attribute that stores visibility data of the Resolution tone field and Simplify the resolution button. Out-of-the-box, the field and button are not visible.
    3. Add a ResolutionTone attribute that stores data of the text tone to simplify the case resolution. Out-of-the-box, the text tone to simplify the case resolution is formal.
    viewModelConfigDiff schema section
    viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
        {
            "operation": "merge",
            "path": [
                "attributes"
            ],
            "values": {
                ...,
                /* The attribute that stores visibility data of the "Resolution tone" field and "Simplify the resolution" button. */
                "IsCreatioAIElementsVisible": {
                    "value": false
                },
                /* The attribute that stores data of the text tone to simplify the case resolution. */
                "ResolutionTone": {
                    "value": 'Formal'
                },
            }
        },
        ...
    ]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,

  4. Set up how to handle the action executed on button click.

    1. Go to the viewConfigDiff schema section → UsrSimplifyResolutionButton element.
    2. Bind the sending of the custom usr.SimplifyText request to the clicked button event.
    viewConfigDiff schema section
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        /* Button that calls the "Simplify the case resolution" AI Skill. */
        {
            "operation": "insert",
            "name": "UsrSimplifyResolutionButton",
            "values": {
                ...,
                "clicked": {
                    /* Bind the sending of the custom request to the "clicked" button event. */
                    "request": "usr.SimplifyText"
                }
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

  5. Bind an attribute to the page elements.

    1. Go to the viewConfigDiff schema section → UsrResolutionToneField element.
    2. Bind the $IsCreatioAIElementsVisible attribute to the visible property.
    3. Bind the $ResolutionTone attribute to the control property.
    4. Go to the UsrSimplifyResolutionButton element.
    5. Bind the $IsCreatioAIElementsVisible attribute to the visible property.
    viewConfigDiff schema section
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        ...,
        /* Field that contains the text tone to simplify the case resolution. */
        {
            "operation": "insert",
            "name": "UsrResolutionToneField",
            "values": {
                ...,
                "control": "$ResolutionTone",
                /* The property that flags the field as visible. Bound to the "IsCreatioAIElementsVisible" attribute. */
                "visible": "$IsCreatioAIElementsVisible",
            },
            ...
        },
        /* Button that calls the "Simplify the case resolution" AI Skill. */
        {
            "operation": "insert",
            "name": "UsrSimplifyResolutionButton",
            "values": {
                ...,
                /* The property that flags the button as visible. Bound to the "IsCreatioAIElementsVisible" attribute. */
                "visible": "$IsCreatioAIElementsVisible",
            },
            ...
        },
        ...,
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

  6. Implement the request handlers.

    1. Go to the handlers schema section.

    2. Add a custom implementation of the crt.HandleViewModelInitRequest base request handler.

      1. Wait for the rest of the initialization handlers to finish.
      2. Specify code of the "Simplify the case resolution" AI Skill.
      3. Retrieve the instance of the HTTP client from @creatio-devkit/common.
      4. Send the crt.CopilotGetAvailableIntentsRequest base request that checks the accessibility of the AI Skill.
      5. If the list of AI Skills includes the AI Skill whose code is UsrSkillSimplifyTheCaseResolution, set the IsCreatioAIElementsVisible attribute to the index of the corresponding AI Skill.

    3. Implement the usr.EditEventRequest custom request handler.

      1. Retrieve the instance of the HTTP client from @creatio-devkit/common.
      2. Send the crt.CopilotExecuteIntentRequest base request that runs the AI Skill.
      3. Specify code of the "Simplify the case resolution" AI Skill.
      4. Specify parameters of the "Simplify the case resolution" AI Skill. The StringAttribute_qmmwoms attribute stores data of the Resolution field.
      5. If Creatio can run the AI Skill, AI Skill simplifies the case resolution. Otherwise, handle the status of the Creatio AI execution, display the error and warning messages if error or warning occur during the AI Skill execution.
      6. Call the next handler if it exists and return its result.
    handlers schema section
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.HandleViewModelInitRequest",
            /* Custom implementation of a base request handler. */
            handler: async (request, next) => {

                /* Wait for the rest of the initialization handlers to finish. */
                await next?.handle(request);

                /* Code of the AI Skill. */
                const skillName = 'UsrSkillSimplifyTheCaseResolution';
                
                /* Retrieve the instance of the HTTP client from "@creatio-devkit/common." */
                const handlerChain = sdk.HandlerChainService.instance;
                
                /* Send the base request that checks the accessibility of the AI Skill. */
                var result = await handlerChain.process({
                    type: 'crt.CopilotGetAvailableIntentsRequest',
                    intentNames: [skillName],
                    $context: request.$context,
                    scopes: [...request.scopes]
                });
                
                /* If the list of AI Skills includes the AI Skill whose code is "UsrSkillSimplifyTheCaseResolution," set the "IsCreatioAIElementsVisible" attribute to the index of the corresponding AI Skill. */
                request.$context.IsCreatioAIElementsVisible = result.availableIntentNames.indexOf(skillName) > -1;
            }
        },
        {
            request: "usr.SimplifyText",
            /* Implement the custom request handler. */
            handler: async (request, next) => {
                const context = request.$context;
                
                /* Retrieve the instance of the HTTP client from "@creatio-devkit/common." */
                const handlerChain = sdk.HandlerChainService.instance;
                
                /* Send the base request that runs the AI Skill. */
                const copilotCallResult = await handlerChain.process({
                    type: 'crt.CopilotExecuteIntentRequest',
                    
                    /* Code of the AI Skill to run. */
                    intentName: 'UsrSkillSimplifyTheCaseResolution',
                    
                    /* Parameters of the AI Skill. */
                    parameters: {
                        inputText: await context.StringAttribute_qmmwoms,
                        textTone: await context.ResolutionTone
                    },
                    $context: request.$context,
                    scopes: [...request.scopes]
                });
                
                /* If Creatio can run the AI Skill, AI Skill simplifies the case resolution. */
                if (copilotCallResult.isSuccess) {
                    request.$context.StringAttribute_qmmwoms = copilotCallResult.content;
                } else {
                
                    /* If the status of the AI Skill execution is "FailedToExecute," the browser console displays the "Error occurs during the AI Skill execution" error message. Otherwise, implement a business logic that uses a predefined "errorMessage" value depending on your business goals. */
                    if(copilotCallResult.status == 'FailedToExecute'){
                        console.error(copilotCallResult.errorMessage);
                        alert("Error occurs during the AI Skill execution");
                    } else {                  
                        alert(copilotCallResult.errorMessage);
                    };
                }
                
                /* If warning occurs during the AI Skill execution, the browser console displays the list of warnings. Many messages are separated by comma. */
                if(copilotCallResult.warnings.length > 0){
                    console.warn(copilotCallResult.warnings.join(', '));
                }

                /* Call the next handler if it exists and return its result. */
                return next?.handle(request);
            }
        }
    ]/**SCHEMA_HANDLERS*/,

  7. Save the changes.

View the result​

To view the result of the example that uses an out-of-the-box text tone to simplify the case resolution:

  1. Open the Cases section.
  2. Open the "Creatio instance crashes while uploading files" case.
  3. Click Simplify the resolution.

As a result, Creatio AI will simplify the case resolution using out-of-the-box text tone and add simplified text to the Resolution field. The simplified text is limited to 200 characters. View the result >>>

If you need, edit the Resolution field value provided by Creatio AI.

To view the result of the example that uses custom text tone to simplify the case resolution:

  1. Open the Cases section.
  2. Open the "Creatio instance crashes while uploading files" case.
  3. Change the text tone to simplify the case resolution. For example, "Friendly."
  4. Click Simplify the resolution.

As a result, Creatio AI will simplify the case resolution using custom text tone and add simplified text to the Resolution field. The simplified text is limited to 200 characters. View the result >>>

Source code​

/* Declare the AMD module. */
define("Cases_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
    return {
        viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
            /* Field that contains the text tone to simplify the case resolution. */
            {
                "operation": "insert",
                "name": "UsrResolutionToneField",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 2,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Input",
                    "label": "#ResourceString(UsrResolutionToneField_label)#",
                    "control": "$ResolutionTone",
                    "placeholder": "#ResourceString(UsrResolutionToneField_placeholder)#",
                    "tooltip": "",
                    "readonly": false,
                    "multiline": false,
                    "labelPosition": "auto",
                    /* The property that flags the field as visible. Bound to the "IsCreatioAIElementsVisible" attribute. */
                    "visible": "$IsCreatioAIElementsVisible",
                },
                "parentName": "ClosureAndFeedbackFieldsContainer",
                "propertyName": "items",
                "index": 1
            },
            /* Button that calls the "Simplify the case resolution" AI Skill. */
            {
                "operation": "insert",
                "name": "UsrSimplifyResolutionButton",
                "values": {
                    "layoutConfig": {
                        "column": 2,
                        "row": 2,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Button",
                    "caption": "#ResourceString(UsrSimplifyResolutionButton_caption)#",
                    "color": "outline",
                    "disabled": false,
                    "size": "large",
                    "iconPosition": "only-text",
                    /* The property that flags the button as visible. Bound to the "IsCreatioAIElementsVisible" attribute. */
                    "visible": "$IsCreatioAIElementsVisible",
                    "clicked": {
                        /* Bind the sending of the custom request to the "clicked" button event. */
                        "request": "usr.SimplifyText"
                    }
                },
                "parentName": "ClosureAndFeedbackFieldsContainer",
                "propertyName": "items",
                "index": 2
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
            {
                "operation": "merge",
                "path": [
                    "attributes"
                ],
                "values": {
                    /* The attribute that stores visibility data of the "Resolution tone" field and "Simplify the resolution" button. */
                    "IsCreatioAIElementsVisible": {
                        "value": false
                    },
                    /* The attribute that stores data of the text tone to simplify the case resolution. */
                    "ResolutionTone": {
                        "value": 'Formal'
                    },
                }
            }
        ]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,
        modelConfigDiff: /**SCHEMA_MODEL_CONFIG_DIFF*/[]/**SCHEMA_MODEL_CONFIG_DIFF*/,
        handlers: /**SCHEMA_HANDLERS*/[
            {
                request: "crt.HandleViewModelInitRequest",
                /* Custom implementation of a base request handler. */
                handler: async (request, next) => {
        
                    /* Wait for the rest of the initialization handlers to finish. */
                    await next?.handle(request);
        
                    /* Code of the AI Skill. */
                    const skillName = 'UsrSkillSimplifyTheCaseResolution';
                    
                    /* Retrieve the instance of the HTTP client from "@creatio-devkit/common." */
                    const handlerChain = sdk.HandlerChainService.instance;
                    
                    /* Send the base request that checks the accessibility of the AI Skill. */
                    var result = await handlerChain.process({
                        type: 'crt.CopilotGetAvailableIntentsRequest',
                        intentNames: [skillName],
                        $context: request.$context,
                        scopes: [...request.scopes]
                    });
                    
                    /* If the list of AI Skills includes the AI Skill whose code is "UsrSkillSimplifyTheCaseResolution," set the "IsCreatioAIElementsVisible" attribute to the index of the corresponding AI Skill. */
                    request.$context.IsCreatioAIElementsVisible = result.availableIntentNames.indexOf(skillName) > -1;
                }
            },
            {
                request: "usr.SimplifyText",
                /* Implement the custom request handler. */
                handler: async (request, next) => {
                    const context = request.$context;
                    
                    /* Retrieve the instance of the HTTP client from "@creatio-devkit/common." */
                    const handlerChain = sdk.HandlerChainService.instance;
                    
                    /* Send the base request that runs the AI Skill. */
                    const copilotCallResult = await handlerChain.process({
                        type: 'crt.CopilotExecuteIntentRequest',
                        
                        /* Code of the AI Skill to run. */
                        intentName: 'UsrSkillSimplifyTheCaseResolution',
                        
                        /* Parameters of the AI Skill. */
                        parameters: {
                            inputText: await context.StringAttribute_qmmwoms,
                            textTone: await context.ResolutionTone
                        },
                        $context: request.$context,
                        scopes: [...request.scopes]
                    });
                    
                    /* If Creatio can run the AI Skill, AI Skill simplifies the case resolution. */
                    if (copilotCallResult.isSuccess) {
                        request.$context.StringAttribute_qmmwoms = copilotCallResult.content;
                    } else {
                    
                        /* If the status of the AI Skill execution is "FailedToExecute," the browser console displays the "Error occurs during the AI Skill execution" error message. Otherwise, implement a business logic that uses a predefined "errorMessage" value depending on your business goals. */
                        if(copilotCallResult.status == 'FailedToExecute'){
                            console.error(copilotCallResult.errorMessage);
                            alert("Error occurs during the AI Skill execution");
                        } else {                  
                            alert(copilotCallResult.errorMessage);
                        };
                    }
                    
                    /* If warning occurs during the AI Skill execution, the browser console displays the list of warnings. Many messages are separated by comma. */
                    if(copilotCallResult.warnings.length > 0){
                        console.warn(copilotCallResult.warnings.join(', '));
                    }
        
                    /* Call the next handler if it exists and return its result. */
                    return next?.handle(request);
                }
            }
        ]/**SCHEMA_HANDLERS*/,
        converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
        validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
    };
});

Resources​

Package with example implementation (Creatio 8.2.1 and later)

Package with example implementation (Creatio 8.2.0)