------------------
EDIT
------------------
A lot has changed over the years.
Be sure to check here first:
https://developer.servicenow.com/dev.do#!/reference/api/quebec/server/sn_pdfgeneratorutils-namespace/CellBothAPI?navFilter=pdf
Have also enjoyed repurposing Webkit HTML to PDF plugin:
https://docs.servicenow.com/bundle/geneva-performance-analytics-and-reporting/page/use/performance_analytics/task/t_ActivateWHTP.html
------------------
ORIGINAL
------------------
PDF Document Generator is used by the ServiceNow, Inc. sales organization and is a generic HTML form creation and PDF Document generation framework. The framework supports creating HTML forms and PDF files using any UI Form in the instance as a template.
The PDF Document Generator will replicate how that standard UI Form looks but then provides the functionality to change it easily as a front-end user without requiring development.
A PDF feature exists today in the standard platform but it is not customizable. The PDF Document Generator allows for rapid deployment of multiple templates and making changes on the fly to every component visible on the screen very quickly and easily.
Previously, the Sales organization was challenged with the ability to produce Quotes and Sales Orders from a CRM environment. With this custom ServiceNow, Inc. app in place, it is now possible for the front-end business users (sales operations, systems managers, administrators, power users, non-developers) to access configuration tools that put control of the following features directly into their hands:
- Add/remove fields as needed
- Change any fields placement and the field's label, orientation, or value
- Change any section/grouping or fields / Table of information (E.g. "Section 1", "Section 2", etc.)
- Add/remove new sections present in the form
- Manage an entire section's placement, splits, annotations, and headers
- Re arrange the placement of components in the form (E.g. one component relative to the next)
- Change the look and feel (color, border, padding, alignment, etc.) via common HTML and CSS style attributes.
- A scripting API to create dynamic conditions to change any aspect of the form and data (style, value, label, section, etc.).
- Save templates of form layouts
- Preview and print to PDF
The functionality of this PDF Document Generator was made possible by leveraging the ability to write custom scripts in the standard ServiceNow platform, and by having access to the backend table structure and data where forms are stored in the instance (standard UI page, CSS, HTML, and JavaScript). A single developer, in a time frame of one business quarter, built the PDF Document Generator.
Hi Romain,
Glad to hear it!
Q. How I can easily setup a thing like that :
[static sentence][dynamic value][static sentence]
for exemple dynamic value is : 02/08/2014
So, "Your registration date is 02/08/2014 and you can blabla..."
A. This is easily acheived by using the Scripting API to read the form to find variables and replace them with text. Explained below...
[] Some background:
1. Every single value that is displayed to the user in the UI Page is contained in a "Cell" and is either a "Label" or a "Value".
For example:
* An Annotation, UI Formatter, and HTML WYSIWYG fields text will be written as a Cell - > Value
* Normal Fields present in the " Main Form (Not an embedded list) "
will be written as a Cell and the Label and Value of the Cell will match what is in the Platform Form Layout.
* Embedded Lists are written as a Cell -> Label for the List Headers and a Cell -> Value for the values in the List Columns.
2. When you add a script it is interacting directly with these Cells.
For example:
If you want to read the value of the Cell you would write something similar to:
var cellValue = this.element.value; // This is the Cell - > Value
If you want to read the Label of the Cell:
var cellLabel = this.element.label; // This is the Cell - > Label
[] Now the changes
1. First I add an Annotation to the Form Layout and store the static text:
"Your registration date is {!dynamic_registration_date} and you can blabla..."
Entered exactly as written above just with out the double quotes on the ends.
The string "{!dynamic_registration_date}" is our "Dynamic Variable Name" is what the
script will replace with some actual text.
2. Next you need to target the appropriate elements to run the script against
To apply formatting to the Elements they may be targeted by their HTML ID, HTML Class Name,
or HTML Tag Name. When creating a formatting record the following fields in the image below
are used to target an element in the form. As you can see in the notes in the UI under
Element Target Information each record should only use one of the choices to target an element.
Tip: If there are multiple formatting records targetting the same element in the form it
will produce unexpected results because the application will not know which one to use.
If any formatting is not being applied you should check if the element has more than one
formatting record targeting it.
When manually creating a formatting record for a element in the "Elements" (general_element) table you can target any element.
For example you could target:
Any Table
Any Row
Any Header
Any Column
Just view the HTML Source of the Preview PDF UI Page to learn the HTML IDs and Class Names
being generated for your Form so you can target those.
For example if you created a formatting record to use the "Element Tag" field and target " td ".
Then that record will run its formatting, scripting, etc. on every single Td tag in the form.
3. Then you write the script to find the matching static string and replace its text
Lets say I target one specific Annotation element directly by its ID then in that case
I know its the right place and the script just needs to run.
The Script:
if(this.element.value.indexOf('{!dynamic_registration_date}') != -1) {
this.element.value = this.element.value.replace('{!dynamic_registration_date}',
'02/08/2014');
}
Maybe I run this script on every single Cell in the entire Form to look for multiple
dynamic variables then in that case I need to use some logic to change how the script runs.
The Script:
// Run on all Annotations
if (this.element.type == 'annotation') {
if (this.element.value.indexOf('{!dynamic_registration_date}') != -1) {
this.element.value = this.element.value.replace('{!dynamic_registration_date}',
'02/08/2014');
}
if (this.element.value.indexOf('{!dynamic_customer_name}') != -1) {
this.element.value = this.element.value.replace('{!dynamic_customer_name}',
'Romain');
}
}
You can call any other Script Includes from here to help store logic which determines the
what text is added in a different place:
if(this.element.value.indexOf('{!dynamic_registration_date}') != -1) {
// Maybe we need the name of the company or some other field to figure something out
// so get the root GlideRecord of the entire Form
var glideRecord = this.element.record;
var myDynamicVariables = new MyDynamicVariables(glideRecord);
this.element.value = this.element.value.replace('{!dynamic_registration_date}',
myDynamicVariables.getRegistrationDate());
}
Hi Walter,
This seems very interesting, and it could help one of my customer.
So I have installed the application and tried to play with the demo (version 1.1 on Dublin). I can actually preview and create PDF, but the content of the PDF generated differs from the preview. I have attached a screenshot of the result of Create PDF on the 3rd record in the demo. The Preview PDF shows correctly all the fields.
The header part with the information of the record is not displayed. I did not change anything in the configuration, just tried to test the demo.
Am I missing something here ?
Thanks,
Christophe
