You are browsing documentation for version 5.0 of OroCommerce, OroCRM, and OroPlatform, maintained until August 2024 and supported until March 2026. See version 5.1 (the latest LTS version) of the Oro documentation for information on latest features.

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

Items Manager


  • Backbone collection for storing list of items
  • itemsManagerEditor - [jQuery-UI widget] for binding html inputs to the item
  • itemsManagerTable - [jQuery-UI widget] for rendering list of items


Define Backbone.Model for an item:

var ItemModel = Backbone.Model.extend({
    defaults: {
        name : null,
        label: null,
        func: null,
        sorting: null

Define Backbone.Collection for the item list:

var ItemCollection = Backbone.Collection.extend({
    model: ItemModel

Define html for itemsManagerEditor:

<div id="editor">
    <input name="name"></input>
    <input name="label"></input>
    <input name="func"></input>
    <input name="sorting"></input>
    <button class="add-button"></button>
    <button class="save-button"></button>
    <button class="cancel-button"></button>

Define html for itemsManagerTable:

    <tbody class="item-container">

Define template file templates/item.html for the item on the list:

<tr data-cid="<%= cid %>">
    <td><%= name %></td>
    <td><%= label %></td>
    <td><%= func %></td>
    <td><%= sorting %></td>
    <td class="action-cell">
        <a href="#" data-collection-action="edit" role="button" title="_.__('Edit')">
            <span class="fa-pencil-square-o hide-text" aria-hidden="true"></span>
        <a href="#" data-collection-action="delete" role="button" title="_.__('Delete')"
            <span class="fa-trash-o hide-text" aria-hidden="true"></span>

Instantiate item collection:

var items = new ItemCollection([
        "name": "a",
        "label": "A",
        // ...
        "name": "b",
        "label": "B",
        // ...
        "name": "c",
        "label": "C",
        // ...

Apply itemsManagerEditor widget on div#editor:

    collection: items

Apply itemsManagerTable widget to tbody.item-container:

import itemTemplate from 'tpl-loader!templates/item.html';

    itemTemplate: itemTemplate,
    collection: items