V5 Feature Request :: Invoice Design: include more clear documentation in docs/custom-fields/

1

While working on customizing templates in v5, it appears as though documentation is not clear about the fields that are being used within the “Body” design tab within the HTML template.

For example, here is an excerpt from an existing invoice design “Body” contents:

<div id="body">
    <div class="header-container">
        <img src="$company.logo" class="company-logo" alt="$company.name logo">

        <div id="company-details"></div>
        <div id="company-address"></div>
    </div>

...

</div>

Please notice how some IDs appear to be used such as company-details and company-address that have a side effect of populating actual data into these regions aside from actually applying CSS styling. These are clearly populated in the invoice preview to the right, but I’m not finding what fields exist that can be used programmatically in the html that will be replaced within the documentation referenced here:
https://invoiceninja.github.io/docs/custom-fields/

I’m thinking that perhaps it’s correlating to the $company.details variable and extrapolates this via company-details, but this doesn’t seem to be documented anywhere (neither does it explicitly tell us that $company.details exists in either the documentation nor the sample fields below in the settings tab) and so I’m figuring that this is simply an oversight in documentation at this point…

2

@ylluminate

Yes this is a bit of a black box, I’ll try and explain as best I can.

To allow some customization in the UI we allow users to drag and drop the order of each individual field, ie company-details you can add and remove properties and also reorder them. The default list for each of these properties is listed below:

$variables = [
            'client_details' => [
                '$client.name',
                '$client.number',
                '$client.vat_number',
                '$client.address1',
                '$client.address2',
                '$client.city_state_postal',
                '$client.country',
                '$client.phone',
                '$contact.email',
            ],
            'company_details' => [
                '$company.name',
                '$company.id_number',
                '$company.vat_number',
                '$company.website',
                '$company.email',
                '$company.phone',
            ],
            'company_address' => [
                '$company.address1',
                '$company.address2',
                '$company.city_state_postal',
                '$company.country',
            ],
            'invoice_details' => [
                '$invoice.number',
                '$invoice.po_number',
                '$invoice.date',
                '$invoice.due_date',
                '$invoice.total',
                '$invoice.balance_due',
            ],
            'quote_details' => [
                '$quote.number',
                '$quote.po_number',
                '$quote.date',
                '$quote.valid_until',
                '$quote.total',
            ],
            'credit_details' => [
                '$credit.number',
                '$credit.po_number',
                '$credit.date',
                '$credit.balance',
                '$credit.total',
            ],
            'product_columns' => [
                '$product.item',
                '$product.description',
                '$product.unit_cost',
                '$product.quantity',
                '$product.discount',
                '$product.tax',
                '$product.line_total',
            ],
            'task_columns' =>[
                '$task.service',
                '$task.description',
                '$task.rate',
                '$task.hours',
                '$task.discount',
                '$task.tax',
                '$task.line_total',
            ],
            'total_columns' => [
                '$subtotal',
                '$discount',
                '$custom_surcharge1',
                '$custom_surcharge2',
                '$custom_surcharge3',
                '$custom_surcharge4',
                '$total_taxes',
                '$line_taxes',
                '$paid_to_date',
                '$total',
            ],
        ];

Note you can remove all of our default properties and insert whichever individual properties you like anywhere in the invoice design. The only thing that cannot be fully customised is the product table itself as we execute that at a completely different level.

1 Like
3

Interesting, I completely missed that there was another set of fields and that those correlated with the IDs and that not only the order can be customized therein, but that also the individual variables (fields/attributes) can be altogether removed:

2143×737 138 KB

Thanks for indicating that these exist!