Modification in UI

Hardik_Gadesha · November 17, 2016, 2:49pm

Hello,

I want to create customize table in doctype. Please find below attached table image. Can i achieve it with customization option in Frappe or i need to change some code to create this type of table ? All fileds ( shown in figure as 1,2,3…like wise) in table should be editable.

Is it achievable from any of the way or is there any other solution available ? Any answer will be appreciable.

Regards,
Hardik Gadesha
Software Engineer @ AIMDek Technologies Pvt Ltd

cpurbaugh · November 17, 2016, 7:45pm

There is no image.

Hardik_Gadesha · November 18, 2016, 6:23am

Hello,

Please find attached image in above Question.
I am using local server easy installation steps for frappe bench setup.

Regards,
Hardik Gadesha
Software Engineer @ AIMDek Technologies Pvt Ltd

netchampfaris · November 18, 2016, 6:28am

This must be a child table, right? What is your use case?

Hardik_Gadesha · November 18, 2016, 6:43am

Yes. it,s a child table. Let me explain you with an example. Suppose ,It is a square floor area and we need to divide the floor into 9 parts for a purpose and each part then will be represented independently and they need to be editable as well.

Regards,
Hardik Gadesha
Software Engineer @ AIMDek Technologies Pvt Ltd

netchampfaris · November 18, 2016, 6:49am

You can use 3 rows with 3 columns each. What have you tried?

Hardik_Gadesha · November 18, 2016, 7:25am

I created 3 rows and 12 column (3x12) using column break type in fieds, but i want to represent it with 4 tables of (3x3). Each 3x3 table will represented in individual section. and the space in between all columns are bigger. so i want to minimize in between space of each column. please find attached image. This will more clear things.

And What will be the solution to design this downward arrow.

Designed Table In frappe :- Image-1

Required Table Design :- Image-2

Regards,
Hardik Gadesha
Software Engineer @ AIMDek Technologies Pvt Ltd

netchampfaris · November 18, 2016, 8:35am

Well, this will require customization on your side, frappé framework doesnt support this out of the box.

Hardik_Gadesha · November 18, 2016, 8:40am

Yes, but how can i create this from my side ? In which file, should i change. i am very new to software side and want a proper guidance for this. could you please help me to resolve this ?

i am using Development setup of frappe-bench.

Thanks & Best Regards

netchampfaris · November 18, 2016, 11:31am

Refer to these:

github.com

frappe/frappe/blob/5ede87070083305cc455f919c9ab3d795d04c072/frappe/public/js/frappe/form/layout.js

// Copyright (c) 2015, Frappe Technologies Pvt. Ltd. and Contributors
// MIT License. See license.txt
frappe.provide("frappe.ui.form");

// 	- page
//		- section
//			- column
//		- section


frappe.ui.form.Layout = Class.extend({
	init: function(opts) {
		this.views = {};
		this.pages = [];
		this.sections = [];
		this.fields_list = [];
		this.fields_dict = {};

		$.extend(this, opts);
	},

This file has been truncated. show original

github.com

frappe/frappe/blob/5ede87070083305cc455f919c9ab3d795d04c072/frappe/public/js/frappe/form/control.js

// Copyright (c) 2015, Frappe Technologies Pvt. Ltd. and Contributors
// MIT License. See license.txt

frappe.ui.form.make_control = function (opts) {
	var control_class_name = "Control" + opts.df.fieldtype.replace(/ /g, "");
	if(frappe.ui.form[control_class_name]) {
		return new frappe.ui.form[control_class_name](opts);
	} else {
		console.log("Invalid Control Name: " + opts.df.fieldtype);
	}
}

frappe.ui.form.Control = Class.extend({
	init: function(opts) {
		$.extend(this, opts);
		this.make();

		// if developer_mode=1, show fieldname as tooltip
		if(frappe.boot.user && frappe.boot.user.name==="Administrator" &&
			frappe.boot.developer_mode===1 && this.$wrapper) {

This file has been truncated. show original

rmehta · November 18, 2016, 12:11pm

@Hardik_Gadesha add an HTML field type build your UI via the JS controller.

Don’t change the form.js files

CC @netchampfaris

Hardik_Gadesha · November 22, 2016, 6:40am

Hello,

I created a 3x3 text box using HTML field type and write a code for 3x3 table in option field. Now, how can i store this entered data to data base ?

Please find attached image.

Regards,
Hardik Gadesha
Software Engineer @ AIMDek Technologies Pvt Ltd