Custom Page - How To Connect Html Template

[janecek.mato]

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?

[NMyshuk]

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

[janecek.mato]

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

[bharat_Suthar]

check this out might be helpful.

[Solved] Integrate with External Bootstrap Template

@Amalendu thanks for sharing. When you mean “put all js files inside app’s js folder” you mean 100% of the js of a admin file? I ask because the Bootstrap template I have have hundreds of js’s (folder names), two in data, two in dist, one in root, on in js and several other in the “vendor” folder - should I consolidate all of them in the js folder of > frappe-bench > sites > assets. Thanks a lot.

https://github.com/frappe/frappe_io/blob/master/frappe_io/www/docs/user/en/guides/app-development/using-html-templates-in-javascript.md

[janecek.mato]

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).

[NMyshuk]

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

@janecek.mato

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

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.

[janecek.mato]

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

[dkeith]

@NMyshuk

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); } })

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

[Ishaan_Apte]

hey, thanks for the help
however how do I add dynamic content to the template through python and then send it to the UI?