Important

We are updating the images for OroCommerce version 6.1 to align with the latest changes in the back-office design. During this transition, some images may still show older versions. Thank you for your patience as we work to update all visuals to reflect these changes.

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:

• ComponentShortcutManager

• ComponentShortcutsModule