[Solved] Integrate with External Bootstrap Template

Frappe Framework Website
1

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?

5 Likes
2

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
3

@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

4

@makarand_b
Ok Understoodā€¦ let me tryā€¦

5

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

1 Like
6

@makarand_b

Okay, thank youā€¦
Trying it nowā€¦

7

@makarand_b

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

8

can u show us a screenshot what uā€™ve done? :slight_smile:

9

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

sample_db.png1113Ɨ563 43.1 KB

5 Likes
10

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
11

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

thanks in advance. cheers

3 Likes
12

Surely I will share the code @robinz @hereabdulla

1 Like
13

thanks a lot @Amalendu . eagerly waiting for that

14

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

16 Likes
15

@Amalendu Thanks for Sharingā€¦

16

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

17

@ wdg You can try

adminlte.io/

2 Likes
18

@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.

19

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!

20

Hello @Jack1
Can you make it clear plz?