Generate documents using conditionals denoted by {{if cond}} and {{endif}} clauses. Conditionals can be helpful when content in the document should only be included in certain cases.
This demo allows you to:
Implementation steps
To add document generation capability using conditional clauses with WebViewer:
Step 1: Choose your preferred web stack
Step 2: Download any required modules listed in the Demo Dependencies section below
Step 3: Add the ES6 JavaScript sample code provided in this guide
Demo Dependencies
This sample uses the following:
1// ES6 Compliant Syntax
2// GitHub Copilot v1.0, Claude 3.5 Sonnet, July 31, 2025
3// File: index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7// Document Generation using Conditionals with JSON Data & JS
8//
9// This code demonstrates how to fill a DOCX template with JSON data, this
10// template includes conditional logic to display different content based
11// on the data provided.
12// This can be seen by the red PAST DUE marking on the invoice template that
13// is wrapped by the {{if condition}} and {{endif}} tags.
14//
15
16// Default Template Document
17const defaultDoc = 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/reminder_template.docx';
18
19// JSON data for filling the template
20const sampleData = {
21 'bill_to_name': 'Joey Hansen',
22 'past_due': true,
23 'pay_by_date': '20-03-2022',
24 'ship_to_name': 'Kathryn Hoover',
25 'total_due': '250.00',
26 'total_owing': '150.00',
27 'total_paid': '100.00',
28};
29
30// Load the default template document
31const customizeUI = async (instance) => {
32 // Load DOCX template
33 await instance.Core.documentViewer.loadDocument(defaultDoc, {
34 extension: 'docx',
35 });
36};
37
38// Apply JSON data to the PDF
39const fillTemplate = async (instance) => {
40 await instance.Core.documentViewer.getDocument().applyTemplateValues(sampleData);
41};
42
43// WebViewer section
44//
45// This code initializes the WebViewer with the basic settings
46// that are found in the default showcase WebViewer
47//
48
49const searchParams = new URLSearchParams(window.location.search);
50const history = window.history || window.parent.history || window.top.history;
51const licenseKey = 'YOUR_LICENSE_KEY_HERE';
52const element = document.getElementById('viewer');
53
54WebViewer({
55 path: '/lib',
56 serverUrl: null,
57 forceClientSideInit: true,
58 fullAPI: true,
59 css: '../styles/stylesheet.css',
60 ui: 'beta',
61 licenseKey: licenseKey,
62}, element).then((instance) => {
63 // Enable the measurement toolbar so it appears with all the other tools, and disable Cloudy rectangular tool
64 const cloudyTools = [
65 instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT,
66 instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT2,
67 instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT3,
68 instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT4,
69 ];
70 instance.UI.enableFeatures([instance.UI.Feature.Measurement, instance.UI.Feature.Initials]);
71 instance.UI.disableTools(cloudyTools);
72
73 // Set default toolbar group to Annotate
74 instance.UI.setToolbarGroup('toolbarGroup-Annotate');
75
76 // Set default tool on mobile devices to Pan.
77 // https://apryse.atlassian.net/browse/WVR-3134
78 if (isMobileDevice()) {
79 instance.UI.setToolMode(instance.Core.Tools.ToolNames.PAN);
80 }
81
82 instance.Core.documentViewer.addEventListener('documentUnloaded', () => {
83 if (searchParams.has('file')) {
84 searchParams.delete('file');
85 history.replaceState(null, '', '?' + searchParams.toString());
86 }
87 });
88
89 instance.Core.annotationManager.enableAnnotationNumbering();
90
91 instance.UI.NotesPanel.enableAttachmentPreview();
92
93 // Add the demo-specific functionality
94 customizeUI(instance).then(() => {
95 // Create UI controls after demo is initialized
96 createUIControls(instance);
97 });
98});
99
100// Function to check if the user is on a mobile device
101const isMobileDevice = () => {
102 return (
103 /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(
104 window.navigator.userAgent
105 ) ||
106 /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
107 window.navigator.userAgent.substring(0, 4)
108 )
109 );
110}
111
112// Cleanup function for when the demo is closed or page is unloaded
113const cleanup = (instance) => {
114 if (typeof instance !== 'undefined' && instance.UI) {
115 // Clean up any resources if needed
116 console.log('Cleaning up complex-generation demo');
117 }
118};
119
120// Register cleanup for page unload
121window.addEventListener('beforeunload', cleanup);
122window.addEventListener('unload', cleanup);
123
124// UI section
125//
126// Helper code to add controls to the viewer holding the buttons
127// This code creates a container for the buttons, styles them, and adds them to the viewer
128//
129
130// Text input field
131const createTextInput = (fieldName, value) => {
132 const container = document.createElement('div');
133 container.className = 'input-container';
134
135 const label = document.createElement('label');
136 label.textContent = fieldName;
137 container.appendChild(label);
138
139 const input = document.createElement('input');
140 input.name = fieldName.toLowerCase().replace(/ /g, '_');
141 input.type = 'text';
142 input.value = value || '';
143 input.className = 'text-input';
144 input.onchange = (e) => {
145 sampleData[input.name] = e.target.value;
146 };
147 container.appendChild(input);
148
149 return container;
150};
151
152// Checkbox field
153const createCheckbox = (fieldName, checked) => {
154 const container = document.createElement('div');
155 container.className = 'checkbox-container';
156
157 // Create label for the checkbox
158 const label = document.createElement('label');
159 label.textContent = fieldName;
160 container.appendChild(label);
161
162 const checkbox = document.createElement('input');
163 checkbox.name = fieldName.toLowerCase().replace(/ /g, '_');
164 checkbox.type = 'checkbox';
165 checkbox.checked = checked || false;
166 checkbox.className = 'checkbox-input';
167 checkbox.onchange = (e) => {
168 sampleData[checkbox.name] = e.target.checked;
169 };
170 container.appendChild(checkbox);
171
172 return container;
173};
174
175// Fill Template Button
176const fillTemplateButton = (instance) => {
177 const button = document.createElement('button');
178 button.className = 'btn';
179 button.textContent = 'Fill Template';
180 button.onclick = () => {
181 fillTemplate(instance, sampleData);
182 };
183 return button;
184};
185
186// Reset Document Button
187const resetDocumentButton = (instance) => {
188 const button = document.createElement('button');
189 button.className = 'btn';
190 button.textContent = 'Reset Document';
191 button.onclick = async () => {
192 await instance.Core.documentViewer.loadDocument(defaultDoc, {
193 extension: 'docx',
194 });
195
196 // Reset Sample Data
197 sampleData.bill_to_name = 'Joey Hansen';
198 sampleData.past_due = true;
199 sampleData.pay_by_date = '20-03-2022';
200 sampleData.ship_to_name = 'Kathryn Hoover';
201 sampleData.total_due = '250.00';
202 sampleData.total_owing = '150.00';
203 sampleData.total_paid = '100.00';
204
205 // Reset all text inputs and checkboxes
206 const textInputs = document.querySelectorAll('.text-input');
207 textInputs.forEach((input) => {
208 input.value = sampleData[input.name] || '';
209 });
210 const checkboxes = document.querySelectorAll('.checkbox-input');
211 checkboxes.forEach((checkbox) => {
212 checkbox.checked = sampleData[checkbox.name] || false;
213 });
214 };
215
216 return button;
217};
218
219const createUIControls = (instance) => {
220 // Create a container for all controls (label, dropdown, and buttons)
221 const controlsContainer = document.createElement('div');
222 controlsContainer.className = 'controls-container';
223
224 // Buttons Container
225 const buttonsContainer = document.createElement('div');
226 buttonsContainer.className = 'buttons-container';
227 buttonsContainer.appendChild(fillTemplateButton(instance));
228 buttonsContainer.appendChild(resetDocumentButton(instance));
229 controlsContainer.appendChild(buttonsContainer);
230
231 // Create a container for the text inputs
232 const textInputsContainer = document.createElement('div');
233 textInputsContainer.className = 'text-inputs-container';
234
235 // bill_to_name field
236 const billToNameInput = createTextInput('Bill To name', sampleData.bill_to_name);
237 textInputsContainer.appendChild(billToNameInput);
238
239 // past_due field
240 const pastDueCheckbox = createCheckbox('Past Due', sampleData.past_due);
241 textInputsContainer.appendChild(pastDueCheckbox);
242
243 // pay_by_date field
244 const payByDateInput = createTextInput('Pay By Date', sampleData.pay_by_date);
245 textInputsContainer.appendChild(payByDateInput);
246
247 // ship_to_name field
248 const shipToNameInput = createTextInput('Ship To Name', sampleData.ship_to_name);
249 textInputsContainer.appendChild(shipToNameInput);
250
251 // total_due field
252 const totalDueInput = createTextInput('Total Due', sampleData.total_due);
253 textInputsContainer.appendChild(totalDueInput);
254
255 // total_owing field
256 const totalOwingInput = createTextInput('Total Owing', sampleData.total_owing);
257 textInputsContainer.appendChild(totalOwingInput);
258
259 // total_paid field
260 const totalPaidInput = createTextInput('Total Paid', sampleData.total_paid);
261 textInputsContainer.appendChild(totalPaidInput);
262
263 controlsContainer.appendChild(textInputsContainer);
264 element.insertBefore(controlsContainer, element.firstChild);
265};
266
267
Did you find this helpful?
Trial setup questions?
Ask experts on DiscordNeed other help?
Contact SupportPricing or product questions?
Contact Sales