Invoice Design - Edit sections

Java-Jim · January 4, 2021, 2:14pm

Hi there,

i want to customise my invoice design to match my latest design from Lexware. Based on DIN5008 Normbrief…
So i understood, that i can customize the appearance of the sections by css or putting the sections to other locations.
But the html layout of the sections themself (id=“company-details”, id=“company-address”, id=“product-table” …) is not editable from the front end.
Where are these ids defined? Probably if i would change then, they would be applied to all orginizations?
If i would customize the html of this ids, would they be update resistent or would my work always be overwritten?
Is there further info to find on this toppic?
The code editor of the invoice designer has the problem, that the mouse pointer does not set the cursor to the clicked position. It is positioned to or more line above. If i select text, text from another positionen gets selected. Not usable, i have to backspace to see where text dissapears.

Java-Jim · January 4, 2021, 10:25pm

Ok the sections are functions defined in ./app/Services/PdfMaker/Design.php
I defined a new function returnAdress() which delivers a section which i bound to the content by <div id="return-address"></div>

These functions are the dataproviders which are used in all design templates, so if i make changes, it has effect in all templates and all organizations. As all my companies use a german letter layout, this is acceptable.
Furthermore probably a git pull overwrites the changes or prints an error about local changes.

As i am a software developer, i had no problem in understanding the method of operation, but php is not a language i am used to. Maybe i call a php-developer for help.

If there are some tips like building own design templates, that would be interessting. Saw the examples in ./tests/Feature/PdfMaker/ but had no idea how to implement a new design to the existing installation…

The design code editor acts strange to mouse/keyboard inputs!

ben · January 4, 2021, 10:26pm

Hey there

At the moment IDs are hardcoded, you can find a list of them here:

github.com

invoiceninja/invoiceninja/blob/v5-develop/app/Services/PdfMaker/Design.php#L89



