UI for creating invoices

Question

Currently, I'm in the process of making a custom solution for invoicing. I have created multiple ways for customers to create their template (HTML, Word, LaTex) and get invoices according to their template. However, these invoices are party manually generated.

So, the process is:

• Request to create a new invoice
• An preliminary invoice is created
• The user gets a chance to make changes (i.e. add, remove, change rows)
• Create a pdf

Just to be clear, the preliminary invoice does not need to be formatted as the template is, but you should be able to add/remove/change rows and for every cell, indicate whether the value should be visible in the final result.

My problem is that i cannot find a suitable way to display the preliminary invoices. I tried a datagrid (default, telerik, devexpress), but it's too messy. Besides a datagrid, i have no idea what i can use.

What controls can i use best to have a nice and usable UI.

Answer 1

What is your platform? Winforms? WPF?

What exactly did you dislike about using a datagrid for this? Part of the problem is that whether you like it or not, you're going to be coding a datagrid - you essentially described features of one. If at all possible try to use someone else's datagrid because it will save you a lot of work. Typically, 3rd party datagrids should be fairly customizable, and you should be able to make it look however you want - and take advantage of the built in sorting, editing, grouping, etc. Creating a datagrid-like control from scratch isn't easy and should be avoided if possible.

You don't have to have a plain giant datagrid - you can crate a custom control that displays the invoice formatted however you like, with a live datagrid appearing only where the invoice shows tabular data, formatted to appear as an integral part of the invoice itself.

Answer 2

I'm doing something similar, where the client can edit or even remove the line items for the invoice prior to sending it to the client.

The current app they run their business on is a WebForms Intranet application, so this is an extension to that. So they can add/remove/edit rows fairly easily.

But Egor is right. You're essentially talking about a datagrid no matter what you do. I take it you want something 'cleaner' and more intuitive?

Simplicity is difficult.

Answer 3

I would take a look at what is already out there, especially for invoices, and see how they are doing it.

Not sure how big your company is, but it never hurts to take advantage of the large company applications and user interfaces, the pour thousands/millions of dollars into user interface design and testing.

I would take a look at any of the following (most offer a free trial, or just try searching for screenshots):

• www.freshbooks.com
• www.invoicera.com
• www.getcashboard.com
• www.simplifythis.com

Just some ideas ... hope this helps!

Answer 4

You can create a web UI too, with jQuery and jQuery UI.

Answer 5

A typical UI paradigm for this kind of thing is to view it as two separate problems: giving the user a way of viewing the elements that he can modify, and giving him the ability to modify any specific element. You use a list control (ListBox, ListView, maybe TreeView if the elements are organized hierarchically or need to be grouped into categories) to present the elements, and then when the user selects an element the program presents a tabular presentation of field names and editable value controls.

Basically, you're dividing the program's functionality into two categories: stuff that the user wants to do to rows (add, remove, re-order, select) and stuff that the user wants to do to the selected row's elements.

You can mush these two sets of functionality into one if you use a DataGridView, but as you've seen that gets pretty ugly if there's any complexity to the elements you're editing.

Two possible approaches to this: the property-sheet paradigm (select object, right-click, select "Properties", edit values in a modal dialog), or a paradigm where the window's split into two panels, with one being the rows and the other being the details of the currently selected row. There are lots of others.