Posting Code Snippet- item selection from popup for Order/order line

Frappe Framework Customization
1

Dear Friends
just to say thanks to the community for giving me a jump start. Here is the code snippet and a screenshot. When user selects a customer from the dropdown list, a popup dialog with items the customer order before, the user can select and populate a new order line. it is just a first shot at it, The dialog is created on the fly.

Please feel free to feedback on the code, any improvement, or any comments. All in all it will help newbies like me.

ScreenShot.png1226×450 21.8 KB

here is the basic code

// code starts here
frappe.ui.form.on(“Sales Order”, {
so_customer: function(frm,cdt,cdn) {
var Grid = function (data) {
this.ajax_data = data;
};
Grid.prototype = {
getHtml: function () {
var main_div = $(“

”).attr({id: “divProfile”});
var profile_table = $(“
”).attr({id: “tblProfile”});
profile_table.css({“width”:“100%”,“border”:“10px solid black”});
var profile_body = $(“”).attr({id: “bdyProfile”});

            var col_count = 2;
            var row_count = this.ajax_data.message.length;
            var tr = $("<tr></tr>").attr({class: "dataRowHeader"});
            $("<th></th>").attr({class: "dataRowHeader"}).html("").css({"padding":"1.0em"}).appendTo(tr);
            $("<th></th>").attr({class: "dataRowHeader"}).html("title 1").css({"padding-left":"1.0em", "text-align":"center"}).appendTo(tr);
            $("<th></th>").attr({class: "dataRowHeader"}).html("title 2").css({"padding-left":"1.0em", "text-align":"center"}).appendTo(tr);
            tr.appendTo(profile_body);

            for (var row = 0; row < row_count; row++) {

                var tr = $("<tr></tr>").attr({class: "dataRow"});

                var td = $("<td></td>").attr({class: "cbCell"});
                
                td.append($('<input>', {id: "checkbox_" + row, type: "checkbox", name: "checkbox"})).css({"padding-left":"1.0em"});
                tr.append(td);


                var cell = $("<td></td>").attr({id: "cell_0", class: "cell_data"});
                cell.append(document.createTextNode(this.ajax_data.message[row].{ADD YOUR DB FIELD NAME 1 HERE}));
                cell.css({"padding-left":"4.0em", "text-align":"center"});
                cell.appendTo(tr);

                var cell = $("<td></td>").attr({id: "cell_1", class: "cell_data"});
                cell.append(document.createTextNode(this.ajax_data.message[row].{ADD YOUR DB FIELD NAME 2 HERE}));
                cell.css({"padding-left":"0.5em", "text-align":"center"});
                cell.appendTo(tr);

                tr.appendTo(profile_body);
            }

            profile_body.appendTo(profile_table);
            return profile_table;
        }
    };

    function populate_order_line(data) {
        //delete all rows
        var idx = frm.get_field("order_line").grid.grid_rows.length;
        while (idx--) {
            frm.get_field("order_line").grid.grid_rows[idx].remove();
        }
        

        // populate rows then refresh
        $.each(data, function (i, elem) {
            var row = frm.add_child("order_line");
            row.{ADD YOUR FIELD NAME 1 HERE} = elem.{USE YOUR FIELD NAME 1 HERE};
            row.{ADD YOUR FIELD NAME 2 HERE} = elem.{USE YOUR FIELD NAME 2 HERE};
        })
        frm.refresh_field("order_line");
    }

    if (frm.doc.so_customer != "") {
        // ajax call
        frappe.call({
            type: "GET",
            method: "order.order.doctype.sales_order.sales_order.YOUR METHOD HERE",
            args: {"{YOUR CUST HERE}": frm.doc.so_customer},
            callback: function (data) {
                var profile_grid = new Grid(data);

                var dialog = new frappe.ui.Dialog({
                    title: __("Customer Profile"),
                    fields: [
                        {"fieldname": "profile_list", "fieldtype": "HTML"},
                        {"fieldname": "selection_button", "fieldtype": "Button", label: __("Confirm")}
                    ]
                });
                dialog.fields_dict.profile_list.$wrapper.html(profile_grid.getHtml().html());
                var divs = $("[data-fieldname=profile_list]");

                divs.css({"border":"1px solid lightgrey", "padding":"1.0em"});
                $(".dataRow").hover(function(){$(this).css({"background-color":"#eff1f2"})},function(){$(this).css({"background-color":"white"})});

                dialog.get_close_btn().remove();
                dialog.show();

                // handle onclick event here
                $(dialog.fields_dict.selection_button.input).click(function () {
                    var data = [];                        
                    var cells_data = $("input[name='checkbox']:checked").parent().siblings("td");

                    $("input[name='checkbox']:checked").each(function () {
                        var row = $(this).closest("tr");
                        data.push({
                            "{USE YOUR FIELD NAME 1 HERE}": $(row).find("#cell_0").text(),
                            "{USE YOUR FIELD NAME 2 HERE}": $(row).find("#cell_1").text()
                        });
                        $("input[name='checkbox']:checked").prop("checked",false);
                    })

                    dialog.hide();
                    frm.refresh_field("order_line");
                    populate_order_line(data);

                    console.log(data);
                });
            }
        });
    }        
},
2

Instead of pop up, it can be a button below Customer selection which says, “Select from previous orders”. May be not everyone wants to see the pop up every time. Just a suggestion.

3

Many thanks for the suggestion, I appreciate your feedback, Yes this the ERPNext way, the pop up is user request unfortunately.

4

@CoffeeHolic thanks for sharing this

seemed the codes not formatted correctly…just put all codes lines under frappe.ui.form.on("Sales Order", ....? under Custom Script?

Thanks