QR Code Generation for Invoice

21

Ok thanks @Tut

22

Dear Mr. Nabilb
after update i have tow issue
1- QR code not sowing in any invoice
2- the table come out from right side
kindly advice what can i do to solve these issues

image
image800Ɨ517 9.73 KB

{% if business.logo != null %}{% endif %}
{{ title | replace: "ŁŲ§ŲŖŁˆŲ±Ų©", "Tax Invoice" }} 
            <table style="margin-bottom: 20px"><tr>
                <td>
                    <div style="font-weight: bold">{{ recipient.name }}</div>
                    <div>{{ recipient.address | newline_to_br }}</div>
                    <div>{{ recipient.identifier }}</div>
                </td>
                <td style="{% if business.address != null %}border-right-width: 1px; padding-right: 20px; {% endif %}text-align: right">
                    {% for field in fields %}
                    <div style="font-weight: bold">{{ field.label }}</div>
                    <div style="margin-bottom: 10px">{{ field.text }}</div>
                    {% endfor %}
                </td>
                {% if business.address != null %}
                <td style="padding-left: 20px; width: 1px; white-space: nowrap">
                    <div style="font-weight: bold">{{ business.name }}</div>
                    <div>{{ business.address | newline_to_br }}</div>
                    <div>{{ business.identifier }}</div>
                </td>
                {% endif %}
            </tr></table>

            <div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>
        </td>
    </tr>
    <tr>
        {% for column in table.columns %}
        <td style="font-weight: bold; padding: 5px 10px; text-align: {{ column.align }}; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if column.nowrap %}; width: 80px{% endif %}">{{ column.label }}</td>
        {% endfor %}
    </tr>
</thead>
<tbody>
    {% for row in table.rows %}
    <tr>
        {% for cell in row.cells %}
        <td style="padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
        {% endfor %}
    </tr>
    {% endfor %}
    <tr>
    {% for column in table.columns %}
        <td style="border-bottom-width: 1px; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}">&nbsp;</td>
    {% endfor %}
    </tr>
    {% for total in table.totals %}
    <tr>
        <td colspan="{{ table.columns | size | minus:1 }}" style="padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
        <td style="border-left-width: 1px; white-space: nowrap; border-right-width: 1px; border-bottom-width: 1px; padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
    </tr>
    {% endfor %}

    {% for field in custom_fields %}
    <tr>
        <td colspan="99">
            <div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div>
            <div>{{ field.text | newline_to_br }}</div>
        </td>
    </tr>
    {% endfor %}

    <tr>
        <td colspan="99">
            {% if emphasis.text != null and emphasis.positive %}
            <div style="text-align: center; margin-top: 5px"><span style="color: #006400; border-width: 40px; border-color: #006400; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
            {% endif %}

            {% if emphasis.text != null and emphasis.negative %}
            <div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px; border-color: #FF0000; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
            {% endif %}
        </td>
    </tr>
  
</tbody>

     </td>
  
   </tr>
23

Hi

Try to change English interface then print it to PDF, it will work.

QR, Ask Man Nabil

24

That sounds right. Because field labels used in used in your liquid theme change when you change the language. So if you use multiple languages you should either use two separate themes or make conditional logic so the the accommodates both languages.

But I think that maybe this shouldnā€™t be the case. What if another property of fields is exposed ā€“ letā€™s call it name ā€“ which will remain in english no matter what language is being used. This way we can have 1 theme for all languages.

Sounds like an idea. What do the mods think? @lubos @Tut @Abeiku @Brucanna ?

25

The September 2020 newsletter had an article that applies to translations and custom themes. It was specifically about changing form titles, but the same principals apply to other aspects of custom themes used in languages besides English:

Translations before themes

When using a custom theme to change a title on a form without the Custom title option, remember this rule: Manager applies translations before themes. By the time a custom theme is used to display the transaction, all terms in the translation table will already be translated. The Guide on changing titles refers to ā€œOld Titleā€ and ā€œNew Title.ā€ When coding a custom theme, the translation status and desired end result must be considered with both old and new titles in mind. Specific implications of Managerā€™s processing order include:

  • Custom themes with altered titles can only be used in the language for which they are designed. Including that language in a themeā€™s name is a good practice.
  • Languages not yet completely translated by their translation teams may require mixed-language modifications. For example, if the phrase Production Order has not yet been translated into the new language, the old title text in the custom theme should remain as Production Order (in English). Only the new title text should be in the new language.
  • As translation work progresses, custom themes may require editing to include old title text in the new language. Translation progress may also eliminate your need for the custom theme. (See the following point.)
  • The need for theme editing or deletion may not be obvious. When a form title is added to the translation table, the replacement filter in the theme will no longer function, because the English old title text will no longer be encountered. Instead, the new translation will appear. If the added translation matches the new title text in your custom theme, you may not notice the change, but no harm will be done. However, if the added translation is different from the new title text in your theme, you will notice the change. Since the replacement filter will not function, the added (and different) translation will appear on your completed forms. That will be your clue that the custom theme is no longer working the way you want. If the title from the translation table is acceptable to you, delete the custom theme (assuming its only purpose was to change the title). If you prefer to keep using your own title, modify the custom theme to include the added translation as your old title text.
26

Thatā€™s exactly what I was talking about.

But it doesnā€™t have to be that way. A simple solution is to expose the name of field in addition to the label:

  • The name is always fixed regardless of the language used so it can be used for theme code logic.
  • The label changes with language selection and it can be used for display purposes.
28

