I have created custom doctype called color details this is marked as child table. This table is used in Sales order as child table. The columns in the tables are named as color_name, panton_code and cylinder_no.
Now in the print format i want to create small sticker which only create 1 color in each sticker. Below is the example of my sticker. What i want is based on the number of colors in the table it should create a copy of the sticker and have only 1 color name written in the sticker. So if the table have 3 colors it will create three copy and each copy of the sticker will only have 1 color name.
For this, you will have to create a custom print format using the Jinja template. You have two options to write Jinja: one inside the application, another is to create an HTML file in the print format folder.
For writing HTML inside the application…
creating html file…
I am assuming you have to show the sticker of each color. To do that, you will have to fetch data based on the child table in the Jinja template.
Thank you for pointing me to the correct direction using your suggestion i was able to make the print format which i desire but having some minor issue. I am using Print designer custom data area to populate my HTML code but its not utilizing full page width. Here is my code and output screenshot
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--scale-factor: 1; /* Adjust this value to scale the entire document */
}
@page {
size: A4; /* Page size is set to A4 */
margin: 0; /* No margins for the page */
}
body {
font-family: Arial, sans-serif; /* Setting the font family */
width: 100%; /* Full width of the document */
margin: 0; /* No margin for the body */
font-size: calc(16px * var(--scale-factor)); /* Font size scaled by the scale factor */
}
.header {
text-align: center; /* Center-aligning text in the header */
margin-bottom: 20px; /* Spacing below the header */
}
.order-details {
margin: 10px; /* Margin for order details section */
}
.color-box {
display: flex; /* Use flexbox for layout */
align-items: center; /* Align items in the center */
border: 1px solid #000; /* Black border around the color box */
margin: 10px 0; /* Spacing above and below each color box */
padding: 10px; /* Padding within the box */
box-sizing: border-box; /* Ensures padding and border is included in element’s total width & height */
border-radius: 10px; /* Rounded corners for the box */
}
.color-box img {
height: auto; /* Auto height for images */
max-height: 50px; /* Maximum height for the image */
margin-right: 10px; /* Space to the right of the image */
border-radius: 10px; /* Rounded corners for images */
}
.text-content {
flex: 1; /* Allow text content to take available space */
}
h2 {
font-size: calc(24px * var(--scale-factor)); /* Header size scaled by the scale factor */
}
p {
font-size: calc(18px * var(--scale-factor)); /* Paragraph size scaled by the scale factor */
}
</style>
</head>
<body>
<div class="order-details">
<h2>Cylinder Details:</h2> <!-- Heading for the cylinder details section -->
<div>
{% for item in doc.custom_color_details %}
<div class="color-box"> <!-- Box for each color detail -->
<img src="/private/files/kre.JPG" alt="Company Logo"> <!-- Company logo image -->
<div class="text-content">
<p style="margin: 0;"><strong>Customer:</strong> {{ doc.customer }}</p> <!-- Customer name -->
<p style="margin: 0;"><strong>Job ID:</strong> {{ doc.name }} <strong>Job Name:</strong> {{ doc.custom_job_name }}</p> <!-- Job ID and Name -->
<p style="margin: 0;"><strong>Cylinder Color:</strong> {{ item.color_name }} <strong>Sequence No:</strong> {{ item.cylinder_no }}</p> <!-- Cylinder color and sequence number -->
</div>
</div>
{% endfor %}
</div>
</div>
</body>
</html>
It is working perfectly in my case; maybe its parent element is not taking full width, that’s why it is not taking full width. Check your parent element width.
thank you for your quick reply, can you help me to see where can i find the parent element i have copied my entire code so i am not sure where to look.
Are you using Print Designer or you just use the default print format @ejaaz
