Page when acessed from Workspace is coming blank

Hello,

In my Custom App I have created a few Pages.

I have created Link to these Pages in the Workspace of my Custom App.

When a user click on a link to access the page it always comes up blank. Then user has to either refresh the page manually or has to issue Reload from the top right menu to get data to show up.

Why is this happening and How to solve it?

TIA

Yogi Yang

Hello,

This is the code that I have placed in the file.

frappe.pages['purchase-receipt-vu'].on_page_load = function(wrapper) {
	var page = frappe.ui.make_app_page({
		parent: wrapper,
		title: 'Purchase Receitp View',
		single_column: true
	});

    //Code to Add Field to Page
    let MyField = page.add_field({
        label: 'QC Status',
        fieldtype: 'Select',
        fieldname: 'qc_status',
        options:[
            '',
            'All',
            'QC Pending',
            'QC Passed'
        ],
        change(){
            //frappe.msgprint(MyField.get_value());
            if(MyField.get_value() === 'All'){
                //Load all data
                datatable.freeze
                data = []
                frappe.call({
                    method: "mymfg.api.get_purchase_receipt_view_all"
                }).done((r) => {
                    console.log(r)
                    console.log(r.message)
                    let data = []
                    datatable.freeze
                    $.each(r.message, function(_i, e){
                        let rr = {
                            'Date':e.posting_date, 
                            'Supplier Name':e.supplier_name, 
                            'PO':e.purchase_order,
                            'Item Name':e.item_name,
                            'Received Qty':e.received_qty,
                            'Reject Qty':e.rejected_qty,
                            'Batch #':e.batch_no,
                            'Coil Heat #':e.coil_heat_no,
                            'Coil Qty':e.coil_qty,
                            'Coil Wt.':e.coil_wt,
                            'QC':e.quality_inspection,
                            'Action Button':e.name2
                        }
                        data.push(rr)
                    })
                    //let data = r.map(Object.values)
                    datatable.refresh(data, columns)
                })
            }
            if(MyField.get_value() === 'QC Pending'){
                //Load all PR Pending QC
                datatable.freeze
                data = []
                frappe.call({
                    method: "mymfg.api.get_purchase_receipt_view_qc_pending"
                }).done((r) => {
                    console.log(r)
                    console.log(r.message)
                    let data = []
                    datatable.freeze
                    $.each(r.message, function(_i, e){
                        let rr = {
                            'Date':e.posting_date, 
                            'Supplier Name':e.supplier_name, 
                            'PO':e.purchase_order,
                            'Item Name':e.item_name,
                            'Received Qty':e.received_qty,
                            'Reject Qty':e.rejected_qty,
                            'Batch #':e.batch_no,
                            'Coil Heat #':e.coil_heat_no,
                            'Coil Qty':e.coil_qty,
                            'Coil Wt.':e.coil_wt,
                            'QC':e.quality_inspection,
                            'Action Button':e.name2
                        }
                        data.push(rr)
                    })
                    //let data = r.map(Object.values)
                    datatable.refresh(data, columns)
                })
            }
            if(MyField.get_value() === 'QC Passed'){
                //Load all PR Passed QC
                datatable.freeze
                data = []
                frappe.call({
                    method: "mymfg.api.get_purchase_receipt_view_qc_pass"
                }).done((r) => {
                    console.log(r)
                    console.log(r.message)
                    let data = []
                    datatable.freeze
                    $.each(r.message, function(_i, e){
                        let rr = {
                            'Date':e.posting_date, 
                            'Supplier Name':e.supplier_name, 
                            'PO':e.purchase_order,
                            'Item Name':e.item_name,
                            'Received Qty':e.received_qty,
                            'Reject Qty':e.rejected_qty,
                            'Batch #':e.batch_no,
                            'Coil Heat #':e.coil_heat_no,
                            'Coil Qty':e.coil_qty,
                            'Coil Wt.':e.coil_wt,
                            'QC':e.quality_inspection,
                            'Action Button':e.name2
                        }
                        data.push(rr)
                    })
                    //let data = r.map(Object.values)
                    datatable.refresh(data, columns)
                })
            }
        }
    });
   
    //Append a Div
    $("<div class='datatable'></div>").appendTo('.layout-main-section');
        
    //--set up our empty datatable
	// let el = document.querySelector('.layout-main-section')
    let el = document.querySelector('.datatable');

	//let button_formatter = (value) => `<button onclick="alert('This is ${value})">Action!</button>`;
    let button_formatter = (value) => `<button onclick="btn_view('${value}')">Action!</button>`
    
	let columns = [
        {name:'Date', editable:false, focusable:false},
            {name:'Supplier Name', editable:false, focusable:false},
            {name:'PO', editable:false, focusable:false},
            {name:'Item Name', editable:false, focusable:false},
            {name:'Received Qty', editable:false, focusable:false},
            {name:'Reject Qty', editable:false, focusable:false},
            {name:'Batch #', editable:false, focusable:false},
            {name:'Coil Heat #', editable:false, focusable:false},
            {name:'Coil Qty', editable:false, focusable:false},
            {name:'Coil Wt.', editable:false, focusable:false},
            {name:'QC', editable:false, focusable:false},
            {name: "Action Button", focusable: false, format: button_formatter}
        ]
	let datatable = new frappe.DataTable(el, { columns: columns, data: [], layout: "fluid", inlineFilters: "true", serialNoColumn: "false" });

	//use regular ajax api methods to fetch document data, then refresh
    frappe.call({
        method: "mymfg.api.get_purchase_receipt_view_all"
    }).done((r) => {
        console.log(r)
        console.log(r.message)
        let data = []
        datatable.freeze
        $.each(r.message, function(_i, e){
            let rr = {
                'Date':e.posting_date, 
                'Supplier Name':e.supplier_name, 
                'PO':e.purchase_order,
                'Item Name':e.item_name,
                'Received Qty':e.received_qty,
                'Reject Qty':e.rejected_qty,
                'Batch #':e.batch_no,
                'Coil Heat #':e.coil_heat_no,
                'Coil Qty':e.coil_qty,
                'Coil Wt.':e.coil_wt,
                'QC':e.quality_inspection,
                'Action Button':e.name2
            }
            data.push(rr)
        })
        //let data = r.map(Object.values)
        datatable.refresh(data, columns)
    })
}

function btn_view(MyVal){
    //Code to show dialog to update 
}

Why is the page when loaded for the first time comes up empty.

What mistake am I making here?

TIA

Yogi Yang