I am trying to add new form in the Page and when I am adding new fields , they are added in the single line. I want to put newline break after each field. How do I do that ?
sample code:
frappe.pages['task'].on_page_load = function(wrapper) {
let page = frappe.ui.make_app_page({
parent: wrapper,
title: 'Task',
single_column: false
});
console.log("page: ", page);
page.set_title("Task");
page.set_primary_action('Save', () => {
console.log("save clicked!");
});
let task = page.add_field({
label: 'Task',
fieldtype: 'Link',
fieldname: 'task',
options: "Task",
change() {
console.log(task.get_value());
}
});
let operation = page.add_field({
label: 'Operation',
fieldtype: 'Select',
fieldname: 'operation',
options: [
'Show',
'Insert',
'Update'
],
change() {
console.log(operation.get_value());
}
});
add section_break field .
frappe.pages["forum"].on_page_load = (wrapper) => {
new TaskPage(wrapper);
};
class TaskPage {
constructor(parent) {
frappe.ui.make_app_page({
parent: parent,
title: "Task",
single_column: false,
card_layout: true,
});
this.parent = parent;
this.page = this.parent.page;
this.make_form();
}
make_form() {
this.form = new frappe.ui.FieldGroup({
fields: [
{
label: __("Task"),
fieldname: "task",
fieldtype: "Link",
options: "Task",
change: () => {
console.log(this.form.get_value("task"));
},
},
{
fieldtype: "Column Break",
},
{
label: __("Operation"),
fieldname: "operation",
fieldtype: "Select",
options: ["Show", "Insert", "Update"],
change: () => {
console.log(this.form.get_value("operation"));
},
},
{
fieldtype: "Section Break",
},
{
label: __("Date"),
fieldname: "date",
fieldtype: "Date",
change: () => {
console.log(this.form.get_value("date"));
},
},
],
body: this.page.body,
});
this.form.make();
}
}
3 Likes
It worked. Thanks.
One more thing, how can I add child rows kind of grid of values here. I have a list of values and I would like to add those list of values as Child table grid.
Do you have any documentation or examples to refer to ?
Usage:
],
});
setTimeout(function () {
me.get_datatable(columns, data, dialog.get_field(fieldname).wrapper);
}, 200);
dialog.show();
},
get_datatable(columns, data, wrapper) {
const datatable_options = {
columns: columns,
data: data,
dynamicRowHeight: true,
checkboxColumn: false,
inlineFilters: true,
};
new frappe.DataTable(wrapper, datatable_options);
},
Reference:
https://frappe.io/datatable
Note:
In Page append Html according to your requirement (optional) and get that element where you need datatable and pass as wrapper.
Eg)
const CONTAINER_HTML = <div class="task-page page-main-content"></div>
this.$container = $(CONTAINER_HTML).appendTo(this.page.main);
