Add SERIAL NUMBER column in invoice

Your information is insufficient. Did you use the modified default template as-is, or did you “borrow” code from it to put into another template? And did you modify anything else?

I used the modified default template as it is

I can reproduce this problem, @lubos. Screen shot is below. This happens only in the PDF. Direct Print looks fine.

Try using the following default template I modified with line numbers.

<table style="padding: 30px">
<thead>
    <tr><td colspan="99">

        <table style="margin-bottom: 20px"><tr>
            <td style="font-weight: bold; font-size: 32px">{{ title }}</td>
            {% if business.logo != null %}<td style="text-align: right"><img src="{{ business.logo }}" style="max-height: 150px; max-width: 300px"></td>{% endif %}
        </tr></table>

        <table style="margin-bottom: 20px"><tr>
            <td>
                <div><b>{{ recipient.name }}</b> {{ recipient.code }}</div>
                <div>{{ recipient.address | newline_to_br }}</div>
                <div>{{ recipient.identifier }}</div>
            </td>
            <td style="border-right-width: 1px; padding-right: 20px; 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>
            <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>
        </tr></table>

        <div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>

    </td></tr>
    <tr>
        <td style="width: 25px; padding: 5px 5px; border-left-width: 1px; border-top-width: 1px; border-bottom-width: 1px; text-align:CENTER">#</td>
        {% 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 %}; white-space: nowrap; width: 80px{% endif %}">{{ column.label }}</td>
        {% endfor %}
    </tr>
</thead>
<tbody>
    {% assign i = 0 %}
    {% for row in table.rows %}
    {% assign i = i | plus: 1 %}
    <tr>
        <td style="width: 25px; padding: 5px 5px; border-left-width: 1px; text-align:CENTER">{{ i }}</td>
        {% 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 %}"></td>
    {% endfor %}
    </tr>
    {% for total in table.totals %}
    <tr>
        <td colspan="{{ table.columns | size }}" 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 forloop.first == true %}; border-top-width: 1px{% endif %}{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
    </tr>
    {% endfor %}

    <tr><td colspan="99">

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

        {% if emphasis.text != null and emphasis.positive %}
        <div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px; 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>

Thanks for helping out sharpdrivetek, But there is still a little misalignment just above subtotal.

any fix on the misalignment?

@mariovB

Solution is as bellow …

<table style="padding: 30px">
    <thead>
        <tr>
            <td colspan="99">
                <table style="margin-bottom: 20px"><tr>
                    <td style="font-weight: bold; font-size: 32px">{{ title }}</td>
                    {% if business.logo != null %}<td style="text-align: right"><img src="{{ business.logo }}" style="max-height: 150px; max-width: 300px"></td>{% endif %}
                </tr></table>
                
                <table style="margin-bottom: 20px"><tr>
                    <td>
                        <div><b>{{ recipient.name }}</b> {{ recipient.code }}</div>
                        <div>{{ recipient.address | newline_to_br }}</div>
                        <div>{{ recipient.identifier }}</div>
                    </td>
                    <td style="border-right-width: 1px; padding-right: 20px; 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>
                    <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>
                </tr></table>

                <div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>
            </td>
        </tr>
        <tr>
            <td style="font-weight: bold; padding: 5px 10px; text-align: center; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px; width: 40px">#</td>
            {% 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 %}; white-space: nowrap; width: 80px{% endif %}">{{ column.label }}</td>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for row in table.rows %}
        <tr>
            <td style="padding: 5px 10px; text-align: center; border-left-width: 1px; width: 1px">{{ forloop.index0 | plus:1 }}</td>
            {% 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>
        <td style="border-bottom-width: 1px; border-left-width: 1px">&nbsp;</td>
        {% 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 }}" 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 %}

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

        {% if emphasis.text != null and emphasis.negative %}
        <tr><td colspan="99"><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></td></tr>
        {% endif %}
            
    </tbody>
</table>

Thanks AaiRiz, works perfectly

which line have this coding of serial number ??? So i Can Add Specific Coding to get this serial

it is not a single line code…

It’s all the code related for forloop indexing. If you don’t have the skills personally, you will need to hire a local programmer.

image

Finally i done it myself
thanks

hi,
Can You please help me with this coding. I mean how to do the coding as I am not aware with the coding!
May be few simple guidelines can help!

if you had gone through the guides section you would have known there is already a guide available for this.
https://www.manager.io/guides/10303

Ya. I have seen this already. actually don’t know how to copy and execute the code.
I am not much familiar with the coding. if I copy the codes in the window below the themed invoice. How would I get it affected on my system!
your help would be highly appreciated.

there is a guide for that too https://www.manager.io/guides/10366

This is not meant to be a coding forum. If you don’t have the skills to develop your own themes, you should hire someone locally to do the programming for you. Otherwise, you are imposing on the kindness of other forum members.

Sorry Tut. That’s why I asked for a favor if he can help on that.

Thank you

replace —> width: 40px">#
–> width: 40px">Sr.No.