ERPNext Foundation ERPNext Cloud User Manual Blog Discuss Frappé* Donate

Frappe templating system


#1

Can someone please explain, how the Frappe templating system works?

I have searched the forum, but all of the topics I could find explain concrete details of the implementation of some already existing page and don’t help me to understand the templating infrastructure as a whole.

This is what I was able to find out reading the source code for now.

For example, I want to render an HTML (page_name.html) like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

{% for item in content %}
{{ item }} <br/>
{% endfor %}

</body>
</html>

There are two types of template rendering:

  1. Server-side, which uses Jinja2 templating engine.

Server-side rendering is used when generating pages from /www app folder. I have to create page_name.html and page_name.py files. page_name.py file has to provide a get_context(context, **dict_params) function, which will construct the context object, whose fields will be used as identifiers in the template directives. dict_params will hold the options from the URL:
page_name.py:

def get_context(context, **dict_params):
	context['content'] = ["item1", "item2"]
  1. Client-side, which uses ninjucks templating engine.

Client-side rendering is used when adding an instance of Page DocType. Frappe creates an /app/app/app/page/page_name folder and a page_name.js file, in which I have to use frappe.render_template('template_name', data_object) function and provide it with the data_object, whose fields will be used as identifiers in the template directives like this (page_name.js):

frappe.pages["page_name"].on_page_load = function(wrapper) {
	this.page = frappe.ui.make_app_page({
		parent: wrapper,
		title: "Page name"
	});
	this.page.content = ["custom content 1", "custom content 2"];
	$(frappe.render_template("dc_product_dashboard", page)).prependTo(page.main);
}

#2

I have a simple example here, which shows both the input(example code) and the output(example image) for a Jinja2(server) instance. Hopefully it will be useful. Comments/criticisms are welcome


#3

Thanks, your example helped me to understand the Jinja2 part for the print forms a bit better.

I’m still vague a bit on the ninjucks part and how the whole /www templating business work though.