Custom Page - How To Connect Html Template

Hello I am trying to create custom page which will render some filter fields and custom html.

So I started with creating site: Desk > Page > Create New - i created new page with name MyPage in custom module with name CModule which is in custom app CApp

After that i found files in: capp/capp/capp/page/mypage/

I changed file: capp/capp/capp/page/mypage/mypage.js

frappe.pages['mypage'].on_page_load = function(wrapper) {
	var page = frappe.ui.make_app_page({
		parent: wrapper,
		title: 'MyPage',
		single_column: true
	});

	page.custom_field = page.add_field({
		fieldname: 'name',
		label: __('CustomField'),
		fieldtype:'Link',
		options:'CustomDocType',
		
	});
	
}

capp.MyPage = Class.extend({
	init: function(opts) {
		$.extend(this, opts);
		this.make();
	},
	make: function(){
		this.wrapper.html(frappe.render_template("mypage", ""));
	}
})

Page custom field is working. Problem starting at capp.MyPage.

I don’t know how can i define capp in js and which class may i extend when i want create custom page with custom html and filtering. And how can i do somethink like this:

capp.MyPage = erpnext.SomeClass({

Where i can define cpp.MyPage. Do i need extend some class? Maybe some class which will handle filter form?

I also created custom html template in: capp/capp/public/js/templates/mypage.html - this is builded - i setted build.json file and add app include_js in hooks

app_include_js = "/assets/js/capp.min.js

Is there any minimal example for custom page like this?

hi, please try to add mypage.html to the capp/capp/capp/page/mypage the same directory where you have mypage.js

Hello, thank you for fast reply. I tried also this. But it is not working.

check this out might be helpful.

Hi, thanks but all of this i know. I know how can i render html through js (for example in custom HTML FIELD).
My problem is:
-how to do it in custom page?
-which erpnext or frappe class need extend when i want work with forms (filters) in custom?
-how can i create custom js class for my custom app through extending some existing class?

I readed all of this topics (I hope that all).

Hi,
So, here are my steps(start is similar with your):

then I changed mypage.js

frappe.pages['mypage'].on_page_load = function(wrapper) {
     	new MyPage(wrapper);
}

MyPage = Class.extend({
	init: function(wrapper) {
		this.page = frappe.ui.make_app_page({
			parent: wrapper,
			title: 'MyPage',
			single_column: true
		});
		this.make();
	},
	make: function() {
		$(frappe.render_template("mypage", this)).appendTo(this.page.main);
	}
})

after it I’ve added mypage.html in the same directory I have mypage.js.
I hope it helps.

7 Likes

Hi, thanks, this is exactly what i was looking for.

Exactly what I was looking for too!!! Thanks.