Try ERPNext Buy Support Partners Foundation Foundation Members

[Solved] Integrate with External Bootstrap Template

Hi all,

I am just trying to integrate Bootstrap Admin Dashboard with ERPNext Website.

I have a dashboard.html page.

but where should i place the .css and .js files coming with external bootstrap templates?

should I create public > css
and public > js directories in my Custom App?

3 Likes

Yes, then create build.json in public directory and add all the css, js files list in build.json to minify the css and js. Then include the minified css, and js in hooks.py. please check the hooks.md.

If the css is for app then include files in app_include_css & app_include_js.
If the css is for website then include files in web_include_css & web_include_js.

Thanks, Makarand

1 Like

@makarand_b
I already have .min.js files (downloaded from net)
So still i need to be add the css ,js files in build.json?

Thanks

@makarand_b
Ok Understood… let me try…

In that case, include those files directly in hooks.py.

1 Like

@makarand_b

Okay, thank you…
Trying it now…

@makarand_b

Thank You, I got the template working fine.
There was jQuery Conflict.
It had to be solved.

can u show us a screenshot what u’ve done? :slight_smile:

Yes sure @robinz
Below is juat 3 tables and aggregate data… we can show any widget like this…

5 Likes

Dear @Amalendu
Many of us in Community looking for this dashboard like thing,if you dont mind just share the procedure you followed to get a dashboad like the above screenshot

3 Likes

this looks fantastic. it would be great if u share your code or procedure.

thanks in advance. cheers

3 Likes

Surely I will share the code @robinz @hereabdulla

1 Like

thanks a lot @Amalendu . eagerly waiting for that

Hi @robinz, @hereabdulla, @ledavidle

I have created the template by

  • Make copy(link) of the ‘public’ folder of my custom app
  • Cut that folder and put it inside sites/assets
  • rename that folder to ‘app name’
  • Create two folders(css and js) inside this folder
  • create/download any bootstrap admin template
  • save it in the www folder of custom app
  • put all js files inside app’s js folder
  • put all css files inside the app’s css folder
  • Correct all the css and js links line of codes in the newly created dashboard.html page
  • do ‘bench build’
  • do ‘bench clear-cache’
  • do ‘bench start’ or serve it any port

Now access the dashboard page.

This is the procedure i followed to create the above page.

Thanks

14 Likes

@Amalendu Thanks for Sharing…

Thanks for sharing @Amalendu! May I know where can I find a bootstrap admin template like the one you used?

@ wdg You can try

adminlte.io/
https://www.creative-tim.com/bootstrap-themes/admin-dashboard

2 Likes

@Amalendu thanks for sharing.

When you mean “put all js files inside app’s js folder” you mean 100% of the js of a admin file?
I ask because the Bootstrap template I have have hundreds of js’s (folder names), two in data, two in dist, one in root, on in js and several other in the “vendor” folder - should I consolidate all of them in the js folder of > frappe-bench > sites > assets.

Thanks a lot.

Hi Amalendu, can you plz guide my how do I integrate my website to the ERP? As the leads may come directly to the ERP.

Thanks in advance!

Hello @Jack1
Can you make it clear plz?