Welcome to Frappe. My name is Maharshi Patel, and today I would like to talk about print formats. These are used to effortlessly print any information onto a paper or generate PDFs from your custom app or ERPNext.
Now, let's address a common challenge. As your business grows, you need a more complex layout. The current print format builders, although user-friendly and effective, may not keep up with your evolving needs. Maybe you need something more advanced, something more customizable.
Right now, imagine having the ability to design complex layouts, precisely tailor styling each element, and seamlessly incorporating dynamic data from your Frappe apps, all of this without writing a single line of code. Wouldn't that be amazing? Well, this is what we have been working on for the past couple of months, and today I am excited to announce Print Design.
Availability & Getting Started
Print Designer is now available on the develop branch for testing, and it will be compatible with version 15 and onwards. If you have a site on Frappe Cloud, you can install it from Apps.
Now, here is the fun part: as any other app from Frappe, Print Designer is 100% free and open source. For a self-hosted instance, you can visit our GitHub repository and follow the guide.
Now, let's have a closer look at how it works. After installing Print Designer, we'll go to the awesome bar and search 'Print Design'. Now, as you can see, there is a form in front of us where we can edit our existing formats or create a new one. Let's create a print format for Sales Order. After giving our format a name, we can click on 'Create'. Now we'll be redirected to the Print Designer screen.
Exploring the Print Designer UI
On the top left corner, we have our various tools that we'll be using today. In the middle, we have a canvas area where we have one element created by default. Let's delete the element as we'll be creating everything from scratch. Select the element by clicking and press the backspace or delete key.
On the right-hand side, we have our properties panel where we have the option to choose the page size for our format. We can choose something small like A6 or something big like A3. For now, A4 is sufficient, so we'll use that. Below that, we have page... where we can set our preferred unit of measurement. If I select pixels, you can see that all inputs in the properties panel now have values in pixels. Because I am comfortable with millimeters, I will change it back.
Adding and Styling Dynamic Text
Let's start by creating a text element. First, we have to choose the text tool. Now, we can just click on the canvas to add our text element. But first, let me set some Global Styles. The properties panel is now in global style mode because there isn't any active or selected element, and any style changes that you will make will be applied to all of the text that we'll create. This is not a compulsory step, and we can always change this later. For example, today we will be using the Biorhyme font, as it resembles our brand style very well.
Now we will just add some information from our sales order. For that, first make sure that Dynamic Text is selected. We can click on the canvas where we want to add this information. As soon as we click, this interface becomes visible. On the left side, we have a sidebar with all of the doctypes that we can use to get information in our print format. For now, we just want the order number and date, so let's just click on the 'name', and also we'll search for the date and add it as well. Now let's click on Confirm. In the canvas area, we can see a new element is added with the styles that we set before in global styles. With the mouse tool selected, we can drag the element to further change its location.
Local Styling and Static Text
Any changes made in the properties panel when our element is selected only applies to that particular element. We can also style the individual text. To do that, first we need to select the text tool, then hover over the active element and click on the text to select it. Once it is selected, style changes made will only affect that text. When an input field is in focus, we can increase or decrease the value using the arrow keys.
Now let's add some normal text. We can do that by selecting 'Static text' from the drop-down. After that, we can just click on the canvas and start typing. It's that simple. Now let's add some styling. First, make sure that the Mouse tool is selected. I think white text on a dark brown background will look good, so let's do that. We can use the color inputs to change our font and background color. Now let's resize by dragging from the small squares around the element. We can center the text by clicking on this icon. We will increase the text style and make it extra bold. There is quite less padding at the top, so let's add some and tweak until we are happy with the result.
Working with Images
Now it's time to add our brand logo. First, we need to select the image tool and move the cursor to where we want our logo. Next, we'll press and hold the left mouse button while moving our cursor. We'll make it roughly the size of the image we want. Now, when we release our mouse button, this image selector becomes visible. We can choose any image that is available on our site. We can simply double-click on the image to change it. We can also attach an image from our computer, and it will be directly uploaded from here.
Let's increase the size so it's properly visible. We also have the option to select any of the images that are linked to the sales order, for example, the company logo or header image from the letterhead. Now, this image will dynamically change if a user chooses a different letterhead.
Creating Layouts with Shapes and Data
Next, we should add some structure or layout for this format. How about some rectangles to hold our customer and contact info? Obviously, first, we will choose the correct tool for the job: the rectangle tool, and then start drawing. We can change the rectangle's width and height from the properties panel or by resizing. If we know the exact size for the rectangles, we don't even need to draw. Let me show you how. We can just click and type width and height information to create the rectangle. We need one more rectangle with the same parameters, so let's make a copy of this. To duplicate, we need to press the Alt or Option key while dragging. Both rectangles snap to each other when they come nearby for easier alignment.
We can select rectangles by clicking on the empty area and dragging over both rectangles like this. Now let's remove the right-side border of the rectangle by clicking on this icon. So I will quickly add customer name and address just like we added our order number and date.
Next, we can add contact information. Some of the data that we need, like designation, is in the Contact Person doctype, so we need to select that. Now we can simply click on the fields that we want to add. As we select more fields, this preview area keeps updating. There are some actions that we can use to change our text. First, let's add a label to our name. We can select the field and click on 'Add Label'. Next, we will remove the newline so 'designation' can be in the same line as the person's name. We also have the option to add normal text, so let's add parentheses around designation. We can drag and drop to move the text before and after designation.
I have done some basic styling, but as we can clearly see that the label text is smaller than the actual text. We can select the label element from the drop-down and increase the font size.
Building and Customizing Tables
Now it's time to create a table to showcase our products. We will select the table tool from the toolbar and start drawing. Like before, if you look at the table, it has automatically created columns based on our table size for our convenience. When for the first time we double-click on a column's header, we will be asked to select the table that we want to use. Upon selecting, we again see a very similar interface. One more input is available where we can set our column's header text.
Now, let's resize the column to make it more compact. We can always add multiple fields in the same column. As an example, I will add UoM after quantity. Looks like we are out of columns, so let's add more. First, right-click on the header and then select 'Insert Right'. I will quickly update other columns as well.
Next, we can change our table style. We can select the header element from the drop-down, and now any changes that we make only apply to the table's header. To style the actual rows, we can select the main element option and make the necessary changes. Let's change the border color for our table. You can see that as we change the color, it is applied in the table. However, the border for the header is still black, so let's change that. If we want, we can choose different border styles for the header and body. There are many more features and styling options that we haven't used. You can always explore them on your own. For example, we can change the padding to make the table more compact, but for now, default looks nice, so we'll stick with that.
Advanced Layout and Styling Techniques
As you can see, there isn't enough space left at the bottom, so let's move our elements to make more space. We will start by selecting the elements and then use the arrow keys to move them up or down. We can press Shift and click to select multiple elements as well. Pressing the Shift key while moving will increase the speed.
Print Designer is built with flexibility in mind. Even though there are some recommended ways to do certain things, you can always use our imagination to get the desired result. Let me show you a few examples. This time we will draw a rectangle with a dark brown background instead of resizing the text element like we did for the sales order text. Both approaches are correct, and we can use any one we like. Next, we want to add a line below our text, but we don't have a line tool. So let's get creative. We can use a rectangle with a zero height and disable all of the borders except the bottom to create a line.
To make a copy of multiple elements, we will first select the elements and press the Alt or Option key while dragging. I will edit and move around a few elements until I am happy with the result. Now let's add some text, but this time we will use the 'add text' option of the dynamic text, just to illustrate my point.
We still need to add our taxes and charges, so let's do that next. Some basic styling... this looks decent, but I don't want it to look like a table, so let's remove all of the styles. We still need to hide the header. To do that, we can just make the header text white and decrease the text size. It looks like we forgot to change the border color for the rectangles, so let's quickly do that.
We can always zoom out to get an overview. Let's save our print format.
Now that we have created our format, next we can set up the header and footer. Once we click on this button, our canvas area now looks different. We have a green box above and below the page. This represents our header and footer area. Let's go to the print view to make sure that everything looks as expected. If we scroll down, we can see that the header and footer are repeated. However, we don't need customer and contact info on all pages, so let's resize the green box to exclude the information and save the format. If we check again, customer and contact is now only added in the first page.
It is recommended to select the document with all of the information that we need to print so it can be easily visualized. At any point in time, we can go to the select input and change the document. When we change it, Print Designer will preview data from that document. This is all we have to do to create print formats using Print Design. Thank you for watching.
