Add SERIAL NUMBER column in invoice

hafiz4saqib · March 25, 2016, 3:56pm

How to add SERIAL COLUMN in invoice …

lubos · March 25, 2016, 10:47pm

You mean line number on invoices? Why would this be useful?

hafiz4saqib · March 26, 2016, 1:54pm

@lubos It has more attraction in invoice.
And sometime some customers ask me for this.

mastertrading · February 14, 2017, 10:39pm

its Very useFull when item is many more So in this way we can save time

AntonisV · February 15, 2017, 3:14pm

Can’t you do that with the templates lubos?

Tut · February 15, 2017, 5:06pm

Templates have been replaced by themes.

MANINDER0172 · June 29, 2017, 8:34pm

hi lubos, is there any templates with Sr. No. Column?

Tut · June 29, 2017, 10:19pm

Look yourself and see.

lubos · June 29, 2017, 10:26pm

Here is modified default template which shows how to add line number as a column:

<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: 1px">#</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>

MANINDER0172 · June 30, 2017, 4:22am

Thanks. Great Job

mariovB · July 3, 2017, 1:21pm

Hi Lubos,
The line numbering worked great but i updated manager and now when i make a pdf from the invoice the amount column has almost moved off the page to the right.

Tut · July 3, 2017, 3:42pm

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?

mariovB · July 3, 2017, 3:48pm

I used the modified default template as it is

Tut · July 3, 2017, 3:57pm

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

sharpdrivetek · July 3, 2017, 4:57pm

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>

mariovB · July 7, 2017, 9:26am

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

qqqqqqqq · July 7, 2017, 10:25am

any fix on the misalignment?

AaiRIz · July 7, 2017, 3:52pm

@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>

mariovB · July 7, 2017, 4:39pm

Thanks AaiRiz, works perfectly

mastertrading · July 29, 2017, 11:11am

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

Topic		Replies	Views
Add Column in Sales/invoice	7	2078	January 18, 2023
Serial	4	445	December 12, 2021
Add Sr.No column	5	373	January 18, 2023
Please Add Serial Number before Code	9	1301	January 18, 2023
Invoice formatting	14	870	April 25, 2022

Add SERIAL NUMBER column in invoice

Related Topics