I want to modify mediabrowser widget of magento
Location that implement widget in


browser widget stay in
lib/web/mage/adminhtml/browser.js. I want to add id variable to id element such as "#new_folder" "delete_folder". It will be "#id_new_folder"..

_selectNode: function (event, data) {
      var node = data.rslt.obj.data('node');
      var my_id = this.options.ID; <== pass my var here
      this.activeNode = node;
      this.element.find('#'+my_id+'_delete_files, #insert_files').toggleClass(this.options.hidden, true);
      this.element.find('#contents').toggleClass(this.options.hidden, false);
      this.element.find('#delete_folder').toggleClass(this.options.hidden, node.id == 'root'); //eslint-disable-line eqeqeq
      this.element.find('#content_header_text').html(node.id == 'root' ? this.headerText : node.text); //eslint-disable-line eqeqeq


I am a bit confuse to choose which one is a better way to create my custom widget

Approach 1

create my new widget with same behavior with browser So in template i will try to call data-mage-init="customMediaBrowser"

map: {
        "*": { 
            "customMediaBrowser" : "InsideMyModule/js/mage/adminhtml/browser",

Approach 2

Use feature "mixins" of magento

config: {
        mixins: {
            'mage/adminhtml/browser': {
                'Module_Name/js/mage/adminhtml/browser': true

Here is my content mixins js. Current using magento 2.2.0 with jquery ui 1.9.2

], function ($) {
    'use strict';

    return function (Browser) {
        $.widget('mage.mediabrowser', Browser, {
             * {@inheritDoc}
            _create: function () {
                console.log('Custom module js widget is triggered!');
        Browser.mediabrowser = $.mage.mediabrowser;
        return Browser;

  • Use mixins approach. Dec 29, 2017 at 2:40
  • Tried mixins way but i got error TypeError: base is not a constructor. See my update
    – mrtuvn
    Dec 29, 2017 at 2:53
  • Wait ... let me check again. Dec 29, 2017 at 3:02
  • I think we are going wrong way. Modify core widget is very bad idea Should revert back all stuff. One more think , I can't set mixins in browser widget, maybe i am doing it wrong. Mixins method maybe only work for components and widget object returned
    – mrtuvn
    Dec 29, 2017 at 8:24


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.