ERPNext new app with embeded js/css

environment structure
$home = /dev/frappe-bench/

1. Create new app

bench new-app myapp1

and key in App Description and other information.
App wil appear in

$home/apps/myapp1

App structure

myapp1
├── MANIFEST.in
├── README.md
├── license.txt
├── myapp1
│   ├── __init__.py
│   ├── config
│   │   ├── __init__.py
│   │   ├── desktop.py
│   │   └── docs.py
│   ├── hooks.py
│   ├── modules.txt
│   ├── myapp1
│   │   └── __init__.py
│   ├── patches.txt
│   ├── templates
│   │   ├── __init__.py
│   │   ├── generators
│   │   │   └── __init__.py
│   │   ├── includes
│   │   └── pages
│   │   └── __init__.py
│   └── www
├── myapp1.egg-info
│   ├── PKG-INFO
│   ├── SOURCES.txt
│   ├── dependency_links.txt
│   ├── not-zip-safe
│   ├── requires.txt
│   └── top_level.txt
├── requirements.txt
└── setup.py

2. Create webview and page controller
create html in folder www/myapp1_index.html

<p class="intro">Car</p>
<p>Brand: {{car.brand}}</p>
<p>Color: {{car.color}}</p>

create py in folder www/myapp1_index.py for page context data

import frappe

def get_context(context):
context.car = dict(brand="Toyota",color="Red")

3. Create js and css
create folder public/js and public/css in ../myapp1/myapp1/
for public/css create myapp-demo.css

.intro {
background-color:yello;
}

for public/js create myapp-demo.js

alert("Hello from myapp-demo.js");

Create build.json at public/build.json to config the js/css file

{
   "myapp1/css/myapp1.css": [
     "public/css/myapp-demo.css"
   ],
   "myapp1/js/myapp1.js": [
     "public/js/myapp-demo.js"
   ]
}

4. From hooks.py file add configuration

# include js, css files in header of web template
web_include_css = "/assets/myapp1/css/myapp1.css"
web_include_js = "/assets/myapp1/js/myapp1.js"

5. Final app tree

myapp1
├── __init__.py
├── config
│   ├── __init__.py
│   ├── desktop.py
│   └── docs.py
├── hooks.py
├── hooks.pyc
├── modules.txt
├── myapp1
│   ├── __init__.py
├── patches.txt
├── public
│   ├── build.json
│   ├── css
│   │   ├── myapp-demo.css
│   │   └── myapp1.css
│   └── js
│       ├── myapp-demo.js
│       └── myapp1.js
├── templates
│   ├── __init__.py
│   ├── generators
│   │   └── __init__.py
│   ├── includes
│   └── pages
│       └── __init__.py
└── www
    ├── myapp1_index.html
    ├── myapp1_index.py

6. Install app with command

bench --site site1.local install-app myapp1
bench --site site1.local sync-www

7. Run app

http://localhost:8000/myapp1_index

Source code
https://github.com/wisaruthk/myapp1.git

About WK

Kajook is a Senior Software Engineer. Job is Design & Develop in Java EE environment on Glassfish. I'm Interested in Agile software development ,iOS and Android.
This entry was posted in knowledge and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s