0

I need to change the value of the maxinput field in the knockoutjs template vendor\magento\module-ui\view\base\web\templates\form\element\input.html so I have to replace the template with my own template loaded from my module app\code\Company\Base\view\base\web\templates\form\element\input.html.

So I created a requirejs-config.js file in my module and tried to override the original knockoutjs file:

app\code\Company\Base\view\base\requirejs-config.js:

var config = {
    map: {
        '*': {
            'Magento_Ui/templates/form/element/input':'Company_Base/templates/form/element/input'
        }
    }
};

...then I cleared the cache, but it is still loading the original template instead of mine.

0
0

I solved it by using a mixin to (mix-in my code)/(extend the code of) Magento_Ui/js/form/element/abstract.js to replace the value of elementTmpl to make it load my own template.

app\code\Company\Base\view\adminhtml\web\template\form\element\input.html:

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<input class="admin__control-text" type="text"
    data-bind="
        event: {change: userChanges},
        value: value,
        hasFocus: focused,
        valueUpdate: valueUpdate,
        attr: {
            name: inputName,
            placeholder: placeholder,
            'aria-describedby': noticeId,
            id: uid,
            disabled: disabled,
            maxlength: 512
    }"/>

app\code\Company\Base\view\base\requirejs-config.js:

Note: You can also place requirejs-config.js to app\code\Company\Base\view\adminhtml\, this works as well.

var config = { 
    config: {
        mixins: {
            'Magento_Ui/js/form/element/abstract': {
                'Company_Base/js/form/element/abstract-ext': true
            }
        }
    }
};

app\code\Company\Base\view\adminhtml\web\js\form\element\abstract-ext.js:

define(['ko'], function(ko) {
    'use strict';

    return function (Abstract) {
        return Abstract.extend({
            defaults: {
                elementTmpl: "Company_Base/form/element/input"
            },

            initialize: function() {
                this._super();

                return this;
            }
        });
    };
});

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.