Js Dialog Formats - ashish-greycube/help GitHub Wiki
Dialog Fields Creation
Type - 1
const dialog = new frappe.ui.Dialog({
title: __("Enter Payment Details"),
fields: [
{
label: 'Party',
fieldname: 'party',
fieldtype: 'Link',
options: 'Customer',
default: frm.doc.customer,
read_only: 1
},
{
fieldtype: 'Column Break'
},
{
label: 'Client Request',
fieldname: 'reference_client_request_ct',
fieldtype: 'Data',
default: frm.doc.name,
read_only: 1
},
{
fieldtype: 'Section Break'
},
{
label: "Perivous Payment Entry List",
fieldname: "payment_entry_list",
fieldtype: "Table",
cannot_add_rows: true,
cannot_delete_rows: true,
in_place_edit: false,
reqd: 1,
data: pe_list,
get_data: () => {
return data;
},
fields: table_fields,
// display_depends_on condition for dialog box field
depends_on: "eval:doc.storage_charges_type=='Actual Storage Days'"
},
{
label: 'Total Amount',
fieldname: 'total_amount',
fieldtype: 'Currency',
reqd: 1,
read_only: 1
},
{
label: 'Message',
fieldname: 'msg',
fieldtype: 'HTML',
options: '<p class="alert alert-warning">Total Outstanding: ' + frm.doc.outstanding_amount + ' </p>',
},
],
primary_action_label: 'Create Payment Entry',
primary_action: function (values) {
let update_payment_entry = values.payment_entry_list
let pe_to_be_used=[]
let to_be_paid_total=frm.doc.outstanding_amount
for (let a of update_payment_entry){
if(a.to_be_allocated > 0){
pe_to_be_used.push({"pe_name":a.name,"allocated_amount":a.to_be_allocated,
"reference_client_request_ct": values.reference_client_request_ct,"final_total":frm.doc.final_total,
"to_be_paid":to_be_paid_total})
to_be_paid_total=to_be_paid_total-a.to_be_allocated
}
}
// close the dialog box
dialog.hide();
},
})
dialog.show()
Type - 2
let dialog = undefined
const dialog_field = []
let cargo_item_field
let bill_to_field
let total_tonnage_field
let table_item_field
total_tonnage_field={
fieldtype: "Data",
fieldname: "total_tonnage_field",
label: __("Total Tonnage"),
hidden:1
}
cargo_item_field={
fieldtype: "Data",
fieldname: "cargo_item_field",
label: __("Cargo Item")
}
if(unique_customer.length == 1){
bill_to_field={
fieldtype: "Data",
fieldname: "bill_to_field",
label: __("Bill To"),
default: unique_customer[0],
reqd: 1,
}
}
dialog_field.push(bill_to_field)
dialog_field.push(cargo_item_field)
dialog_field.push(total_tonnage_field)
dialog_field.push({
fieldtype: "Section Break",
fieldname: "section_break_1",
})
dialog_field.push(table_item_field)
dialog = new frappe.ui.Dialog({
title: __("Enter Details for Storage Charges"),
fields: dialog_field,
primary_action_label: 'Create Sales Invoice',
primary_action: function (values) {
frappe.call({
method: "kict.kict.doctype.vessel.vessel.create_sales_invoice_for_storage_charges_from_vessel",
args: {
"source_name": frm.doc.name,
"target_doc": undefined,
"cargo_item_field":values.cargo_item_field,
"customer_name_field": values.customer_name_field,
"total_tonnage_field":values.total_tonnage_field
},
callback: function (response) {
if (response.message) {
frappe.open_in_new_tab = true;
frappe.set_route("Form", "Sales Invoice", response.message)
}
}
});
dialog.hide();
}
})
dialog.show()
Create child table in Dialog box
const table_fields = [
{
fieldtype: "Link",
fieldname: "item",
options: "Item",
label: __("Item"),
read_only: 1,
in_list_view: 1,
columns: 2
},
{
fieldtype: "Int",
fieldname: "from_days",
label: __("From Days"),
read_only: 1,
in_list_view: 1
},
{
fieldtype: "Int",
fieldname: "to_days",
label: __("To Days"),
read_only: 1,
in_list_view: 1
}
];
let dialog = undefined
const dialog_field = []
let bill_to_field
let table_item_field
table_item_field = {
label: "Chargeable Storage Charges Slots Details",
fieldname: "chargeable_storage_charges_slots_details",
fieldtype: "Table",
cannot_add_rows: true,
cannot_delete_rows: true,
in_place_edit: false,
reqd: 1,
data: [],
get_data: () => {
return [];
},
fields: table_fields
}
dialog_field.push(bill_to_field)
dialog_field.push(table_item_field)
dialog = new frappe.ui.Dialog({
title: __("Enter Details for Storage Charges"),
fields: dialog_field,
primary_action_label: 'Create Sales Invoice',
primary_action: function (values) {
frappe.call({
method: "kict.kict.doctype.vessel.vessel.create_sales_invoice_for_storage_charges_from_vessel",
args: {
"source_name": frm.doc.name,
"target_doc": undefined,
"cargo_item_field":values.cargo_item_field,
"customer_name_field": values.customer_name_field,
"total_tonnage_field":values.total_tonnage_field
},
callback: function (response) {
if (response.message) {
frappe.open_in_new_tab = true;
frappe.set_route("Form", "Sales Invoice", response.message)
}
}
});
dialog.hide();
}
})
dialog.show()
If you want to fill Dialog box's child table on change of any field : .df.data.push OR add_new_row
bill_to_field={
fieldtype: "Select",
fieldname: "bill_to_field",
label: __("Bill To"),
options: unique_customer,
reqd: 1,
onchange : function(){
console.log("-==-==")
let bill_to_field = dialog.get_field("bill_to_field")
for(record of vessel_details){
if(record.customer_name == bill_to_field.value){
dialog.set_value("cargo_item_field",record.item)
dialog.set_value("total_tonnage_field",record.tonnage_mt)
}
}
frappe.call({
method: "kict.kict.doctype.vessel.vessel.get_items_from_customer_for_storage_charges",
args: {
customer: bill_to_field.value
},
callback: function (r) {
console.log(r.message,"--")
let item_list = r.message
let dialog_items = dialog.fields_dict.chargeable_storage_charges_slots_details;
dialog_items.df.data = []
dialog_items.grid.refresh();
if (item_list.length > 0){
item_list.forEach(element => {
dialog_items.df.data.push(element);
dialog_items.grid.refresh();
});
}
dialog_items.grid.refresh()
}
})
}
}
Multi Select Dialog Box
new frappe.ui.form.MultiSelectDialog({
doctype: "TAS Purchase Order",
target: cur_frm,
setters: {
vendor: frm.doc.vendor || undefined,
},
add_filters_group: 1,
// date_field: "transaction_date",
allow_child_item_selection: 1,
child_fieldname: "items",
child_columns: ["item_no", "qty", "color"],
// get_query() {
// return {
// filters: { docstatus: ['!=', 2] }
// }
// },
onload: setTimeout(() => {
cur_dialog.set_value('allow_child_item_selection', 1)
}, 2000),
action(selections, args) {
if (args.filtered_children.length > 0 && selections.length > 0){
frappe
.call({
method: "make_quality_control_item_using_tas_po_items",
doc: frm.doc,
args: args.filtered_children,
})
.then(() => {
refresh_field("tas_po_name_1");
});
}
cur_dialog.hide();
}
});