Making a Web Page That Displays A DocType's Data

kolate_sambhaji · August 20, 2017, 7:53am

For web development,
We use simple ajax & jquery.

e.g
Onload of page call js function

frappe/erpnext/blob/develop/erpnext/templates/pages/product_search.html#L16


      
          
          
{% block page_content %}
          <script>{% include "templates/includes/product_list.js" %}</script>
          
          
<script>
          frappe.ready(function() {
          	var txt = frappe.utils.get_url_arg("search");
          	$(".search-results").html('{{ _("Search results for") + ": " + html2text(frappe.form_dict.search or "") | e | trim }}');
          	window.search = txt;
          	window.start = 0;
          	window.get_product_list();
          });
          </script>
          
          
<div class="product-search-content">
              <h3 class="search-results">{{ _("Search Results") }}</h3>
          	<div id="search-list" class="row">
          
          
	</div>
          	<div style="text-align: center;">
          		<div class="more-btn"

in js,fetch data using ajax call

github.com

frappe/erpnext/blob/develop/erpnext/templates/includes/product_list.js#L13


      
          
          
window.get_product_list = function() {
          	$(".more-btn .btn").click(function() {
          		window.get_product_list()
          	});
          
          
	if(window.start==undefined) {
          		throw "product list not initialized (no start)"
          	}
          
          
	$.ajax({
          		method: "GET",
          		url: "/",
          		data: {
          			cmd: "erpnext.templates.pages.product_search.get_product_list",
          			start: window.start,
          			search: window.search,
          			product_group: window.product_group
          		},
          		dataType: "json",
          		success: function(data) {

In python fetch data using sql and make html using render template

github.com

frappe/erpnext/blob/develop/erpnext/templates/pages/product_search.py#L16


      
          import frappe
          from frappe.utils import cint, cstr
          from redis.commands.search.query import Query
          
          
from erpnext.e_commerce.redisearch_utils import (
          	WEBSITE_ITEM_CATEGORY_AUTOCOMPLETE,
          	WEBSITE_ITEM_INDEX,
          	WEBSITE_ITEM_NAME_AUTOCOMPLETE,
          	is_redisearch_enabled,
          )
          from erpnext.e_commerce.shopping_cart.product_info import set_product_info_for_website
          from erpnext.setup.doctype.item_group.item_group import get_item_for_list_in_html
          
          
no_cache = 1
          
          

          
def get_context(context):
          	context.show_search = True
          
          

          
@frappe.whitelist(allow_guest=True)

Finally
append data to html div using jquery.

github.com

frappe/erpnext/blob/develop/erpnext/templates/includes/product_list.js#L36


      
          	})
          }
          
          
window.render_product_list = function(data) {
          	var table = $("#search-list .table");
          	if(data.length) {
          		if(!table.length)
          			var table = $("<table class='table'>").appendTo("#search-list");
          
          
		$.each(data, function(i, d) {
          			$(d).appendTo(table);
          		});
          	}
          	if(data.length < 10) {
          		if(!table) {
          			$(".more-btn")
          				.replaceWith("<div class='alert alert-warning'>{{ _("No products found.") }}</div>");
          		} else {
          			$(".more-btn")
          				.replaceWith("<div class='text-muted'>{{ _("Nothing more to show.") }}</div>");
          		}

We made this page.