Bring Data into HTML field in the DocType

Amalendu · July 17, 2016, 4:37am

Hi,

I need to show the data from the database table into the HTML field of the Doctype ( custom created with ‘Setup’ Document Type).

Anybody know how to display data in the HTML field,while loading the custom created doctype.?

revant_one · July 17, 2016, 6:57am

Create html template
e.g. andesit_karang_anyar/driver_list.html at develop · gaurav-naik/andesit_karang_anyar · GitHub
add it to build.json - andesit_karang_anyar/build.json at develop · gaurav-naik/andesit_karang_anyar · GitHub
add app_include_js in hooks - andesit_karang_anyar/hooks.py at develop · gaurav-naik/andesit_karang_anyar · GitHub
Changes in doctype’s py andesit_karang_anyar/vehicle.py at develop · gaurav-naik/andesit_karang_anyar · GitHub
Changes in doctype’s js - andesit_karang_anyar/vehicle.js at develop · gaurav-naik/andesit_karang_anyar · GitHub

This shows driver’s photo under Vehicle.

Amalendu · July 17, 2016, 9:41am

@revant_one
Thank you for the detailed reply…
Let me try

tmatteson · March 19, 2017, 7:30pm

@revant_one Thank you for putting this out here! I am trying to understand what’s going on in the python and JS portions of your app. I am trying to strip it back to something super simple and I’m getting hung up on the way your app brings in the HTML template.
Sorry for resurrecting this thread, but I think this is a really helpful technique if I could get it working.

revant_one · March 20, 2017, 6:26am

github.com

gaurav-naik/andesit_karang_anyar/blob/develop/andesit_karang_anyar/andesit_karang_anyar/doctype/vehicle/vehicle.js#L9


      
          // Copyright (c) 2016, MN Technique and contributors
          // For license information, please see license.txt
          frappe.provide("erpnext.utils");
          
          
frappe.ui.form.on('Vehicle', {
          	refresh: function(frm) {
          		if (!cur_frm.doc.__islocal) {
          			$(frm.fields_dict['drivers'].wrapper)
          				.html(frappe.render_template("driver_list", cur_frm.doc.__onload));
          		}
          	}
          });
          
          
cur_frm.add_fetch("vehicle_driver", "wb_driver_fn", "driver_name");
          cur_frm.add_fetch("vehicle_driver", "wb_driver_licence", "driver_licence_no");

frappe.render_template used in javascript returns rendered html string.

It takes 2 parameters,
template name e.g driver_list
and dictionary e.g. cur_frm.doc.__onload.

template names are defined using the first three steps 1) create a John Resig template HTML, 2) add it to build.json, 3) add it to hooks so it is available for app.

reference : jquery - How to use the John Resig JavaScript Micro-Templating engine? - Stack Overflow

instead of using tmpl() use frappe.render_template()

example using render_template in desk page

github.com

mntechnique/refreshednow_erpnext/blob/master/refreshednow_erpnext/refreshednow_erpnext/page/rn_team_tool/rn_team_tool.js#L83


      
          		method: "refreshednow_erpnext.api.get_team_tool_data",
          		args: {
          			service_type: service_type,
          			day_of_week: day_of_week
          		},
          		freeze: true,
          		freeze_message: __("Retrieving..."),
          		callback: function(r) {
          
          
			console.log("Team tool data:", r);
          
          
			page.wrapper.find("#team-daily-allocation").remove();
          			page.wrapper.find(".alert-danger").remove();
          
          
			if (r.message.data) {
          				page.main.after(frappe.render_template("team_allocation_view", r.message));
          			    $(document).scroll(function(){
          					if ($(window).scrollTop() > 100) {
          						$("#fixed-table").addClass("onscroll_fixed");
          					}
          					if ($(window).scrollTop() < 100) {

template file defined here

github.com

mntechnique/refreshednow_erpnext/blob/master/refreshednow_erpnext/public/js/team_allocation_view.html

{% if (data) { %}
<div id="team-daily-allocation">
	<table style="margin-bottom:0px;" id="fixed-table" class="table table-bordered table-striped table-condensed table-hover">
		<thead>
			<tr>
				<th id="staff_col">Staff</th>
				{%	for (var i=0, l=data.teams.length; i<l; i++) { %}
					<th style="text-align:center;"> {%= data.teams[i].name %}
					</th>
				{% } %}
			</tr>
		</thead>
	</table>	
	<table style="margin-top:0px;" class="table table-bordered table-striped table-condensed table-hover">
		<tbody>
			{% for (var j=0, k=data.employees.length; j<k; j++) { %}
				{%	var rn_weekly_off = data.employees[j].rn_weekly_off;
					var emp_name = data.employees[j].name; %}
				<tr>
					<td id="staff_col_td">

This file has been truncated. show original

changes in hooks

github.com

mntechnique/refreshednow_erpnext/blob/master/refreshednow_erpnext/hooks.py#L19


      
          app_icon = "fa fa-car"
          app_color = "#53baed"
          app_email = "support@mntechnique.com"
          app_license = "GPLv3"
          
          
# Includes in <head>
          # ------------------
          
          
# include js, css files in header of desk.html
          app_include_css = "/assets/css/refreshednow.min.css"
          app_include_js = "/assets/js/refreshednow.min.js"
          
          
# include js, css files in header of web template
          # web_include_css = "/assets/refreshednow_erpnext/css/refreshednow_erpnext.css"
          # web_include_js = "/assets/refreshednow_erpnext/js/refreshednow_erpnext.js"
          
          
# Home Pages
          # ----------
          
          
# application home page (will override Website Settings)
          # home_page = "login"

add template to build.json

github.com

mntechnique/refreshednow_erpnext/blob/master/refreshednow_erpnext/public/build.json#L11


      
          {
          	"js/refreshednow.min.js": [
          		"public/js/available_cleaners.html",
          		"public/js/daily_allocation.html",
          		"public/js/rn_calendar.js",
                  "public/js/customer_vehicle.html",
          		"public/js/caller_information.html",
                  "public/js/customer_vehicle.html",
                  "public/js/team_details.html",
                  "public/js/rn_utils.js",
                  "public/js/team_allocation_view.html"
          	],
          	"css/refreshednow.min.css": [
          		"public/css/rn_event.css"
          	]
          }

royprotim · June 22, 2017, 12:51pm

Can it be done for the web forms?

revant_one · June 23, 2017, 1:04pm

If you wish to build a custom functionality into web pages refer how current pages from www directory work.

also check documentation for portal development :
http://frappe.github.io/frappe/user/en/guides/portal-development/

faris-mohamed10 · January 18, 2024, 2:43pm

how does this change after the build system change in v14? the build.json is now depricated and how to get the template to the desk?