Earlier compact item print option was working where, all details of the item was shown in one column next to image, now the option is not working.
Kindly help me in this issue.
Current view -
After ticking the option -
Expected view -
Earlier compact item print option was working where, all details of the item was shown in one column next to image, now the option is not working.
Kindly help me in this issue.
Current view -
After ticking the option -
Expected view -
Possible, but you have to create a custom print format and use the Colspan & Rowspan logic.
Ok, But the inbuilt feature is not working, earlier it was working…
any help for that?
Only possible, with custom print format.
Hi @Anjalijangid,
Please check the sample code:
<html>
<head>
<style>
.table, .table-bordered {
border: 1px solid #d1d8dd;
width: 100%;
border-collapse: collapse;
}
.table th, .table td {
border: 1px solid #d1d8dd;
padding: 8px;
text-align: left;
}
.table th {
background-color: #f0f0f0;
}
.item-image {
width: 100px;
height: auto;
}
.details-table {
width: 100%;
border-collapse: collapse;
}
.details-table td {
border: none;
}
.details-table tr {
border-bottom: 1px solid #d1d8dd;
line-height: 4px;
}
</style>
</head>
<body>
<table class="table">
<thead>
<tr>
<th style="width:10%; text-align:center;">Sr. No.</th>
<th style="width:10%; text-align:center;">Image</th>
<th style="width:10%; text-align:center;">Details</th>
</tr>
</thead>
<tbody>
{% for row in doc.items %}
<tr>
<td style="width:10%; text-align:center;">{{ loop.index }}</td>
<td style="width:40%; text-align:center;">
{% if row.image %}
<img src="{{ row.image }}" class="item-image">
{% endif %}
</td>
<td style="width:50%;">
<table class="details-table">
<tr>
<td>Item Code</td>
<td>{{ row.item_code }}</td>
</tr>
<tr>
<td>Item Name</td>
<td>{{ row.item_name }}</td>
</tr>
<tr>
<td>Qty</td>
<td>{{ row.qty }}</td>
</tr>
<tr>
<td>Rate</td>
<td>{{ row.rate }}</td>
</tr>
<tr>
<td>Amount</td>
<td>{{ row.amount }}</td>
</tr>
</table>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
Output:
Now, you can set it according to the scenario.
Thank You !
I tried this code and it worked but it can not fetch standard selling rate and also the image column is smaller than details column.
<!DOCTYPE html>
<html>
<head>
<style>
@page {
size: A4;
margin: 10mm;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.print-container {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.print-container td, .print-container th {
border: 1px solid #ddd;
padding: 8px;
vertical-align: top;
}
.print-container th {
background-color: #f4f4f4;
}
.image-cell img {
width: 500px; /* Fixed width for images */
height: auto; /* Maintain aspect ratio */
}
.details-cell {
padding-left: 10px;
}
</style>
<h2>Quotation</h2>
<p><strong>Exporter:</strong> {{ 'Angira Art exports' }}</p>
<p><strong>Customer:</strong> {{ doc.custom_catalogue_buyer_name }}</p>
{% if doc.transaction_date %}
{% set date_parts = doc.transaction_date.split('-') %}
{% set year = date_parts[0] %}
{% set day = date_parts[1] %}
{% set month = date_parts[2] %}
<p><strong>Date:</strong> {{ day }}-{{ month }}-{{ year }}</p>
{% endif %}
<table class="print-container">
<thead>
<tr>
<th>Image</th>
<th>Details</th>
</tr>
</thead>
<tbody>
{% for item in doc.items %}
<tr>
<!-- Image Column -->
<td class="image-cell" rowspan="2">
{% if item.image %}
<img src="{{ item.image }}" alt="{{ item.item_name }} style="width: 500px;">
{% else %}
<p>No Image</p>
{% endif %}
</td>
<!-- Details Column -->
<td class="details-cell">
<strong>Item Code:</strong> {{ item.item_code }}<br>
<strong>Description:</strong> {{ item.item_name }}<br>
<strong>Material:</strong> {{ item.custom_material }}<br>
<strong>Size:</strong> {{ item.custom_size }}<br>
<strong>Finish:</strong> {{ item.custom_finish }}<br>
<strong>Rate:</strong> {{ item.standard_rate }}<br>
</td>
</tr>
<!-- Empty Row for Spacing -->
<tr>
<td class="details-cell">
<!-- Optionally, you can leave this cell empty or add additional info if required -->
</td>
</tr>
{% endfor %}
</tbody>
</table>
<p><strong>Total:</strong> {{ doc.grand_total }}</p>
</head>
</html>
field name is not proper so check the rate field name.
that for, you have to fetch the rate from the Item master. you can’t directly set the field name. you have to use the frappe.db.get_value
<strong>Rate:</strong> {{ frappe.db.get_value('Item', item.item_code, 'standard_rate') }}<br>
But this code is not supporting print option following error is coming -
No idea, what code you used, if use my code for sales invoice, it works 100% correctly. Now you have to setup field only according to doctype. I can’t help you more than that I have provided all the reference, now you have to put the mind.
OK I’ll see, thanks a lot !
Description option was not ticked in item table, after selecting it, the compact item print option started working.
Also, if we go for custom formatting then the above code will be helpful.