Important

You are browsing upcoming documentation for version 6.0 of OroCommerce, OroCRM, and OroPlatform, scheduled for release in 2024. Read version 5.1 (the latest LTS version) of the Oro documentation to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Component Shortcuts 

Component Shortcuts provide ability to use simple widgets/modules without complicated data-page-component-* attributes. ComponentManager handle initialization of all registered shortcuts.

You can define component options in three different ways:

Empty Value 

Example:

<div data-page-component-collapse>
    Some content to collapse
</div>
// register shortcuts in ComponentShortcutsManager
var ComponentShortcutsManager = require('oroui/js/component-shortcuts-manager');

ComponentShortcutsManager.add('collapse', {
    moduleName: 'oroui/js/app/components/jquery-widget-component',
    options: {
        widgetModule: 'oroui/js/widget/collapse-widget'
    }
});

Object Value 

Example:

<div data-page-component-collapse="{{ {storageKey: 'entityWorkflow' ~ entityId}|json_encode }}">
    Some content to collapse
</div>
// register shortcuts in ComponentShortcutsManager
var ComponentShortcutsManager = require('oroui/js/component-shortcuts-manager');

ComponentShortcutsManager.add('collapse', {
    moduleName: 'oroui/js/app/components/jquery-widget-component',
    options: {
        widgetModule: 'oroui/js/widget/collapse-widget'
    }
});

Scalar Value 

Remember to add scalarOption to the shortcut.

Example:

<div data-page-component-jquery="oroui/js/widget/collapse-widget">
    Some content to collapse
</div>
// register shortcuts in ComponentShortcutsManager
var ComponentShortcutsManager = require('oroui/js/component-shortcuts-manager');

ComponentShortcutsManager.add('jquery', {
    moduleName: 'oroui/js/app/components/jquery-widget-component',
    scalarOption: 'widgetModule'
});

ComponentShortcutsManager 

ComponentShortcutsManager is used to register shortcuts. Also containing helper method getComponentData to generate data for component initialization by element attributes and shortcut config.

References: