How to change the formatting of text, tables, and other elements in the PDF Designer

NOTE: This article refers to the GoCanvas PDF Designer. If you are looking to customize the Standard PDF, please click here.

With the GoCanvas PDF Designer you can add color, size, borders, and more to your output.

Launch the PDF Designer by going to your Apps page and clicking the Edit PDF icon next to the App you'd like to customize. To locate the formatting settings, click the Gear icon. Global Settings will apply properties to all fields and tables in the design. Field Settings allow you to give fields unique properties different from the global settings. Column Settings allow you to control the style of the columns you add to the PDF.

Global Settings

Global settings are divided into four sections: General, Fields, Table Header, and Table Rows. General settings allow you to change font, text color, text size, and vertical spacing (the spacing between fields). Field settings allow you to add borders across all of the fields in your PDF as well as an option to include or exclude field labels. The Table Header and Table Row settings apply to the Loop screens added to your design. You can learn more about adding Loop screens to your app here.

Customizing the Text for All Fields

• Font - Currently you can select from Arial, Courier, Helvetica, and Times New Roman.
• Text Color - Click inside the color preview to launch the color picker. Or, you can type a hexadecimal code inside the color preview to edit your text color.
• Text Size - Drag the selector to the right for larger text and to the left for smaller text.
• Vertical Spacing - Drag the selector to the right for wider spacing between fields or to the left or less spacing between fields.

Adding Global Settings to Fields

You can add borders to all fields in your design by clicking on any of the three border options under the Fields section. When you have a border selected, the icon will turn blue.

If you want to hide field labels such as Name, Address, Phone Number from your PDF, click the Show Labels icon to change the setting to Off. By default, field labels will always be visible unless switched to the Off setting.

Customizing Tables with Global Settings

Loops screens in GoCanvas appear as tables in the PDF Designer.

To change the table header (Date, Start Time, Job Description, and so on) for all tables in your PDF, click inside the color preview to launch the color picker or type in a hexadecimal code.  

Like field settings, you can customize which borders appear in the table. Visible borders will show as a blue icon under the Table Header and Row options.  

To change the color of the table row (values), follow the same process by clicking the color preview next to Background Color.

Field Settings

To see individual field settings, click on a field in your design. When selected, a blue box will appear around the field and field settings automatically opened.

The field settings tab includes the same properties as Global Settings with a few exceptions. Text emphasis such as bold, italics, and underline can only be found in the field settings options. You must also use field settings to customize the alignment of text within a section or column.

In order to change text color, size, spacing, border, and label visibility for a specific field, deselect the Use Global Properties box. This will unmute these customization options.

Example of a field with unique properties:

Column Settings

Column settings will appear when you have highlighted a column in your design to edit. If no columns exist in the section, these settings will apply to the entire section. You change a column's background color as well as apply borders and padding.

• Background - This will allow you to change the color of the column.
  
  
   
• Border Style - This will allow you to add borders to your columns. You can add a border around the entire column or a particular side. You can also customize the border width and color. See below for examples.
  
  
  
  Note: If using Double, you will need to make sure your Border width is larger than 1px.
   
• Padding - This is the spacing between your field values and their column borders. In the below example, the first column has padding of 15px on all sides. The second column has no padding.

Still need help? Submit a ticket.