Just to give you all update on this requirement. In the latest version (21.10.8), there is now Extensions section under Settings tab which allows to inject custom javascript code to various places within Manager.

This is how Manager will handle country-specific requirements to integrate with government and other agencies around the world.

To add QR code to your invoices, follow this guide:

https://www.manager.io/guides/22137

Select Saudi Arabia and then select QR Code to import.

image

This will simply import extension with the following code.

image
image975Ɨ465 8.49 KB

When sales invoice is viewed, the custom code above will execute which will append QR code at the end of the invoice.

image
image837Ɨ828 13.4 KB

Iā€™m not sure what QR code should encode. Currently Iā€™m just encoding business name but Iā€™m working on making QR code contain all required data, I will improve the script in upcoming days.

11 Likes
29

For Saudi Arabia

Invoice Has to have below data
Sellerā€™s name
VAT registration number of the seller
Time stamp of the Electronic Invoice or Credit/Debit Note (date and time)
VAT total
Electronic Invoice or Credit/Debit Note total (with VAT)
Invoice, Credit or Debit Ref No

May I request your support to extend QR Code To Debit and Credit Note

E-invoicing_Simplified GL.pdf (1.0 MB)

1 Like
30

Thanks @Lubos, Pity it does not seem to function with custom themes. What code should be included in the custom theme to have it show the QRcode?

31

@abdulbari the latest version (21.10.9) is encoding all that in QR code. Not available for credit notes yet.

@eko I will be phasing out custom themes and javascript extensions will be the new way to customize the look or add new functionality. Every screen is Manager is HTML page and extensions allow to store client-side javascript which can run on selected screens (e.g. javascript can be used to generate QR code on invoices like in this case). This is a lot more powerful concept than custom themes.

3 Likes
32

Thanks for the explanation @lubos I hope that you considered the inherent vulnerabilities that javascript extensions may pose (see e.g. JavaScript Security | JavaScript Vulnerabilities | Snyk ). I like Java CEE as development environment but Javascript is another thing altogether. However, moving towards a more standard and easy to implement combination of HTML5, CSS3 & Javascript seems a logical move, but will require us to be more cautious.

33

The way extensions are implemented in Manager make them safe. I made it so only administrators can install extensions. Can administrator install extension that will steal credentials of restricted users? Absolutely. But whatā€™s the point when administrator can already access everything restricted user can.

The only vector of attack when it comes to Manager extensions is if you install untrusted one. But thatā€™s well-undersood issue that is the same for web-browser extensions as well. For example, if you try to install untrusted extension, Firefox gives you this warning:

image
image800Ɨ97 2.5 KB

So javascript is not a problem. The issue is when you install Javascript code that you cannot trust being ā€œcleanā€.

34

:sweat:

Not sure if thatā€™s a great idea. Templating languages makes the design of things a lot easier. JS is horrendous at that and thatā€™s why people use XML for their document templates which is also horrendous but itā€™s the lesser of the two evils.

Manager had others beaten by miles with its Liquid Themes since it can do XML job and JS job without having to confuse xml and html tax, without having to write 100s of lines and Liquid poses a much less security risk than JS.

@lubos could you please give us a reason what spoiled our themes party? I mean no body complained about it.

35

:disappointed:
i hope the emoji says it all.

what i liked about Manager is the simplicity of customization when required. liquid is a lot easier and similar in many ways to html which even basic users with minimal programming skills can work with.

what about all those users who spent their money to hire local programmers as per advice received on the forum. i hope they do not have to hire them again because fo changes made to the program.

i would suggest keeping the liquid themes for basic customization which would be sufficient for the majority of users. more advanced functions can be implemented by invoking the JS (created in Extensions) from within the liquid theme.

2 Likes
36

@lubos we have all requested information except below VAT NO for Seller. Can you please advise what would be best to add it to QR Code. under Business Details there is not any option to add it. usually it is added within address.

37

I agree that adding VAT Id in settings ā†’ Business Details would be helpful if one can call upon it. Almost everywhere we need to include this (invoices, receipts, purchases, etc) by law. We currently just added it to address info and in different themes. However as you can not use QR code with self developed themes we find ourselves in kind of inbetween situation. I tried to look in de default theme where it calls for the QR code extension but had no success. So as such one can not add code extensions to own themes.

38

Is QR extension still under work? now, this function simply cover ZATCA requirement, but we are looking forward more from this add.
I wish lubos announce about completing this function. Weā€™ve import QR extension from first step and have seen the little update on it including add VAT ID custom field for business information, although Weā€™ve noticed that the QR code doesnā€™t give the result unless we change a part of the code ( the text join // if we delete the space around or replaced it by ; ) it works well. now weā€™ve input some edit for the code but every time the system updated, all the edits are lost and replaced by the system code from lubos, so we couldnā€™t ask to keep our edits unless we make sure the new extension has been completed and there is no improvements soon on it.
Kindly, could anyone advice us how to add the supplierā€™s name to the QR code if it is on purchase invoice or payment also Receipts and customerā€™s name and details. it would be a favor as I know nothing about coding.

39

No need for asking ā€œanyoneā€ for help at this time, Iā€™m sure your concerns will be considered. The feature is clearly a WIP. Kindly drop your concerns here and wait for the response.

40

@Ehab actually, if you re-import QR Code, it will create VAT ID custom field in your business details which will be then shown on invoices and embedded within QR Code.

41

Thatā€™s what happened, Iā€™m asking why edits made always lost and redo the system code and why the QR code gives result only after I edit the part of text join in code from ā€˜ // ā€˜ to something like ā€˜;ā€™?