Printing an UCommerce Invoice from the Back-office

Ever printed an UCommerce Invoice off the Umbraco (v 7.5.10) back-office?
Well if you have, this is what you get:

A jumbled-up version of an invoice

How do you go about getting a property formatted version with minimal changes?

Create a Umbraco plug-in and add the following files in App_Plugins/PrettyPrint folder. This tutorial on creating a property editor is a good start.

Add a Umbraco PrettyPrint plug-in

The package.manifest file:

{
  "css": [
    "~/App_Plugins/PrettyPrint/print.css"
  ]
}

The print.css file:

@media print {
    div#leftcolumn {
        display: none;
    }
}

The Pretty-print version

---

This article was originally written on Google's Blogger platform and ported to Hashnode on 17 Sep 2022.