You wanted this, we wanted this, so here it is. The document custom fields give you the flexibility to include additional data to the document besides the data that Invoicebus supports by default.  For example, this feature allows you adding various custom fields such as: project description, tax details, client contact details, shipping info, etc, and displaying them anywhere you need throughout the document.

Adding a custom field to your invoice is easy. All you need to do is:

1. Define a custom field in the invoice editor
2. Apply the custom field to the HTML invoice template

1. Defining custom fields in the invoice editor

To make it even more flexible, we separated the document data from the client data, thus when you add a client to a specific invoice, all custom fields associated with the client will be applied to the invoice as well. Now let’s see how to add your first custom field.

Adding custom fields to the documents

The document custom fields should first be added within the invoice editor (see section “Document Custom Fields”). In the left column enter the field name (this is a unique identifier which will later be used as a placeholder in yout html template), and in the right column enter the field value.

You can notice the middle column with the values “Constant” or “Variable”. So what this means? If you choose “Constant”, the value of the custom field will be saved for future re-use. That way when you create a new invoice this value will be pre-populated automatically. In the image above, the tax number is considered to be permanent for all future invoices, thus it is set to “Constant”.

And if you choose “Variable”, the value won’t be saved so when you create a new invoice the value field will be left empty (you should manually populate it). In the previous example, the project name and the project description are considered to be invoice specific, thus they are set to “Variable”.

Adding custom fields for the clients

Adding a custom fields for the client is almost identical. All you need to do is click the “Manage Client Custom Fields” link within the client section.

A new window will pop up where you can add client custom fields:

The values entered in the client custom fields will be always saved for future re-use, so there’s no need of specifying “Constant” or “Variable”. In the example above, you can see we’ve specified the client’s shipping address.

2. Applying custom fields to the HTML invoice template

So you’ve added your custom fields, and now you should tell Invoicebus where you would like this information to be displayed in your final document. For this, you’ll need to edit your HTML invoice template. The easiest way to do this is to:

• download your current invoice template (within the template window click download template),
• extract it from the archive,
• edit the template.html file with any text editor,
• add your custom fields to the HTML template as described below,
• zip the modified template and re-upload it again to Invoicebus.

Adding custom fields to the HTML template

Probably you’ve noticed that the names of the custom fields are in the form {document_custom_[name]} and {client_custom_[name]}. So these are the actual placeholders you should use in your HTML template, where [name] is your custom name for the placeholder. You can find more info on how to edit or create your own invoice template here.

From our previous example, the custom fields define the following placeholders:

• {document_custom_project_name}
• {document_custom_project_desc}
• {document_custom_tax_number}

And the custom client placeholder:

• {client_custom_shipping_address}

In the final invoice, these placeholders will be replaced with actual values you enter in the invoice editor.

And don’t forget! If you need any help with the template customization you can always contact our support.

What’s on tap for our next update?

We think it would be great if you’d be able to use any invoice field (including custom ones) as a placeholder in your default email templates + your default terms & notes. Currently, the terms & notes section doesn’t support placeholders while the email/reminder/thank-you templates support only pre-defined placeholders such as {client_name}, {doc_number}, {total_price}, {paid_sum}, etc.

By giving you the flexibility to use any placeholder, you can easily create more specific terms & notes and write even more personal emails (for example, you can add a contact person and then address him by his first name only).

We haven’t officially started developing this feature as we first wanted to hear what you think about it. Feel free to leave your thoughts in the comments below. We’d love to hear from you!

Author information

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

| Twitter | Facebook | Google+ |

The post How to use custom fields in your invoices appeared first on Garage.

The idea for custom invoice templates in Invoicebus was on our minds even from the early days. We wanted to make Invoicebus in a way that everyone will be able to customize their invoice design and layout as they want without any limitations. Most of the time we took mental notes on how we would like such invoice templates to work but we didn’t feel comfortable to start with the realization. We knew something was missing so we let the idea distill itself and after the summer last year we finally started coding and iterating through different concepts.

We wanted the invoice templates to follow two major things:

1. To be easily imported and used in Invoicebus without modifications
2. To be used standalone without any dependency from Invoicebus

Few months ago we silently launched this in beta as we were still fine tuning the details. Now we believe it’s time to announce its official launch.

Custom Templates

Without hesitation we knew the templates should be made with HTML and CSS. That way they can be used in Invoicebus without converting from one format to another. We finally put to realization our collected notes and made our invoice templates framework. Some rules were also set to make sure the templates are compatible with the new version of Invoicebus.

However, one of the most interesting parts was making the templates work standalone. It’s easy to imagine Word or Excel invoice templates working standalone, well not really standalone as MS Office is still required, but who doesn’t have one right? But to make working HTML/CSS template we had to somehow make it dynamic and usable on the fly. That’s when we decided to make the HTML Invoice Generator. This is a simple script that can be included at the bottom of an HTML invoice template, and it’ll transform it to fully functional invoice editor with the following features:

• Ready to fill out and print on the fly.
• Can be easily customized with your own logo and colors.
• Support any language and currency.
• Support multiple taxes.
• Auto calculate subtotals, totals, taxes, and discounts.
• Configurable columns, date format, and symbol position (left/right).
• Manipulate rows with simple drag and drop.
• Run directly in a browser on your local computer (PC, Mac, Linux).
• No setup or additional software needed.
• Hassle-free integration with Invoicebus.

We’ve never really liked Word/Excel invoice templates as they’re pretty hard to work with. The layout can get messed-up easily and the calculations are hard to tweak with all that item rows and totals. We’re pleased we can offer something new, something fresh in the invoice templates world. Actually we got so excited that we made a decision to open the technology for the invoice generator. If you’re tech savvy and know your way with web technologies you can grab the code yourself at GitHub and tweak it to your needs. We even prepared a guide you can follow if you want to create your own invoice template. If you decide to use the script as is, no more than basic HTML & CSS knowledge is required to create your own invoice template.

The best thing about the templates is their seamless integration with Invoicebus. You can pack your custom template in a zip file and upload it to Invoicebus, or even simpler – we embedded “Save” button that will do all the heavy-lifting for you (described at the end of the post). It’s great to know that not only your online invoices, but also the PDFs you generate will have the new invoice design you applied.

Interactive example

Here’s a live example of an invoice template you can play with:

Note: this is a scaled-down version for demonstration purposed only and it lacks some of the actual features. The real templates are with bigger size and are more usable.

Templates Store

We made the template framework and the invoice generator, but we didn’t want to leave our users hanging in that state. No matter how simple and straightforward everything might seem, designing a template can be a burden and time consuming task for many people. That’s why beside the 6 basic templates already included in the bus we decided to include another 4 premium templates, all ready to use*.

The icing of the cake is our newly launched Template Store, where you can browse over a dozen creative designs and choose the one closer to your brand and colors. There you can find different styles of templates – generic, corporate, retro, handwritten, etc., that will amplify your professionalism when presented to your clients.

Cool thing is that you can use this invoice templates independent of Invoicebus. They are standalone and autonomous so you don’t need an Invoicebus account to create invoices with them. However, because they’re HTML/CSS based there’s no easy way to save the invoice locally on your computer. That’s why we added “Save” button that saves the invoice data and the template to Invoicebus with a single click. Of course this is completely optional and you can always print or save the invoices to PDF (with Google Chrome) for future reference.

So go ahead and check out the amazing templates we have in the store.

* Custom and premium invoice templates in Invoicebus are available for Single-decker and Double-decker subscription plans.

Author information

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

| Twitter | Facebook | Google+ |

The post Custom invoice templates have arrived appeared first on Garage.