InvoiceFactory

InvoiceFactory

Released 4 years ago , Last update 4 years ago

Add the ability to create HTML based Invoices to any system using only client side JavaScript.

What is it?

An easy to use Invoice generator that only needs a browser and JavaScript to operate. Local storage can be used to persist the invoice on the client side, or events and remote storage to save the invoice on a server.

Features

  • Customizable HTML using Bootstrap or your own CSS
  • Invoice Line editor
  • Fully event driven
  • Dynamic Properties with a full API
  • Standalone with local or remote storage

Dependencies

  • jQuery
  • Bootstrap

Pricing

14 day 14-day money-back guarantee

$9.99

Hosted License

  • Perpetual license

  • 1 site, unlimited servers

  • No distribution (hosted use only)

  • Commercial use

  • 6 months support

Need custom services for this product? Get a quote

Documentation

Theming

The invoice uses the web\assets\templates\invoice.js.html as it's default template. It contains three template elements to define the invoice, invoice line and line form. These can be modified in the file itself, or a new template file created and then passed to the InvoiceFactory init method:

invoice = invoiceFactory.init({ templatePath: './assets/templates/newTemplate.js.html' }).generate();

Editing

Online editing of the various properties can easily be achieved in two steps.

Firstly, uncomment (or add) the following JavaScript:

$('[data-set]').on('change', function(evt) {
    var property = $(this).data('set').replace(/^invoice-/g, '');
    invoice[property] = $(this).val();
});

Secondly, add form elements with data-set attributes that start with invoice- and is followed by the invoice property you want to make editable. These form elements can be anywhere in the HTML.

As an example, if you want to make the description editable, add this input:

<input data-set="invoice-description" type="text">

Events

Events are fired everytime the property of an Invoice object is changed. This can be used to add custom functionality to the invoice. The event is fired on the invoice element, typically $('#online-invoice'). Each event is prefaced with 'invoice-', followed by the property name. The new value of the property is passed down as a second parameter to the event handler.

As an example:

$('#online-invoice').on('invoice-to', function(evt, newValue) {
    alert("We're now sending the invoice to " + newValue);
});

Objects

InvoiceFactory

Properties

  • templatePath

Methods

  • init(settings)
  • generate(values)
  • load(identifier)
  • save(identifier, invoice)
  • getTemplatePath()
  • setTemplatePath(templatePath)

Invoice

Properties

  • to
  • from
  • contact
  • description
  • date
  • dueDate
  • lines

Readonly Properties

  • currency
  • taxation
  • total
  • tax

Methods

  • render()
  • renderForm()
  • renderLines()
  • setLines()
  • addLine()
  • getLine(number)

  • getTo()

  • setTo(to)
  • getFrom()
  • setFrom(from)
  • getContact()
  • setContact(contact)
  • getDescription()
  • setDescription(description)
  • getDate()
  • setDate(date)
  • getDueDate()
  • setDueDate(dueDate)
  • getLines()
  • setLines(lines)

  • getCurrency()

  • getTaxation()
  • getTotal()
  • getTax()

InvoiceLine

Properties

  • invoice
  • description
  • quantity
  • linePrice

Readonly Properties

  • amount
  • number
  • currency

Methods

  • getInvoice()
  • setInvoice(invoice)
  • getDescription()
  • setDescription(description)
  • getQuantity()
  • setQuantity(quantity)
  • getLinePrice()
  • setLinePrice(linePrice)

  • getAmount()

  • getNumber()
  • getCurrency()

Setup / installation

Ensure that you include botth jQuery and the InvoiceFactory libraries in your html:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="./assets/js/invoice-factory.js"></script>

Add the holder element for the invoice where you want it to appear in your HTML:

<div id="online-invoice"></div>

Initialize the factory, and generate an invoice:

factory = invoiceFactory.init();
invoice = factory.generate({"currency": "$"});

Example usage

Basic Usage

<script src="../src/templating.js"></script>
<script src="../src/invoice.js"></script>
<script>
$(document).ready(function() {
    values = {
        taxRate: 0.14
    }
    invoice = invoiceFactory.init().generate(values);
})
</script>
2 licenses, starting from From » $9.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

or Get a quote

for customization or integration services


Or enter your name and Email
  • UK Ugur Kirbac 2 years ago
    Is there any demo where I can see how it looks at least?
  • T test 2 years ago
    test