how to extend .js and .html files in Magento 2

Question

I'm extending customer address for these I have to modify/extend vendor/Magento/module-ui core files.

i.e

root/vendor/magento/module-ui/view/base/web/js/form/components/collection.js

and

root/vendor/magento/module-ui/view/base/web/templates/form/components/collection.html

When I have modified core files it's working fine, But this is not good procedure/idea to extend.

So I have created the vendor name as Magento in root/app/code/ and I have placed modified above files to same folder in local.

i.e

root/app/code/magento/module-ui/view/base/web/js/form/components/collection.js

and

root/app/code/magento/module-ui/view/base/web/templates/form/components/collection.html

After placing those files I have cleared the cache. But still it's not showing my changes.

I have ran php bin/magento setup:static-content:deploy command also but no luck.

Could you please suggest me how to do this?

• Bojjaiah: @ArkadiyCh, I have created from root/app/design/adminhtml/Magento/backend/Magento_Ui folder also. but no luck. Can you please tell me path where i need to create?
• Luuk Skeur: magento.stackexchange.com/questions/60276/…

Answer 1

One module is registered under one path, that's why it can read from vendor, but cannot from app/code.

• Bojjaiah: then where I need to create?
• Bojjaiah: I have created from root/app/design/adminhtml/Magento/backend/Magento_Ui folder also. but no luck. Can you please tell me path where i need to create?
• Arkadii Chyzhov: I'd create my own module to check, and try to put not in base but in adminhtml folder
• Bojjaiah: any help on this?
• Bojjaiah: any update on this how to extend .js and .html files?

Answer 2

Finally Achieved my self.

Create requirejs-config.js file from Learning/HelloWorld/view/base and paste below code

var config = {
 map: {
 '*': {
 'Magento_Ui/js/form/components/collection':'Learning_HelloWorld/js/form/components/collection'
 }
 }
};

Create collection.js file from Learning/HelloWorld/view/base/web/js/form/components and copy paste core code and modyfie it.

 /**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
 define([
 'underscore',
 'mageUtils',
 'uiRegistry',
 'uiComponent',
 'uiLayout',
 'Magento_Ui/js/modal/confirm'
 ], function (_, utils, registry, Component, layout, confirm) {
 'use strict';
 var childTemplate = {
 parent: '${ $.$data.name }',
 name: '${ $.$data.childIndex }',
 dataScope: '${ $.name }',
 nodeTemplate: '${ $.$data.name }.${ $.$data.itemTemplate }'
 };
 return Component.extend({
 defaults: {
 lastIndex: 0,
 template: 'Learning_HelloWorld/form/components/collection'
 },
/* my custom methods */
 sendAddress: function (elem) {
 var self = this;
 self._sendAddress(elem);
 },
/* my custom methods */
 _sendAddress: function (elem) {
 this.bubble('update');
 }
 });
 });

Create collection.html file from Learning/HelloWorld/view/base/web/template/form/components path and paste core code and modify it

 <div class="ui-tabs">
<!-- My Extra html code -->
 <button type="button" data-bind="click: $parent.sendAddress.bind($parent, element)">
 Send this Address
 </button>
 </div>

Now run the below commands.

1. setup:upgrade
2. setup:static-content:deploy

Now it will work.

Feel free to ask if any queries.

• shivashankar m: vendor/magento/module-ui/view/base/web/js/modal/confirm.js
• shivashankar m: Hi @Magento two can you please help me, How to over ride confirm.js.
• Bojjaiah: @shivashankarm create a separate thread and tag me, then everyone will help you.
• shivashankar m: Hi @magento two Please find the link :magento.stackexchange.com/q/194763/49102