Add External JavaScript library in Webpage & desk - ashish-greycube/help GitHub Wiki

Assets Bundling in Page(for desk):

1. Build New Page from page doctype and make it standard.

   This will create 2 files in:

   go to vscode ->app ->app ->module ->page ->page-name ->[.js, .json]

2. In terminal install any external javascript library in your app using yarn.

   method:1] yarn add js-confetti
   method:2] npm install anime.js

• After Installtion js library will add in: - app's package.json file and node_module folder

3. Build and start Bench

   bench build --app library_management

   bench start

4. Create Bundle file in:

   app -> public -> js(e.g.library.bundle.js)

5. Import js-confetti library in bundle.js file

   • after importing js-confetti, 2 .js files are added in

     app -> public -> dist -> js(folder)

6. In page's .js file add bundle.js file:

   frappe.require(['library.bundle.js'() =>{}])

Now, You can show the impact or styling of bundle.js file in your desk(page)!!

Assets Bundling in Web :

• Installation steps for external js library are same as for page

1. Create new .html file in

   app -> www (e.g. library.html)

2. In .html file add template using jinja

   {%- extends "templates/web.html" -%}

3. Add bundle.js file in .html file using jinja

   {%- block script -%}
   {{ include_script('library.bundle.js') }}
   {%- endblock -%}

Now, You can show the impact or styling of bundle.js file in your web page !!

• If you want to give impact of bundle.js file in all web pages :

  Add bundle.js file in app's hooks.py file

   web_include_js = ['library.bundle.js']

Assets bundling in bind files of web

• when you create same name files in www folder, they will bind with each-other automatically (e.g, myparty.html, myparty.py, myparty.js)

• In myparty.py file, you have to define function:

• In myparty.html file, you can directly use this function using jinja template

• In myparty.js file, you can directly apply js-script on myparty.html's tags & also use DOM manipulation on it.

  • you can use frappe.ready(function(){..}) to trigger onload() events directly.

  Note: for using frappe methods in .js file, the template included in .html file must have 'frappe' keyword.

• If you add bundle.js file in myparty.html file then bindling between .html & .js will break!! To resolve this problem you have to also include .js file

   {%- block script -%}
   {{ include_script('myparty.js') }}
   {{ include_script('myparty.bundle.js') }}
   {%- endblock -%}