Skip to main content
Version: 8.1

Implement a utility module

Level: intermediate
Example

Create a standard module that contains the init() and render() methods. When loading the module, the client core must call the init() method, then the render() method. Each method must call a message box. Implement the method that displays the message box using a utility module.

1. Create a utility module​

  1. Open the Configuration section and select a custom package to add the schema.

  2. Click Add → Module on the section list toolbar.

  3. Fill out the schema properties in the Module Designer.

    • Set Code to "UsrExampleUtilsModule."
    • Set Title to "ExampleUtilsModule."

    Click Apply to apply the changes.

  4. Add the source code in the Module Designer.

    UsrExampleUtilsModule
    /* Declare a module called UsrExampleUtilsModule. The module has no dependencies. Therefore, an empty array is passed as the second module parameter.
    The module contains the method that displays the message box. */
    define("UsrExampleUtilsModule", [], function () { 
        return { 
            /* The method that displays the message box. The "information" method argument contains the displayed message. */ 
            showInformation: function (information) { 
                alert(information); 
            } 
        }; 
    });

  5. Click Save on the Module Designer’s toolbar.

2. Create a visual module​

  1. Open the Configuration section and select a custom package to add the schema.

  2. Click Add → Module on the section list toolbar.

  3. Fill out the schema properties in the Module Designer.

    • Set Code to "UsrExampleUtilsStandardModule."
    • Set Title to "ExampleUtilsStandardModule."

    Click Apply to apply the changes.

  4. Add the source code in the Module Designer.

    UsrExampleUtilsStandardModule
    /* Declare a module called UsrExampleUtilsStandardModule. The module imports the UsrExampleUtilsModule module dependency to access the utility method. The factory function argument is a link to the loaded utility module. */
    define("UsrExampleUtilsStandardModule", ["UsrExampleUtilsModule"], function (UsrExampleUtilsModule) {
        return { 
            /* The init() and render() methods call a utility method to display the message that is passed to the utility method as an argument. */ 
            init: function () { 
                UsrExampleUtilsModule.showInformation("Calling the init() method of the UsrExampleUtilsStandardModule module"); 
            }, 
            render: function (renderTo) { 
                UsrExampleUtilsModule.showInformation("Calling the render() method of the UsrExampleUtilsStandardModule module. The module is uploaded to the container " + renderTo.id); 
            } 
        }; 
    });

  5. Click Save on the Module Designer’s toolbar.

Outcome of the example​

To view the outcome of the example, create the following request string.

[Creatio URL]/0/NUI/ViewModule.aspx#[SomeModuleName]

When loading the module, the client core must call the init() method, then the render() method. Each method calls a message box.

Call the init() method of the UsrExampleUtilsStandardModule module
Call the init() method of the UsrExampleUtilsStandardModule module
Call the render() method of the UsrExampleUtilsStandardModule module
Call the render() method of the UsrExampleUtilsStandardModule module

Resources​

Package with example implementation