I've recently started hoping on the Magento2 train. And I'm quite puzzled by some of the aspects of building dataGrids.

One of which is a weird syntax I came across on answers here or on tutorials on the web.
For example, there's a bit that tells Magento how to store Bookmark values (as I understand it).

<item name="storageConfig" xsi:type="array">
    <item name="provider" xsi:type="string">jobs_department_listing.jobs_department_listing.listing_top.bookmarks</item>
    <item name="root" xsi:type="string">columns.${ $.index }</item>
    <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>

I really don't understand this notation: columns.${ $.index }. Is looks like JS to me, definitely not XML, but I don't know where it's coming from, nor where to look for it, as it's not defined anywhere in the .xsd either.

Could someone please enlighten me?

  • From what I found, its only used in UI files. It is used to be replaced with "Real" data when rendering. – André Ferraz Aug 19 '16 at 15:09

If I am right your piece of code comes from columns definition. It is a variable notation that will be replaced with actual values during the grid rendering procedure.


${ ... } means: It is a variable.

${ $.something } means: The property "something" of current object (in your example the object is a row).

In short:

${ $.index } means: "The current column index".

${ $.storageConfig.root}: It is referring to root property of current storageConfig that you previously defined as ${ $.index }. So, at the end it should take the same value as ${ $.index } if I am right.


Look at vendor/magento/magento2-ui/view/base/web/js/grid/data-storage.js.

Replacement is made in template.js file in vendor/magento/magento2-base/lib/web/mage/utils/template.js.

You can find further information in the very first lines of that js file:

var tmplSettings = _.templateSettings,
        interpolate = /\$\{([\s\S]+?)\}/g,
        opener = '${',

And around line 35 you can see $ definition:

         * Evaluates template string using ES6 templates.
         * @param {String} tmpl - Template string.
         * @param {Object} $ - Data object used in a template.
         * @returns {String} Compiled template.
        template = function (tmpl, $) {
            return eval('`' + tmpl + '`');
| improve this answer | |
  • Thanks for your input. But is there any mean to be sure? What processes these XML nodes? – Julien Lachal Aug 22 '16 at 7:20
  • Updated my post with more information. – Phoenix128_RiccardoT Aug 22 '16 at 7:39
  • I don't get it, is something sending ${ $.index } to the templates, which get read and replaced in JS? – Julien Lachal Aug 22 '16 at 7:40
  • This is how Magento UI components work. They are XML configured ans JS rendered. – Phoenix128_RiccardoT Aug 22 '16 at 7:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.