window.onload = function(){ //GcPdfViewer.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: "/documents-api-pdfviewer/demos/product-bundles/build/gcpdfviewer.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 GcPdfViewer("#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("/documents-api-pdfviewer/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="/documents-api-pdfviewer/demos/product-bundles/build/gcpdfviewer.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }