Where to load custom CSS data

1

Hi

On a V15 server , I had the following client script code to create a BLUE button ..

        if (!frm.doc.__islocal && frm.doc.docstatus === 0) {        // if doc saved but not submitted
            
            frm.add_custom_button('Get Barcode', function() {       // add button
                frm.set_value('custom_po_barcode', frm.doc.name);   // set barcode field
                frm.refresh_field('custom_po_barcode');
            }).css("background-color", "#00bfff").css("color", "#ffffff");
        }

When using this code, the barcode field does not render as a barcode in print-preview mode, but as text.

Although on the deskview of the open PO doc, the barcode is in fact visible.

So this is a print-preview error.

When I change the code to auto-populate, like this …..

rappe.ui.form.on('Purchase Order', {
	refresh(frm) {
		// your code here
		if (!frm.doc.__islocal && frm.doc.docstatus === 0) {
		    if (!frm.doc.custom_po_barcode) {
		        frm.set_value('custom_po_barcode', frm.doc.name);
		        frm.refresh_field('custom_po_barcode');
		    }
		}
	}
});

Then the barcode renders properly in print-preview.

The deduction I have to make, is that the CSS directive in the add_custom_button code, interfered with the

rendering of the barcode in print-preview.

If I want to redo the add_custom_button code, then another way to do this would be…..

In a custom CSS file…..

.btn-get-barcode {
  background-color: #1e88e5;
  color: white;
}

And then the client script should change like this ….

frm.add_custom_button(__('Get Barcode'), () => {
  // logic
}).addClass('btn-get-barcode');

My question…

If I create a custom CSS file, how and where to I load it onto my server ?

2

You have to Add It In app_include_css in hooks.py File

3

Thank you @Hemil_Sangani for taking the time

So this means that, on Frappe Cloud I can only do this on a dedicated server because I would have to use SSH.

Even a private bench won’t give me SSH ?

Appreciate you taking the time.

4

For Frappe Cloud Private Bench (your case), you can load custom CSS without SSH using the Site Config method—no hooks.py editing needed.​

Quick Fix: Site Config (No SSH Required)

  1. Go to your ERPNext site → Settings (gear icon) → Site Config
  2. Add this JSON to the developer_settings object:

json

{
  "developer_settings": {
    "app_include_css": ["/assets/css/custom.css"]
  }
}
  1. Save → Clear Cache → Reload

Create CSS File (Local → Upload)

  1. Local: Create frappe-bench/sites/assets/css/custom.css:

css

.btn-get-barcode {
  background-color: #1e88e5 !important;
  color: white !important;
  border-color: #1e88e5 !important;
}
  1. Frappe Cloud: Use Files → Upload → drag custom.css to /assets/css/
  2. Verify path: /assets/css/custom.css

Client Script (Updated)

javascript

frappe.ui.form.on('Purchase Order', {
    refresh(frm) {
        if (!frm.doc.__islocal && frm.doc.docstatus === 0) {
            frm.add_custom_button(__('Get Barcode'), () => {
                frm.set_value('custom_po_barcode', frm.doc.name);
                frm.refresh_field('custom_po_barcode');
            }).addClass('btn-get-barcode');
        }
    }
});

Try this may be its works

1 Like
5

You’re a star @Hemil_Sangani !

Thank you for this comprehensive response.I shall work through it.

Thank you for taking the time. Appreciate it.

2 Likes
6

@trainingacademy

By the way you SSH into a private bench SSH Access

Dont forget to spead the FOSS love :heart:
Help others as you have been helped

1 Like