Create custom page

Frappe Framework Customization
,
1

I want to create a custom page and display data from table in database and doctype.
I have created a page test.
Can someone please help me.

2
  1. Create Custom Page.
  2. fetch data via Ajax(Frappe.call)
  3. Render Template with dynamic Data

You can refer existing custom pages to get idea how data rendering should be done

  1. Data Import Tool
  2. Pos
3

Thanks for replying @khushal_t, I am trying to create custom page for the first time and these pages are looking complex. Do you have any simple page which is related to my requirement?

4

Go to page list. Create a new page.
You can see the .html,.js and .py files gets created for that page.
You just have to call pyhon function in js, that python function will fetch data from database returned it to js. On js you have to pass that data to html, and render that html file.
You can refer the pages created in erpnext, and their code.

1 Like
5

I am trying to create dynamic table in a custom page using html file and javascript, where array of data will be fetched from python method to javascript and then table will be created accordingly. But my frappe.call is not executing . I don’t know where I am doing wrong. Help me in this pls.

<html> 
<body> 
    <center> 
        <input type="button" value="Generate Table" onclick="GenerateTable()" />
        <hr />
        <div id="dvTable"></div>
        <table id="demo"></table> 
    </center> 
</body> 
</html> 

function GenerateTable() {
        var d = []
        frappe.call({
		    method: "erpnext.stock.doctype.route_allocation.route_allocation.create_del_table", //dotted path to server method
		    args:{},
		    callback: function(r) {
		            if (r.message){                   
                    $.each(r.message, function(i, item) {
                        var item_row = r.message
                        console.log(item)
   
					});
                }
		    }
		})
		var customers = new Array();
        customers.push(["Customer Id", "Name", "Country"]);
        customers.push([1, "John Hammond", "United States"]);
        customers.push([2, "Mudassar Khan", "India"]);
        customers.push([3, "Suzanne Mathews", "France"]);
        customers.push([4, "Robert Schidner", "Russia"]);
 
        //Create a HTML Table element.
        var table = document.createElement("TABLE");
        table.border = "1";
 
        //Get the count of columns.
        var columnCount = customers[0].length;
 
        //Add the header row.
        var row = table.insertRow(-1);
        for (var i = 0; i < columnCount; i++) {
            var headerCell = document.createElement("TH");
            headerCell.innerHTML = customers[0][i];
            row.appendChild(headerCell);
        }
 
        //Add the data rows.
        for (var i = 1; i < customers.length; i++) {
            row = table.insertRow(-1);
            for (var j = 0; j < columnCount; j++) {
                var cell = row.insertCell(-1);
                cell.innerHTML = customers[i][j];
            }
        }
 
        var dvTable = document.getElementById("dvTable");
        dvTable.innerHTML = "";
        dvTable.appendChild(table);
}
6

call your function GenerateTable() in docs .js file which created by default. call you function any trigger like(onload, refresh, before_save… or etc as per your requirement).

7

try command to check your path is correct or not
“bench execute dotted_path”
check your function is whitelisted and with correct spelling