How to Create a global JavaScript Component¶

Creating the Page Component Module¶

First of all, you need to define the Page Component module in your bundle, which has to extend the BaseComponent class from the OroUIBundle. If the Page Component module is named MyComponent, its code has to be placed in a file named my-component.js that lives in the Resources/public/js/app/components directory of your bundle:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// src/Acme/DemoBundle/Resources/public/js/app/components/my-component.js
define(function (require) {
    'use strict';

    var MyComponent,
        BaseComponent = require('oroui/js/app/components/base/component');

    MyComponent = BaseComponent.extend({
        initialize: function (options) {
            console.log('MyComponent is initialized', options);
        }
    });

    return MyComponent;
});

You can implement all the desired functionality inside the component.

The component performs the role of a controller. It is responsible for the following things:

• create necessary views, collections, models and even sub-components
• handle environment events
• dispose obsolete internal instances

Creating an App Module¶

To boot your component together with the application, you need to create an App Module:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// src/Acme/DemoBundle/Resources/public/js/app/modules/my-module.js
require([
    'oroui/js/app/controllers/base/controller'
], function (BaseController) {
    'use strict';

    BaseController.loadBeforeAction([
        'acmedemo/js/app/components/my-component'
    ], function (MyComponent) {
        /* add composition to reuse between controller actions */
        BaseController.addToReuse('myComponent', MyComponent, {
            /* define options for your component here, like: */
            keepServerConnection: true
        });
    });
});

The example above advises the controller to load your Page Component before the first action and will re-use its composition between actions. The following three arguments define the composition:

• the name of the composition
• the constructor
• options of the constructor

Declaring the App Module¶

The final step is to register your App Module in the RequireJS config:

1
2
3
4
5
6

# src/Acme/DemoBundle/Resources/config/requirejs.yml
config:
    paths:
        'acmedemo/js/app/modules/my-module': 'bundles/acmedemo/js/app/modules/my-module.js'
    appmodules:
        - acmedemo/js/app/modules/my-module

First, the my-module module name is added to the config.paths section to let the building script know about its location. This way, the building script can trace the dependency and add it to the build-file (oro.min.js). Once the source file was added to the configuration, my-module is added to the list of modules that are invoked at the application start using the appmodules key.