Fill PDF forms on any device using DsPdfViewer Form Filler

This sample loads an example Commercial Rental Application Form. To make form input more convenient, we customize the appearance and behavior of the Form Filler dialog using the formFiller option. After loading the document the Form Filler dialog is displayed using the client side showFormFiller method.

window.onload = function(){ //DsPdfViewer.LicenseKey = "***key***"; const requiredPhonePattern = '^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$'; const requiredPhoneValidationMessage = 'Valid formats: 1234567890, (123)456-7890,\n 123-456-7890, 123.456.7890, +31636363634, 075-63546725'; const optionalPhonePattern = '^$|^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$'; const optionalPhoneValidationMessage = 'Field is optional, valid formats:\n 1234567890, (123)456-7890,\n 123-456-7890, 123.456.7890, +31636363634, 075-63546725'; const ovnPark_FieldValue_On = 'Has overnight parking.', ovnPark_FieldValue_Off = 'NO'; let updatingFieldsFlag = false; function combineTwoFieldsIntoOneValue(destfieldName, fieldName2, formFiller) { var addr1 = formFiller.getFieldByName(destfieldName); var addr2 = formFiller.getFieldByName(fieldName2); if(addr1 && addr2) { if(addr2.fieldValue) { addr1.fieldValue = addr1.fieldValue + '\n' + addr2.fieldValue; addr2.fieldValue = ''; formFiller.onFieldChanged(addr1); formFiller.onFieldChanged(addr2); } } } function splitFieldValueIntoTwoFields(srcfieldName, fieldName2, formFiller) { var addr1 = formFiller.getFieldByName(srcfieldName); var addr2 = formFiller.getFieldByName(fieldName2); if(addr1 && addr2) { var s = addr1.fieldValue; var nlInd = s.indexOf('\n'); if(nlInd !== -1) { var firstPart = s.substring(0, nlInd); var secondPart = s.substr(nlInd + 1); addr1.fieldValue = firstPart; addr2.fieldValue = secondPart; } else { addr2.fieldValue = ''; } formFiller.onFieldChanged(addr1); formFiller.onFieldChanged(addr2); } } const options = { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: { apiUrl: window.top.SUPPORTAPI_URL, token: window.top.SUPPORTAPI_TOKEN, webSocketUrl: false }, restoreViewStateOnLoad: false }; // Form Filler options for 'RentalApplicationForm' document: let formFiller_RentalApplicationForm = { onInitialize: function(formFiller) { combineTwoFieldsIntoOneValue('Addr1', 'Addr2', formFiller); combineTwoFieldsIntoOneValue('BusAddr1', 'BusAddr2', formFiller); var ovnParkField = formFiller.getFieldByName('OvnPark'); if(ovnParkField.fieldValue) { var ovnPark_LowVal = (ovnParkField.fieldValue || '').toLowerCase(); if(!ovnPark_LowVal || ovnPark_LowVal.indexOf('no') !== -1 || ovnPark_LowVal === 'off' || ovnPark_LowVal === 'false') { ovnParkField.fieldValue = 'Off'; formFiller.onFieldChanged(ovnParkField); } else { ovnPark_FieldValue_On = ovnParkField.fieldValue;// remember current On value. ovnParkField.fieldValue = 'On'; formFiller.onFieldChanged(ovnParkField); } } }, beforeApplyChanges: function(formFiller) { splitFieldValueIntoTwoFields('Addr1', 'Addr2', formFiller); splitFieldValueIntoTwoFields('BusAddr1', 'BusAddr2', formFiller); var ovnParkField = formFiller.getFieldByName('OvnPark'); if(ovnParkField.fieldName === 'OvnPark') { if(ovnParkField.fieldValue === 'On') { ovnParkField.fieldValue = ovnPark_FieldValue_On; } else { ovnParkField.fieldValue = ovnPark_FieldValue_Off; } } return true; }, beforeFieldChange: function(changedField, formFiller) { if(updatingFieldsFlag) return true; var setFieldValue = function(chkboxFieldName, newVal) { var tmpField = formFiller.getFieldByName(chkboxFieldName); if(tmpField.fieldValue !== newVal) { tmpField.fieldValue = newVal; formFiller.onFieldChanged(tmpField); } }; updatingFieldsFlag = true; try { var fieldName = changedField.fieldName; var fieldValue = changedField.fieldValue; if(fieldName === 'Married1CHK' || fieldName === 'Single1CHK') { if(fieldName === 'Married1CHK') setFieldValue('Single1CHK', 'Off'); if(fieldName === 'Single1CHK') setFieldValue('Married1CHK', 'Off'); if(fieldValue === 'Off') return false; // prevent uncheck } if(fieldName === 'CorpCHK' || fieldName === 'GPCHK' || fieldName === 'IndivCHK') { // Uncheck other fields: switch(fieldName) { case 'CorpCHK': setFieldValue('GPCHK', 'Off'); setFieldValue('IndivCHK', 'Off'); break; case 'GPCHK': setFieldValue('CorpCHK', 'Off'); setFieldValue('IndivCHK', 'Off'); break; case 'IndivCHK': setFieldValue('CorpCHK', 'Off'); setFieldValue('GPCHK', 'Off'); break; default: break; } if(fieldValue === 'Off') return false; // prevent uncheck } } finally { updatingFieldsFlag = false; } return true; }, mappings: { 'CustomContent1': { type: 'custom-content', content: '<h2>COMMERCIAL TENANT APPLICATION</h2>' }, 'AppDate': { title: 'Application date', displayname: 'Date', type: 'date', defaultvalue: new Date().toJSON().slice(0, 10) }, 'Entity': { autofocus: true, title: 'Name of individual, partnership, or corporation', displayname: 'Applicant or Leasing Entity', placeholder: 'Name of individual, partnership, or corporation', required: true, validationmessage: 'Entity name is required', validateoninput: true }, 'CustomContent2': { type: 'custom-content', content: '<table> <tr><td style=\'vertical-align:top;\'> <i><u>Corporation:</u></i> </td><td style=\'vertical-align:top;\'> <i>Articles of Incorporation must be provided and 2 years\' Annual Report and corporate tax return.</i> </td></tr> <tr><td style=\'vertical-align:top;\'> <i><u>Partnership:</u></i> </td><td style=\'vertical-align:top;\'> <i>Partnership Agreement must be provided plus individual partners\' current personal financial statement and 2 years\' personal tax returns.</i> </td></tr> <tr><td style=\'vertical-align:top;\'> <i><u>Individual:</u></i> </td><td style=\'vertical-align:top;\'> <i>Personal balance sheet and 2 years\' personal tax returns must be provided. Must include Drivers\' license number.</i> </td></tr></table>' }, 'Addr1': { title: 'Current corporate headquarters/home address (For partnership/individuals) (Do not use P.O. Box)', displayname: 'Current address', placeholder: 'Current corporate headquarters/home address (For partnership/individuals) (Do not use P.O. Box)', multiline: true, required: true, validationmessage: 'Address is required', validateoninput: true }, 'Addr2': { hidden: true, }, 'CorpPhone': { title: 'Corporate phone number', displayname: 'Corporate phone #', placeholder: 'Corporate phone', type: 'tel', pattern: requiredPhonePattern, validationmessage: requiredPhoneValidationMessage, validateoninput: true }, 'CorpState': { title: 'State where the company was registered', displayname: 'State of incorporation', placeholder: 'State of incorporation', validateoninput: true, validator: function(fieldValue, field) { if(!fieldValue || !fieldValue.trim()) return 'This field cannot be empty'; if(fieldValue.toLowerCase().indexOf('delaware') === -1) return 'Only Delaware state allowed.'; return true; } }, 'DBA': { title: 'DBA (Doing Business As)', displayname: 'DBA name', placeholder: 'DBA', required: true }, 'HomePhone': { title: 'Home phone number (for partnerships/Individuals)', displayname: 'Home phone #', placeholder: 'Home phone (optional)', type: 'tel', pattern: optionalPhonePattern, validationmessage: optionalPhoneValidationMessage, validateoninput: true }, 'PtnrState': { title: 'State of partnership formation', displayname: 'State of partnership formation', placeholder: 'State of partnership formation' }, 'LocalPhone': { title: 'Local phone number', displayname: 'Local phone #', placeholder: 'Local phone (optional)', type: 'tel', pattern: optionalPhonePattern, validationmessage: optionalPhoneValidationMessage, validateoninput: true }, 'Use1': { title: 'Full description of intended use', displayname: 'Intended use', placeholder: 'Intended use (line 1)', required: true }, 'Use2': { title: 'Full description of intended use', displayname: '', placeholder: 'Intended use (line 2)' }, 'Use3': { title: 'Full description of intended use', displayname: '', placeholder: 'Intended use (line 3)' }, 'CustomContent3': { type: 'custom-content', content: '<h2>CURRENT BUSINESS LANDLORD</h2>' }, 'CurrLandlord': { title: 'Current business landlord name', displayname: 'Name', placeholder: 'Landlord name' }, LandLordPhone: { title: 'Phone number', displayname: 'Phone #', placeholder: 'Phone (optional)', type: 'tel', pattern: optionalPhonePattern, validationmessage: optionalPhoneValidationMessage, validateoninput: true }, BusAddr1: { title: 'Present business address', displayname: 'Present business address', placeholder: 'Present business address', multiline: true }, BusAddr2: { hidden: true }, NumYears: { title: 'Years at this location', displayname: 'Years at this location', placeholder: 'Years at this location', type: 'number', min: 0, max: 100 }, NumEmployees: { title: 'Number of employees', displayname: 'Number of employees', placeholder: 'Number of employees', type: 'number', min: 0, max: 1000000 }, PkgSpaces: { title: 'Number of parking spaces needed', displayname: 'Number of parking spaces needed', placeholder: 'parking spaces number', type: 'number', min: 0, max: 1000000 }, OvnPark: { title: 'Any overnight parking?', displayname: 'Any overnight parking?', type: 'checkbox' }, BankAcct: { title: 'Bank account number', displayname: 'Account number', placeholder: 'Account number', minlength: 8, maxlength: 12, validationmessage: 'Expected value between 8 and 12 digits', validateoninput: true }, BankPhone: { title: 'Bank phone number', displayname: 'Phone number' }, BankRef: { title: 'Bank reference', displayname: 'Bank reference' }, BankContact: { title: 'Contact name', displayname: 'Contact name' }, 'CustomContent4': { type: 'custom-content', content: '<h4>Please list all hazardous substances that will be on the premises and the approximate amounts</h4>' }, HazSub1: { title: 'Please list all hazardous substances that will be on the premises and the approximate amounts', placeholder: 'List all hazardous substances that will be on the premises and the approximate amount (line 1)', nolabel: true }, HazSub2: { title: 'Please list all hazardous substances that will be on the premises and the approximate amounts', placeholder: 'List all hazardous substances that will be on the premises and the approximate amount (line 2)', nolabel: true }, HazSub3: { title: 'Please list all hazardous substances that will be on the premises and the approximate amounts', placeholder: 'List all hazardous substances that will be on the premises and the approximate amount (line 3)', nolabel: true }, 'CustomContent5': { type: 'custom-content', content: '<h4>Please check one:</h4>' }, CorpCHK: { title: 'Corporate', displayname: 'Corporate' }, GPCHK: { title: 'General partner(s)', displayname: 'General partner(s)' }, IndivCHK: { title: 'Individual(s) signing the lease', displayname: 'Individual(s) signing the lease' }, 'CustomContent6': { type: 'custom-content', content: '<h4>First person</h4>' }, Fullname1: { title: 'Full name', displayname: 'Full name', placeholder: 'First / M.I./ Last Name' }, Title1: { title: 'Title', displayname: 'Title', placeholder: 'Title' }, SSN1: { title: 'Social Security number (SSN)', displayname: 'Social Security number', placeholder: 'SSN (9 digits)' }, Married1CHK: { title: 'Married', displayname: 'Married' }, Single1CHK: { title: 'Single', displayname: 'Single' }, DL1: { title: 'Driver License', displayname: 'Driver License', placeholder: 'Driver License' }, DLState1: { title: 'Driver License state', displayname: 'Driver License state', placeholder: 'Driver License state' }, 'CustomContent7': { type: 'custom-content', content: '<h4>Name of spouse</h4>' }, SpFullname1: { title: 'Full name', displayname: 'Full name of spouse', placeholder: 'First / M.I. / Last Name' }, SpSSN1: { title: 'Social Security number (SSN)', displayname: 'Social Security number', placeholder: 'SSN (9 digits)' }, 'CustomContent8': { type: 'custom-content', content: '<h4>Current landlord/mortgage company</h4>' }, LL1: { title: 'Company name', displayname: 'Company name', placeholder: 'Company name' }, LLPhone1: { title: 'Company phone number', displayname: 'Phone number', placeholder: 'Phone number' }, ResAddr1A: { title: 'Current residence address', displayname: 'Current residence address', placeholder: 'Current residence address (line 1)' }, ResAddr1B: { title: 'Current residence address', displayname: '', placeholder: 'Current residence address (line 2)' }, HmPhone1: { title: 'Home phone', displayname: 'Home phone', placeholder: 'Home phone' }, Years1: { title: 'Years at this location', displayname: 'Years at this location', placeholder: 'Years at this location', type: 'number', min: 0, max: 100 }, PrintName1: { title: 'Signed by (name)', displayname: 'Signed by (name)', placeholder: 'Signed by (name)' }, Title1a: { title: 'Signed by (title)', displayname: 'Signed by (title)', placeholder: 'Signed by (title)' }, SignedDate: { title: 'Signed date', displayname: 'Signed date', placeholder: 'Signed date', type: 'date', defaultvalue: new Date().toJSON().slice(0, 10) }, Fullname2: { hidden: true }, Title2: { hidden: true }, SSN2: { hidden: true }, Married2CHK: { hidden: true }, Single2CHK: { hidden: true }, DL2: { hidden: true }, DLState2: { hidden: true }, SpFullname2: { hidden: true }, SpSSN2: { hidden: true }, LL2: { hidden: true }, LLPhone2: { hidden: true }, ResAddr2A: { hidden: true }, ResAddr2B: { hidden: true }, HmPhone2: { hidden: true }, Years2: { hidden: true }, TradeRef1: { title: 'Trade references', displayname: 'Trade references', placeholder: 'Trade references (line 1)' }, TradeRef2: { title: 'Trade references', displayname: '', placeholder: 'Trade references (line 2)' }, TradeRef3: { title: 'Trade references', displayname: '', placeholder: 'Trade references (line 3)' }, PrintName2: { hidden: true }, Title2a: { hidden: true }, SignedDate2: { hidden: true } } }; let viewer = new DsPdfViewer("#viewer", options); // Add default sidebar panels viewer.addDefaultPanels(); // Configure toolbar buttons: viewer.toolbarLayout.viewer = { default: ['open', 'save', 'form-filler', '$navigation', '$split', 'text-selection', 'pan', '$zoom', '$fullscreen', 'print', 'title', 'about'], mobile: ['open', 'save', 'form-filler', '$navigation', 'title', 'about'], fullscreen: ['$fullscreen', 'open', 'save', 'form-filler', '$navigation', '$split', 'text-selection', 'pan', '$zoom', 'print', 'title', 'about'] }; viewer.applyToolbarLayout(); viewer.applyOptions(); viewer.onAfterOpen.register(function(args) { var fileName = viewer.fileName; if (fileName.indexOf('commercial-rental-application-form.pdf') !== -1) { viewer.options.formFiller = formFiller_RentalApplicationForm; viewer.showFormFiller(); } else { viewer.options.formFiller = {}; } }); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/commercial-rental-application-form.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Form Filler</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }