Skip to main content

Generating complex PDFs from your UI

Suggest edit
Updated on February 7, 2022

Provide your users with tools to import case information to their own devices. By configuring an out-of-the-box activity to convert case data to a PDF file, you help users access and archive information that is related to their cases with less effort and at any time.

For example, in a price comparison application, you can configure a button that prints out a PDF of the offers that the user selects for comparison.Note: For simple use cases, you can use the Generate PDF flow shape. For more information, see Flow shapes.

The pyViewAsPDF activity is an example of an out-of-the-box solution that you can use to generate a PDF. You can also build a custom activity that matches your business needs and add steps that generate PDF files in the context of that activity. In that scenario, configure the Property-Set-HTML method as described in the following procedure and add a step calling the HTMLToPDF activity.

Note: PDF is a restrictive format that forces hard constraints on settings such as margins or layouts. Consequently, the HTMLToPDF rule does not support the conversion of dynamic layout groups. As a best practice, use free form layouts or smart layouts with forms that you want to print to PDF.
  1. In the navigation pane of Dev Studio, click Records.

  2. Expand the Technical category and click Activity.

  3. Open the pyViewAsPDF activity.

  4. Define the HTML content from which you want to generate the PDF:

    1. Expand the Property-Set-HTML method.

    2. In the HTMLStream field, enter the name for the HTML fragment on which you want to base the PDF, and then click the Open icon.

      For example: Enter CompareOffersHTML, and then click the Open icon.
    3. In the New tab, click Create and open.

    4. In the HTML Source field, enter the HTML code that you want to use to generate the PDF.

      Note: If you want to use custom CSS, enable CSS use and upload the style sheet as a text file. For more information, see Creating PDF files by using a compact style sheet.
  5. To enable custom fonts in the PDF output, perform the following actions:

    1. Upload the .ttf file of the font that you want to use as a binary file.

      For more information, see Creating binary file rules.
    2. In the HTML Source field, add the custom font reference by using the @font-face rule.

      For example:
      
                                      <style>
                                      @font-face {
                                      font-family: "Mangal";
                                      src: url("webwb/mangal.ttf") format("ttf");
                                      }
                                      </style>
                                  

      For more information, see Customizing fonts for your Pega application.

    3. Click Save, and then return to the pyViewAsPDF tab.

  6. Define the name for the output PDF file:

    1. Expand the Property-Set method.

    2. In the Param.PDFName row, in the PropertiesValue field, enter the name of the file in double quotation marks.

      For example: Enter "CompareOffers.pdf"
  7. Click Save.

Integrate the activity into your case, for example by adding it to a control or a utility shape.

Creating PDF files by using a compact style sheet

Applicable to User experience applications

Adjust the style of your PDF to the needs of your business by using a custom compact style sheet (CSS).

When you create a PDF file by using the Create PDF smart shape or the HTMLtoPDF activity, the system automatically applies the application skin CSS to the PDF. To change this default setting, enable CSS processing for PDF files, and upload the target CSS file to Pega Platform.

    Creating a text file that holds the custom CSS

  1. In the header of Dev Studio, click CreateTechnicalText File.

  2. On the New tab, define the text file record configuration and context, and then click Create and open.

    The file extension for text files containing CSS is .css.
  3. In the text field, enter the CSS markup.

    You can also upload an existing file by clicking Upload file.
  4. In the upper-right corner of the form, click Save.

  5. Enabling CSS for PDF files

  6. In Dev Studio, search for UseCompactStylesforPDF dynamic system setting, and then click the result that appears in the dialog box.

  7. On the Settings tab, in the Value field, enter true.

  8. Click Save.

Add the reference to the CSS file to the HTML markup that you use to generate the PDF. For more information, see Generating complex PDFs from your UI.
Did you find this content helpful? YesNo

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us