How to add and use custom js in admin configuration creating custom module












3















I am creating custom module. I want to add js file in admin configuration. How can i include and use js in magento 2.x.










share|improve this question





























    3















    I am creating custom module. I want to add js file in admin configuration. How can i include and use js in magento 2.x.










    share|improve this question



























      3












      3








      3


      2






      I am creating custom module. I want to add js file in admin configuration. How can i include and use js in magento 2.x.










      share|improve this question
















      I am creating custom module. I want to add js file in admin configuration. How can i include and use js in magento 2.x.







      magento2






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 1 hour ago









      Teja Bhagavan Kollepara

      2,95841847




      2,95841847










      asked Feb 5 '18 at 7:44









      iqbal malikiqbal malik

      9411




      9411






















          2 Answers
          2






          active

          oldest

          votes


















          3














          You try following step to add js in admin:
          Create file app/code/Vendor/Module/view/adminhtml/layout/adminhtml_system_config_edit.xml



          <?xml version="1.0"?>

          <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
          <head>
          <link src="Vendor_ModuleName::js/yourjs.js"/>
          </head>
          </page>


          app/code/Vendor/Module/view/adminhtml/web/js/yourjs.js



          require(
          [
          'jquery',
          'mage/translate',
          ],
          function ($) {
          //add your code
          }
          );





          share|improve this answer


























          • your welcome :-)

            – Shashank Gupta
            Feb 5 '18 at 10:53











          • Thank you so much.. this helped most. :)

            – Ask Bytes
            Oct 13 '18 at 6:53











          • Your welcome :)

            – Shashank Gupta
            Oct 15 '18 at 9:37











          • Thanks a ton its working for me.

            – shivashankar m
            Feb 8 at 13:15











          • Your welcome :)

            – Shashank Gupta
            Feb 8 at 13:29



















          3














          As per magento 2 standards, you will required requirejs-config.js to add custom javascript
          Create requirejs-config.js in app/code/vendor/module-name/view/adminhtml/requirejs-config.js



          var config = {
          map: {
          '*': {
          customscript:'Vendor_ModuleName::js/custom'
          }
          }
          };


          then create custom.js :
          app/code/Vendor/modulename/view/adminhtml/web/js






          share|improve this answer


























          • i need to load this js in admin configuration section not in frontend. and how to call this script file?

            – iqbal malik
            Feb 5 '18 at 8:10











          • Please add requirejs-config.js in adminthtml folder in place of frontend folder and create js directory and custom.js file

            – Shankar
            Feb 5 '18 at 9:21











          • it is not working for me. something went wrong

            – iqbal malik
            Feb 5 '18 at 9:36













          Your Answer








          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "479"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f212206%2fhow-to-add-and-use-custom-js-in-admin-configuration-creating-custom-module%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          2 Answers
          2






          active

          oldest

          votes








          2 Answers
          2






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          3














          You try following step to add js in admin:
          Create file app/code/Vendor/Module/view/adminhtml/layout/adminhtml_system_config_edit.xml



          <?xml version="1.0"?>

          <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
          <head>
          <link src="Vendor_ModuleName::js/yourjs.js"/>
          </head>
          </page>


          app/code/Vendor/Module/view/adminhtml/web/js/yourjs.js



          require(
          [
          'jquery',
          'mage/translate',
          ],
          function ($) {
          //add your code
          }
          );





          share|improve this answer


























          • your welcome :-)

            – Shashank Gupta
            Feb 5 '18 at 10:53











          • Thank you so much.. this helped most. :)

            – Ask Bytes
            Oct 13 '18 at 6:53











          • Your welcome :)

            – Shashank Gupta
            Oct 15 '18 at 9:37











          • Thanks a ton its working for me.

            – shivashankar m
            Feb 8 at 13:15











          • Your welcome :)

            – Shashank Gupta
            Feb 8 at 13:29
















          3














          You try following step to add js in admin:
          Create file app/code/Vendor/Module/view/adminhtml/layout/adminhtml_system_config_edit.xml



          <?xml version="1.0"?>

          <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
          <head>
          <link src="Vendor_ModuleName::js/yourjs.js"/>
          </head>
          </page>


          app/code/Vendor/Module/view/adminhtml/web/js/yourjs.js



          require(
          [
          'jquery',
          'mage/translate',
          ],
          function ($) {
          //add your code
          }
          );





          share|improve this answer


























          • your welcome :-)

            – Shashank Gupta
            Feb 5 '18 at 10:53











          • Thank you so much.. this helped most. :)

            – Ask Bytes
            Oct 13 '18 at 6:53











          • Your welcome :)

            – Shashank Gupta
            Oct 15 '18 at 9:37











          • Thanks a ton its working for me.

            – shivashankar m
            Feb 8 at 13:15











          • Your welcome :)

            – Shashank Gupta
            Feb 8 at 13:29














          3












          3








          3







          You try following step to add js in admin:
          Create file app/code/Vendor/Module/view/adminhtml/layout/adminhtml_system_config_edit.xml



          <?xml version="1.0"?>

          <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
          <head>
          <link src="Vendor_ModuleName::js/yourjs.js"/>
          </head>
          </page>


          app/code/Vendor/Module/view/adminhtml/web/js/yourjs.js



          require(
          [
          'jquery',
          'mage/translate',
          ],
          function ($) {
          //add your code
          }
          );





          share|improve this answer















          You try following step to add js in admin:
          Create file app/code/Vendor/Module/view/adminhtml/layout/adminhtml_system_config_edit.xml



          <?xml version="1.0"?>

          <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
          <head>
          <link src="Vendor_ModuleName::js/yourjs.js"/>
          </head>
          </page>


          app/code/Vendor/Module/view/adminhtml/web/js/yourjs.js



          require(
          [
          'jquery',
          'mage/translate',
          ],
          function ($) {
          //add your code
          }
          );






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Feb 5 '18 at 9:13

























          answered Feb 5 '18 at 8:47









          Shashank GuptaShashank Gupta

          491412




          491412













          • your welcome :-)

            – Shashank Gupta
            Feb 5 '18 at 10:53











          • Thank you so much.. this helped most. :)

            – Ask Bytes
            Oct 13 '18 at 6:53











          • Your welcome :)

            – Shashank Gupta
            Oct 15 '18 at 9:37











          • Thanks a ton its working for me.

            – shivashankar m
            Feb 8 at 13:15











          • Your welcome :)

            – Shashank Gupta
            Feb 8 at 13:29



















          • your welcome :-)

            – Shashank Gupta
            Feb 5 '18 at 10:53











          • Thank you so much.. this helped most. :)

            – Ask Bytes
            Oct 13 '18 at 6:53











          • Your welcome :)

            – Shashank Gupta
            Oct 15 '18 at 9:37











          • Thanks a ton its working for me.

            – shivashankar m
            Feb 8 at 13:15











          • Your welcome :)

            – Shashank Gupta
            Feb 8 at 13:29

















          your welcome :-)

          – Shashank Gupta
          Feb 5 '18 at 10:53





          your welcome :-)

          – Shashank Gupta
          Feb 5 '18 at 10:53













          Thank you so much.. this helped most. :)

          – Ask Bytes
          Oct 13 '18 at 6:53





          Thank you so much.. this helped most. :)

          – Ask Bytes
          Oct 13 '18 at 6:53













          Your welcome :)

          – Shashank Gupta
          Oct 15 '18 at 9:37





          Your welcome :)

          – Shashank Gupta
          Oct 15 '18 at 9:37













          Thanks a ton its working for me.

          – shivashankar m
          Feb 8 at 13:15





          Thanks a ton its working for me.

          – shivashankar m
          Feb 8 at 13:15













          Your welcome :)

          – Shashank Gupta
          Feb 8 at 13:29





          Your welcome :)

          – Shashank Gupta
          Feb 8 at 13:29













          3














          As per magento 2 standards, you will required requirejs-config.js to add custom javascript
          Create requirejs-config.js in app/code/vendor/module-name/view/adminhtml/requirejs-config.js



          var config = {
          map: {
          '*': {
          customscript:'Vendor_ModuleName::js/custom'
          }
          }
          };


          then create custom.js :
          app/code/Vendor/modulename/view/adminhtml/web/js






          share|improve this answer


























          • i need to load this js in admin configuration section not in frontend. and how to call this script file?

            – iqbal malik
            Feb 5 '18 at 8:10











          • Please add requirejs-config.js in adminthtml folder in place of frontend folder and create js directory and custom.js file

            – Shankar
            Feb 5 '18 at 9:21











          • it is not working for me. something went wrong

            – iqbal malik
            Feb 5 '18 at 9:36


















          3














          As per magento 2 standards, you will required requirejs-config.js to add custom javascript
          Create requirejs-config.js in app/code/vendor/module-name/view/adminhtml/requirejs-config.js



          var config = {
          map: {
          '*': {
          customscript:'Vendor_ModuleName::js/custom'
          }
          }
          };


          then create custom.js :
          app/code/Vendor/modulename/view/adminhtml/web/js






          share|improve this answer


























          • i need to load this js in admin configuration section not in frontend. and how to call this script file?

            – iqbal malik
            Feb 5 '18 at 8:10











          • Please add requirejs-config.js in adminthtml folder in place of frontend folder and create js directory and custom.js file

            – Shankar
            Feb 5 '18 at 9:21











          • it is not working for me. something went wrong

            – iqbal malik
            Feb 5 '18 at 9:36
















          3












          3








          3







          As per magento 2 standards, you will required requirejs-config.js to add custom javascript
          Create requirejs-config.js in app/code/vendor/module-name/view/adminhtml/requirejs-config.js



          var config = {
          map: {
          '*': {
          customscript:'Vendor_ModuleName::js/custom'
          }
          }
          };


          then create custom.js :
          app/code/Vendor/modulename/view/adminhtml/web/js






          share|improve this answer















          As per magento 2 standards, you will required requirejs-config.js to add custom javascript
          Create requirejs-config.js in app/code/vendor/module-name/view/adminhtml/requirejs-config.js



          var config = {
          map: {
          '*': {
          customscript:'Vendor_ModuleName::js/custom'
          }
          }
          };


          then create custom.js :
          app/code/Vendor/modulename/view/adminhtml/web/js







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Feb 5 '18 at 9:22

























          answered Feb 5 '18 at 7:57









          ShankarShankar

          7526




          7526













          • i need to load this js in admin configuration section not in frontend. and how to call this script file?

            – iqbal malik
            Feb 5 '18 at 8:10











          • Please add requirejs-config.js in adminthtml folder in place of frontend folder and create js directory and custom.js file

            – Shankar
            Feb 5 '18 at 9:21











          • it is not working for me. something went wrong

            – iqbal malik
            Feb 5 '18 at 9:36





















          • i need to load this js in admin configuration section not in frontend. and how to call this script file?

            – iqbal malik
            Feb 5 '18 at 8:10











          • Please add requirejs-config.js in adminthtml folder in place of frontend folder and create js directory and custom.js file

            – Shankar
            Feb 5 '18 at 9:21











          • it is not working for me. something went wrong

            – iqbal malik
            Feb 5 '18 at 9:36



















          i need to load this js in admin configuration section not in frontend. and how to call this script file?

          – iqbal malik
          Feb 5 '18 at 8:10





          i need to load this js in admin configuration section not in frontend. and how to call this script file?

          – iqbal malik
          Feb 5 '18 at 8:10













          Please add requirejs-config.js in adminthtml folder in place of frontend folder and create js directory and custom.js file

          – Shankar
          Feb 5 '18 at 9:21





          Please add requirejs-config.js in adminthtml folder in place of frontend folder and create js directory and custom.js file

          – Shankar
          Feb 5 '18 at 9:21













          it is not working for me. something went wrong

          – iqbal malik
          Feb 5 '18 at 9:36







          it is not working for me. something went wrong

          – iqbal malik
          Feb 5 '18 at 9:36




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Magento Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f212206%2fhow-to-add-and-use-custom-js-in-admin-configuration-creating-custom-module%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          What other Star Trek series did the main TNG cast show up in?

          Berlina muro

          Berlina aerponto