Display Custom HTML Block inside your document rather than workspace?

Frappe Framework
1
  1. create html field in your doctype schema with fieldname like (eg. custom_block_html) or any name you prefer.
  2. in the client script (your_doctype.js)
frappe.ui.form.on("Your DocType", {
    refresh(frm) {
        frappe.db.get_doc("Custom HTML Block", "your-block-name").then((block) => {
            let wrapper = frm.fields_dict["custom_block_html"].wrapper;
            wrapper.innerHTML = "";
            frappe.create_shadow_element(wrapper, block.html, block.style, block.script);
        });
    },
});

THAT’s ITTT

1 Like
2

I’m curious how this differs from:

frm.set_df_property(html_fieldname, "options", html_content)
3

the only difference is what we call “shadow dom” mechanism.
it is nothing but ISOLATION.

the set_df_property do nothing but inject html,
but frappe.create_shadow_element it creates separate isolated dom inside your dom hence it won’t break with any other style or js…etc

check these articles to have more clarity:

https://medium.com/front-end-weekly/understanding-shadow-dom-89277654badb

and check how the function work in: apps/frappe/frappe/public/js/frappe/dom.js
search for: frappe.create_shadow_element =

4

Hi @mohamed-ameer

Can you help us with a small tutorial (seperate post) as I think you are the right front-end expert for this: -

We need simple page numbers on print format (if possible but not fussy - we can put it in other places than the header/footer)

I see v16 onwards is moving away from wkhtmltopdf to chrome headless for printing.
I also see in letter head there is a JS script portion for header/footer
Not sure how weasyprint fits into all this

I had to install another app Frappe Betterprint just to be able to get a page number - to me that does not make sense. Am sure there is a shortcut somewhere which I have missed.

Can you pls help us in any way?

5

hi sir,
did you try to add it via html code instead?
that is the simplest approach because there was no other solution i found for it unfortunately.

and print format have already page_number field.

Screenshot 2026-08-04 at 11.38.46 AM
Screenshot 2026-08-04 at 11.38.46 AM1888Ă—704 7.32 KB

6

Thanks @mohamed-ameer for the quick reply

As soon as you tick custom (for html) the page number field dissappears

For now it seems this works for me in the css: -

@page {
    @bottom-center {
        content: "Page " counter(page) " of " counter(pages);
    }
color: red;
}
1 Like