This is the continuation of the previous blog article on PDF generation. In this blog article, we will see how to customize the CSS styling for the generated PDF.
The article was created using Pega 8.3 version! but the core concept remains the same! Use this blog article to learn the concepts and you can try the entire tutorial in the latest versions as well.
It is mandatory to visit my previous blog article, before continuing on this article.
Also, I recommend you to go through another post on updating the CSS styles.
What are the steps involved in Customizing PDF content?
Step 1: Add styling to your PDF section
In the Part 1 tutorial, we used a simple stacked layout for the PDF section. I am going to add a few more stylings to the same PDF section
For the dynamic layout, I added an inline grid double format and added a heading as Information.
Only for the customer field, Label – I added label format as SLA display, just to make it bleed red.
Let’s look at how the SLA display styling is defined using the Skin rule.
It uses a mixin – Status error.
More about UI skin – Mixins and formats in a separate article
Status error uses the color code – #A6020D
For once, run the section and see how it renders in pega
Perfect ????
Let’s also use the developer tool, to note down some important CSS classes
Layout grid is of flex layout – .flex.layout-content-inline_grid_double
Also, check on the style overrides! Attributes in class .layout-content-inline_grid_double gets overridden by flex class .flex.layout-content-inline_grid_double
We will see about flex box in step 7
Step 2: Check if the same styling appears in PDF content
Run the case and generate the PDF file.
Open the PDF and see if all looks good!!
PDF looks very bad!! The values are in White or transparent and Inline grid turned stacked!!
Good, let’s get our hands dirty ????
Do all our application Skin styles are applied in the PDF?? Yes and No. some are applied!
For example – Customer ID is in red color and the same is applied in the PDF. But inline grid double format also was in skin rule, but the styling is not applied.
Let’s see what are the CSS files we sent to PD4ML library to generate the PDF?
Step 3: Verify the CSS files that we send to PD4ML library.
Start the tracer to capture the HTML stream parameter value content we sent in the 8th step of HTMLToPDF activity.
Copy paste the content in notepad
You will see some standard CSS files are added with the document and one interesting css file is
pzskinv2_demoap97fdc23f70bf0e88dea01438414412eda1143d3bc2c145269aa0a6dad0b0c025_full_13833772303
The CSS file starts with pz name (hmmm, reserved naming convention!!) and has the app name and some random UID..
You know who creates such files, it our own Pega engine ????
So, what is the content of the CSS file.
Step 4: Verify the content of application skin specific CSS rule
We know that all the CSS files used will be loaded in our browser. Pega generates this CSS file based on the current application skin and loads it in the browser when you log in.
Let’s find the CSS file
Open any case, right click view source.
Click the application skin CSS rule.
It may not open directly, but copy the CSS URL and paste it in the browser and load, you will be prompted to save the CSS locally.
Don’t get shocked to see thousands of lines of CSS styling. Power of pega ????
It generates the CSS class for all your skin styling.
My skin inherits from CSEndUser skin. For a particular label format Social handle label, I can also see the CSS class styling Pega generated in the CSS rule.
So, everything is included in the CSS rule and the same CSS rule is sent to PD4ML to generate PDF file.
Then the question comes why inline grid double is not working?!
Step 5: Try out compact styles to generate CSS.
In the last post, we saw the use of compact styling, where Pega strips all the heavy CSS files and uses a simple CSS rule to generate the PDF.
How to enable compact styling for PDF generation?
Step 5.1: Enable the DSS
Search for the DSS – UseCompactStylesForPDF and set it to true.
Step 5.2: Now execute the case and see how the PDF gets generated.
Wow! Inline grid double works perfect, but… the Customer ID label style is missing. In fact all your skin styles are stripped off and only the compact styles are applied. You see the text format and label format also look better!!
Step 5.3: Open the CompactStylesForPDF rule and see the styles defined for inline grid double layout.
What we did here is every field, label, layout and subsection included inside a inline grid double layout takes 50% width; and the main attribute is display: inline-block;
This makes two fields in a single row.
Rightly they call it as compact styles ????
Step 6: Verify the difference between compact style and skin CSS style for inline grid double
In step 4, we already saved the Skin CSS in a notepad.
Search for the class .layout-content-inline_grid_double
You see a lot of flex CSS styles were also included.
In step 1, we already saw attributes in class .layout-content-inline_grid_double gets overridden by flex class .flex.layout-content-inline_grid_double
We need to disable the flex box settings.
Step 7: Disable flexbox settings in the section rule
What is flexbox?
Pega introduced Flexbox in pega 7.2.1 to design flexible responsive user interface.
There is a very good knowledge article on Flexbox troubleshooting!!
https://support.pega.com/support-doc/troubleshooting-flex-based-layout-issues-internet-explorer-11
For PDF generation, all we need is some standard format. We don’t need flexible or responsive UI configuration.
Open the dynamic layout settings and in the presentation tab, configure the below settings
Use legacy layout, markup and CSS and set it to Pega 7.0
Now run the preview button on section rule and inspect the element using developer tools.
You will see the Flex div class and styling wiped off.
Still the display for the class is not inline-block!
Now only .layout-content-inline_grid_double holds the styling ????
Now its time to apply styles.
Step 8: Create a custom style for PDF
Step 8.1: Create a new container format for PDF section.
The reason why I am creating a new format is to isolate the format for PDF layouts and apply PDF only to that new PDF container format. By doing this way, you can reuse the styles across PDF and maintain it effectively without impacting other CSS styles.
I saved as the default container format and adjusted few configurations like background color.
Step 8.2: Include the new container format in the PDF section layout settings.
Step 8.3: Get the CSS class for the new container
Run the preview and inspect using developer tools.
You see the CSS class for PDF container – .layout-outline-pdf_container, .layout-fieldset-pdf_container, .layout-noheader-pdf_container
Step 8.4: Create a new css file and include the style for the PDF container CSS class.
Just include display:inline-block attribute.
Step 8.5: Include the css stylesheet in the skin rule.
Step 9: Final testing step.
Run the case and check the generated PDF.
At least now inline grid double styling works well ????
With this, it is evident that all the skin style contents (including the stylesheets) are bundled into a single CSS file and the same is sent to PD4ML library.
But… Hope Pega checks out other third-party tools as well for PDF generation! Sorry PD4ML!!
Now please continue to add the CSS styles in the stylesheet and beautify your PDF ????
How to generate PDF with a click of a button?
Till now we saw how to create a PDF file and attach the file with the case. Let’s also see how to generate and view a PDF document on a button click.
You cannot use pxCreatePDF final activity, because it is the final activity and it always calls pyAttachAsPDF activity.
pyViewAsPDF is the ideal candidate, but you need to reuse a few steps in the pxCreatePDF activity.
Step 1: Create a wrapper activity to create PDF.
In the first step, just pass a few important parameters. I am going to use the same HTML stream as used in pxCreatePDF activity and set the section name as PDF section name.
Step 2: Include a button in the user portal and click open URL in the new window by running the activity in currentpage context.
Step 3: Now run the case, click the button and check the generated PDF.
We used the same section, the same styles for the PDF Container!!
We will end this article here!! I hope you have some starting point in customizing the PDF styles ????
