Develop a PDF Generator Template Locally

You can develop a Heretto PDF Generator template on Windows , macOS, and Linux.

On your workstation, install Prince with the default settings, https://www.princexml.com/doc/installing/.
If needed, learn CSS and HTML basics. For more information, you can refer to the following resources:
- https://www.w3schools.com/css/
- https://www.w3schools.com/html/
If needed, learn about the CSS features supported by the Heretto PDF Generator. See the Prince CSS Reference.
Ensure that you are a Heretto CCMS Administrator.

In Heretto CCMS, do the following:

In the top-left corner, click the Main Menu and go to PDF Generator.
Do any of the following:
- Under the Name column, click any scenario.
- Create a Heretto PDF Generator scenario. See Create a Heretto PDF Generator Scenario.
In the right panel, enable the document preview:
1. Click Select map to preview.
2. In the Select Map window, select a map.
3. Click Select.
  
  Tip:
  When you change the code, to refresh the preview, click Generate PDF.
In the right pane, from the HTML tab, copy the HTML code.

Locally, develop a template by doing the following:

Create a directory for the template development.
Create a directory on your desktop:
- C:\Users\user_name\Desktop\PDFGen (Windows)
- /Users/user_name/Desktop/PDFGen (Mac)
Where user_name is your user name.
Tip: If you need version control, you can keep the template files in a Git repository or other source control environment.
In the template development directory that you created in 5, create and edit the testing.html file.
```
PDFGen/
|- testing.html
```
Paste the HTML code that you copied in 4 to the testing.html file.
In the template development directory that you created in 5, create a testing.css file.
```
PDFGen/
|- testing.html
|- testing.css
```
Develop the template in the testing.css file.

Locally, preview the template by doing the following:

Open the shell application by doing one of the following:
- For Windows, press the Start key and enter cmd
- For macOS, press Cmd > Space and enter terminal
- For Linux (Ubuntu 19.10), press the Super key and enter terminal
At the prompt, navigate to the template development directory by entering cd templates_development
Where templates_development is the directory that you created in 5.
Enter:
- C:\Users\user_name\Desktop\PDFGen (Windows)
- /Users/user_name/Desktop/PDFGen (Mac)
Where user_name is your user name.
Depending on your operating system, perform one of the following actions:
- For macOS and Linux, enter prince testing.html -s testing.css
- For Windows, enter "C:\Program Files (x86)\Prince\engine\bin\prince.exe" testing.html -s testing.css
  Important: The command for Windows assumes that you used the default settings during the Prince installation. If you selected a different Prince installation path, modify the command accordingly.
  Tip: For Windows, you can add “C:\Program Files (x86)\Prince\engine\bin\” as a system path environment variable. This way, you will be able to run Prince by entering prince in the command line instead of entering "C:\Program Files (x86)\Prince\engine\bin\prince.exe".
  For more information, see Add the Prince Path to the Windows System Environment Variables.

The locally-generated PDFs may include a Prince watermark (top-right corner).

Move a Local Heretto PDF Generator template to Heretto CCMS

You move a local Heretto PDF Generator template to Heretto CCMS to make the template available in the publishing interface.

Develop a Heretto PDF Generator template locally. See Develop a PDF Generator Template Locally.
From the testing.css file that you developed locally, copy the CSS code.

In the top-left corner, click the Main Menu and go to PDF Generator.
Do any of the following:
- Under the Name column, click the scenario that you want to update.
- Create a Heretto PDF Generator scenario. See Create a Heretto PDF Generator Scenario.
In the left pane, in the CSS tab, paste the CSS code that you copied from the testing.css file.
Click Save Scenario.

You add the Prince Path to the system environment variables to easily run Prince from the Windows Command Prompt.

On your Windows workstation, install Prince with the default settings, https://www.princexml.com/doc/installing/.

Important: This procedure is only applicable for Windows. You do not need to perform this procedure on macOS or Linux.

Click Start and enter environment variables.
Select Edit the system environment variables.
In the System Properties window, click Environment Variables.
In the Environment Variables window, under System variables, double-click Path.
In the Edit environment variable window, click New.
Enter "C:\Program Files (x86)\Prince\engine\bin\"

Important: This assumes that you used the default settings during the Prince installation. If you selected a different Prince installation path, enter the relevant path.
In each window, click OK.

You can run Prince by entering prince in the Command Prompt now.