Collaborate on Bill Book Design PDF for Public Relations with Ease Using airSlate SignNow

Bill book design pdf for Public Relations

foreign [Music] and 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 Erp next now let's address a common challenge as your business grow 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 frappa 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 past couple of months and today I am excited to announce print design now foreign thank you [Music] [Music] [Music] print designer is now available on develop Branch for testing and it will be compatible with version 15 and onwards if you have a site on Flappy Cloud you can it from apps now here is the fun part as any other app from frappe print designer is 100 free and open source for 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 new one let's create a print format for cell sorter after giving our format a name we can click on create now we'll be redirected to print designer screen 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 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 um 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 pixel because I am comfortable with millimeters I will change it back let's start by creating a text element first we have to choose text tool now we can just click on the canvas to add our text element but first let me set some Global Styles 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 bio rhyme font as they resemble our Branch style very well now we will just add some information from our sales order so 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 sidebar with all of the dock types that we can use to get information in our print format for now we just want order number and date so let's just click on the name and also we'll search for the date and edit 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 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 text tool then hover over the active element and click on the text to select it once it is selected style change is made will only affect that text when 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 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 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 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 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 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 cell sorter for example company logo or header image from the letterhead now this image will dynamically change if user chooses different letterhead 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 rectangle tool and then start drawing we can change rectangles width and height from properties panel or by resize 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 with and height information to create the rectangle we need one more rectangle with same parameters so let's make a copy of this to duplicate we need to press alt or option key while dragging both rectangles snaps 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 contact person.type 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 label to our name we can select the field and click on ADD label next we will remove the new line so designation can be in the same line as 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 label text is smaller than the actual text we can select the label element from drop down and increase the font size [Music] now it's time to create a table to showcase our products we will select table tool from 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 columns 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 columns 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 um 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 header element from drop down and now any changes that we make only applies to tables header to style the actual rows we can select the main element option and make the necessary changes let's change border color for our table you can see that as we change the color it is applied in the table however water for the header is still black so let's change that if we want we can choose different border styles for header and bottle 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 table more compact but for now default looks nice so we'll stick with that 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 [Music] we can press shift and click to select multiple elements as well placing the shift e 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 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 both approach are correct and we can use any one we like next we want to add line below our text but we don't have a line tone so let's get creative we can use 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 alt or option key while dragging I will edit and move around few elements until I am happy with the result now let's add some text but this time we will use 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 heater to do that we can just make the header text white and decrease the text size it looks like we forgot to change border color for 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 header and footer once we click on this button our canvas area now looks different we have a green box above and below the table 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 header and footer is 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 pin 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