public function elements(array $context, string $type = 'product'): array
{
    $this->context = $context;

    $this->type = $type;

    $this->setup();

    return [
        'company-details' => [
            'id' => 'company-details',
            'elements' => $this->companyDetails(),
        ],
        'company-address' => [
            'id' => 'company-address',
            'elements' => $this->companyAddress(),
        ],
        'client-details' => [
            'id' => 'client-details',
            'elements' => $this->clientDetails(),

Can you post an example of your customization, maybe it doesn’t need a total major change to get what you want?

ben · January 4, 2021, 10:30pm

All right, I see your example.

Can I know what’s example value of #return-address div?

Java-Jim · January 4, 2021, 10:47pm

I will upload an example invoice later. The bold template is a good starting point.
The address field needs in first line the return address in one small line.
The client-details in the addressfield should not list vat id or account nr.
The product-table should list product and note in one wider column, as texts are mostly longer.
Product in first line bold and notes in normal below.
Company info, ceo, vat id, tax id, register court, bank account info in four blocks on the footer of the first page. Could also be an footer-image
So nothing special, but some tweeks needed.

As in Germany every aspect of making moneys is heavily overregulated by law a tax compliant template could expand your possibilities for german users.

Java-Jim · January 4, 2021, 10:51pm

company name, street, house number, zip, city
Client company name
salutation
contact name
street, number

zip, location

Java-Jim · January 4, 2021, 10:54pm

first line is the return address.
Normaly invoices are folded two times and put in evelopes with a adress viewing window.
The return address is 5,5cm from the top, that the address is seen through this window. DIN5008

ben · January 5, 2021, 10:10am

Okay, so, here’s my question.

Can’t you edit of one of the stock templates and add #return-address. Inside it, just put your details? As far as I know, all variables are available to you, so you should be able to do something like:

<div id="return-address">
    <p>$company.name</p>
</div>

At the moment, we don’t have a list of all variables (we’re working on docs), but you can find them here:

github.com

invoiceninja/invoiceninja/blob/v5-develop/app/Utils/HtmlEngine.php#L271


$data['$contact.name'] = ['value' => isset($this->contact) ? $this->contact->present()->name() : 'no contact name on record', 'label' => ctrans('texts.contact_name')];
$data['$contact.first_name'] = ['value' => isset($this->contact) ? $this->contact->first_name : '', 'label' => ctrans('texts.first_name')];
$data['$contact.last_name'] = ['value' => isset($this->contact) ? $this->contact->last_name : '', 'label' => ctrans('texts.last_name')];


$data['$contact.custom1'] = ['value' => isset($this->contact) ? $this->contact->custom_value1 : '&nbsp;', 'label' => $this->helpers->makeCustomField($this->company->custom_fields, 'contact1')];
$data['$contact.custom2'] = ['value' => isset($this->contact) ? $this->contact->custom_value2 : '&nbsp;', 'label' => $this->helpers->makeCustomField($this->company->custom_fields, 'contact2')];
$data['$contact.custom3'] = ['value' => isset($this->contact) ? $this->contact->custom_value3 : '&nbsp;', 'label' => $this->helpers->makeCustomField($this->company->custom_fields, 'contact3')];
$data['$contact.custom4'] = ['value' => isset($this->contact) ? $this->contact->custom_value4 : '&nbsp;', 'label' => $this->helpers->makeCustomField($this->company->custom_fields, 'contact4')];

$data['$company.city_state_postal'] = ['value' => $this->company->present()->cityStateZip($this->settings->city, $this->settings->state, $this->settings->postal_code, false) ?: '&nbsp;', 'label' => ctrans('texts.city_state_postal')];
$data['$company.postal_city_state'] = ['value' => $this->company->present()->cityStateZip($this->settings->city, $this->settings->state, $this->settings->postal_code, true) ?: '&nbsp;', 'label' => ctrans('texts.postal_city_state')];
$data['$company.name'] = ['value' => $this->company->present()->name() ?: '&nbsp;', 'label' => ctrans('texts.company_name')];
$data['$company.address1'] = ['value' => $this->settings->address1 ?: '&nbsp;', 'label' => ctrans('texts.address1')];
$data['$company.address2'] = ['value' => $this->settings->address2 ?: '&nbsp;', 'label' => ctrans('texts.address2')];
$data['$company.city'] = ['value' => $this->settings->city ?: '&nbsp;', 'label' => ctrans('texts.city')];
$data['$company.state'] = ['value' => $this->settings->state ?: '&nbsp;', 'label' => ctrans('texts.state')];
$data['$company.postal_code'] = ['value' => $this->settings->postal_code ?: '&nbsp;', 'label' => ctrans('texts.postal_code')];
$data['$company.country'] = ['value' => $this->getCountryName(), 'label' => ctrans('texts.country')];
$data['$company.phone'] = ['value' => $this->settings->phone ?: '&nbsp;', 'label' => ctrans('texts.phone')];
$data['$company.email'] = ['value' => $this->settings->email ?: '&nbsp;', 'label' => ctrans('texts.email')];

ben · January 5, 2021, 10:11am

@hillel is there something we can do about shaky design code editor?

hillel · January 5, 2021, 11:54am

Which OS are you using, the desktop app should work better.

Also please check you’re using the latest v5, we made some recent changes related to keyboard/mouse input.

Java-Jim · January 5, 2021, 12:17pm

I am using v5.0.43-C37 with firefox on linux mint and on win10, both have this strange behaviour.
There is no Problem with Edge on win10, so it seems to be only a problem with FireFox.

I tried already the desktop app in mint. There was an error regarding selfsigned certificate so i configured certbot to deploy letsencrypt certs to the nginx. This error was gone, but after logging in, the window was empty. I did not tried to work on this.

hillel · January 5, 2021, 1:47pm

The empty screen may be caused if you aren’t using the app in English, it should be fixed with the next Linux build.

Java-Jim · January 5, 2021, 3:45pm

At Invoice Design, eg. Product Column the order of fields should be modifieable by drag´n´drop at the icon in front of the fieldname? This does not work. I removed all columns and added them in the right order.

If i define a custom field 1 at company. That should be listed in the #company-address if i define at Invoice Design / Company Address the Custom 1 field. But on the invoice it prints $company.custom1
not my custom value!

If i define a custom field of type Multi-Line how to get to the second line? Enter, Alt+Enter, Shift+Enter does not create a line break.

hillel · January 5, 2021, 9:45pm

Hmmm… issues 1 and 3 should be fixed, which version is this in?

Java-Jim · January 6, 2021, 7:19am

I updated to v5.0.44-C37 (Edge 87, Firefox 84), but drag´n´drop the columns is not possible. Dragging the Page left/right is possible.

Entering a linebreak in multi-column custom fields does not work.

Here some variables, that are not filled in invoice editor: $company.custom1, $company.custom2, $public_notes, $user.first_name, $user.last_name

hillel · January 6, 2021, 10:24am

Do you see the problems in the demo?

https://demo.invoiceninja.com

@ben any thoughts on the fields?

ben · January 6, 2021, 10:50am

Thanks for reporting an issue with custom fields. Can you give me exact steps so I can try to replicate this!

Thank you.

Java-Jim · January 6, 2021, 11:05am

Not possible to Enter a Linebreak in Multi-line text

grafik808×394 15.8 KB
Custom field not shown in invoice

hillel · January 6, 2021, 11:17am

For #1 I’ve tried testing this, when setting a custom company field I expect there to be custom fields on the company details page but they aren’t there. I’ll need to look into it.

hillel · January 6, 2021, 11:57am

I see the problem, custom company fields aren’t shown. We’ll include a fix with the next release.