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:
- Server-side, which uses
Jinja2templating 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"]
- Client-side, which uses
ninjuckstemplating 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);
}