Invoice Designer improvements, feedback requested!

Hey guys,

We are in the planning process to give our invoice designer an overhaul.

Before we get started, we’d like to get some feedback on the features you would like to see in the next version of the designer.

We can’t promise that we will integrate everything, but we certainly want to hear your pain points, and what you would like to see in the next iteration of the invoice designer.

5 Likes

I would love some kind of WYSIWYG editor. Absolutely NO other invoicing or accounting program has this so it may not be possible, but if it was this would put you way ahead!

One of my biggest problems is positioning. I always struggle with the css (or sometimes in-line html) to get the positioning perfect.

Some easier ways to move sections and easier logo control (positioning and size) would also be my suggestions.

4 Likes

Hi @david

When I look back to InvoiceNinja 4.x there was the designer made with pdfmake. The recent v5 Designer is easier to use, as it use plain html and css…

Ideas for a further evolved Designer:

  1. More flexibility

    • e.g. additional fonts
    • e.g. set/unset Header and/or Footer (1st page Header yes, Footer no; following pages different Header yes, Footer no; last page Header no, QR-Bill instead of Footer; and so on)
    • e.g. turn on/off $fields in blocks directly in the Designer
    • e.g. building/changing blocks (#client-details, #entity-details, …) directly in the Designer
  2. Drag and Drop Template Builder

    • e.g. GrapesJS, PHPagebuilder, Trumbowyg
    • I know, Drag and Drop Builder is not easy to implement in a user-friendly way, but in my opinion this could be another Killer-Feature for InvoiceNinja
  3. Page Handling

    • e.g. set page-breaks in an easy way like CKEditor does
    • e.g. define separate pages with special content blocks like Terms, Working Report or QR-Bill and possibility to mix and match blocks on those pages

Thx for your work and the great support with answers in no time…

2 Likes

Hi @david

Referring to my previous post, I have additional idea

  1. Using Word as “Template Engine”

Hi @david

I found something about this idea…

It looks like there is a existing solution for laravel…
pdf-Engine

Hi ! (sorry for my English, I’m French)
The new version is ok, BUT the only request I would give is the ability to change the look of our invoice like we could do with the last version of Invoice Ninja…
My logo is half blue, half white, and the white part is invisible on the Basic style of the invoices… I used to take the bold style to change the look of my invoices so that my logo could be entirely visible (the Bold look was very beautiful by the way).
Now we can’t change the version of our invoices… It’s White Basic and nothing else :frowning: So I have to change the colors of my logo now… And I’m not very happy with that… Sorry.
I hope some improvements will be brought concerning that point.

I also want to thank you for the creation of Invoice Ninja in general.
This website is really helpful.
Have good day. Bye !

1 Like

Wishlist:

Backgrounds (Really missing this feature from V4)

  • Add back background images w/ transparency setting
  • If not background images, allow for background gradients at different opacities

Invoice Components

  • Forced sizing or weighted sizing of columns (I believe right now its only auto adjust, so I can’t tell the designer to give X amount of space for item description)
  • Different font sizing for different columns (I load my descriptions, and they can really extend invoice size)
  • A way to adjust pre-created blocs like invoice “entity-details” (For instance, I want to bold “balance due” and there’s no easy way to target just that one item)

Editor

  • If the editor was smart enough to decipher the $ elements called in and provide a breakdown of font type, font size, font colors, background color, opacity, etc for each that would automatically adjust the code. (As someone who used to code, but now mostly does WYSIWYG web building - I can tend to get a little lost.)

Font

  • Not sure if there’s a current method for this, but I’d love to be able to bring in my own Web Font or Google Font.

Not invoice designer related, but want to note

  • Looking forward to some sort of support for 3x column multiples, and hope this internal redesign keeps that in mind!
1 Like

One of the reasons I haven 100% switched to Invoice Ninja (or any other billing software for that fact) is that I can’t have control 100% of the design of my invoices and quotes. I have to have the control on how my brand looks on ALL my documents and that includes my invoices.

What am I using? Peachtree Complete Accounting 2009 (yes it continues to work up to date). It’s the only software that gives me FULL control of the design of my documents.

I’m going to share some screenshots on how they do it, and you can take a look to see if you can adjust to IN editor.

This is how it looks when you want to edit any of the reports/documents you have available. You have a list of defaults and you can clone it and customize your own (you can also start from scratch:

You can add an image, text, shape, line, table. Everything can be customized… order, font, size, color, placement on the page, etc.







Rudimentary? Yes. Does it work? You bet. NOBODY has the design I have for my invoices and I have modernized them as the time goes by. I tried to make my invoices in IN as similar as possible but not having FULL control of the table columns sizes, for example, makes it impossible. That’s why I always upload my own PDF with every invoice.

I know people don’t care, but I do. I’ve been complimented many times for it, so I know my customers DO notice. I also have a Spanish version for my non-English speakers.

I thought maybe for IN you could upload a PDF that can be used as background, instead of designing everything in the editor, and use the editor only for placement of the data (I really don’t know if that’s possible). Actually I don’t know if anything of this is possible in coding but I’m just pitching ideas. I do agree with most of the other posters ideas, I just don’t think it should be a “drag and drop” editor, since that will be very very complicated and can mess up the rest of the coding (but I’m not a programmer so I don’t know).

I can help with some designs for new templates because in my opinion the ones available need a little love <<whispering: update>>.

I WOULD LOVE to have at least:

  • my own font and/or Google fonts;
  • control over column sizes;
  • have thee ability to insert shapes, graphics, background images, etc. and add transparency to those as well.

PS: Sorry if I fill up the post with “too many screenshots” feel free to remove if you think it’s not helpful.

2 Likes

Drag and drop editing/arrangement would be handy, with the ability to enter/edit HTML of course.

It would be good to have a place for adding custom CSS for the designs that is separate from the core design CSS so that the core design CSS can be updated without affecting the custom CSS. Similar to the way a WordPress child theme allows custom CSS to be added that’s independent of the parent theme.

@josh

When a custom design is implemented, a snapshot of the base design is used.

We never update the custom design after this point so that we don’t make any of these types of changes.

Yeah it’s a bit of a double edged sword as you don’t want a base design update to affect a custom design if someone already has it exactly how they want it, but if you don’t then you can run into the situation that I encountered where the css from the older snapshot of the base design has incompatibilities.