What You'll Build

A service quote form where the PDF content changes based on what services the customer selects. Only chosen services appear in the quote, with dynamic filenames that include the customer name and date.

Real-world use case: A customer selects house cleaning and window washing but not carpet cleaning. The PDF shows ONLY those two services with prices - no empty sections for unselected services.

What You'll Learn

Conditional sections using if/else in the PDF builder
Dynamic filenames with dates and customer data
Reading values from different field types (textbox, dropdown, checkbox)
Formatting dates for display in PDFs
Handling optional fields gracefully

⚡

Interactive Learning

Every code snippet below is fully editable! Try checking/unchecking different services in the form and watch the PDF update with only the selected items.

Use the play button to run different snippets, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Dynamic Filename with Date

Let's make the filename dynamic by including today's date. This helps organize quotes chronologically.

💡 Tip:

Use JavaScript's new Date() to get the current date. The toISOString().split('T')[0] pattern gives you a clean YYYY-MM-DD format perfect for filenames.

Step 2: Including Customer Name in Filename

Make filenames even more useful by including the customer name. We need to sanitize it to remove special characters.

💡 Tip:

Create a "safe" version of the name by: converting to lowercase, replacing non-alphanumeric chars with hyphens, removing duplicate hyphens, and trimming leading/trailing hyphens. Result: "Sarah Johnson" becomes "sarah-johnson".

Step 3: Showing Only Selected Services

Now the magic! Use if statements to only add services that were actually selected. No more empty sections!

💡 Tip:

Use form.checkbox('cleaning')?.value() to get whether a checkbox is checked. Wrap each service in an if statement - it only appears in the PDF if selected.

💡 Tip:

The outer if checks if ANY service is selected before creating the section. This prevents an empty "Selected Services" section.

Step 4: Calculating the Total

Add up the prices of selected services to show a total estimate. Store prices in an object for easy reference.

💡 Tip:

Keep prices in a prices object so they're easy to update. Loop through selected services to calculate the total, then format it as currency.

Step 5: Handling Optional Fields

The "Special Instructions" field is optional. Only show it in the PDF if the customer actually wrote something.

💡 Tip:

Use ?.trim() to remove whitespace, then check if (notes.length > 0) before creating the section. This prevents empty sections from appearing.

💡 Tip:

Also add a fallback message when no services are selected - this provides better UX than showing nothing.

Step 6: Complete Dynamic Quote

Time to polish! Add a formatted quote date, service count, footer with validity period, and terms & conditions.

💡 Tip:

Use toLocaleDateString() with options to format the date nicely for display: "January 7, 2025" is much friendlier than "2025-01-07".

💡 Tip:

Count selected services with .filter(Boolean).length on an array of checkbox values. Display this alongside the total for transparency.

Try It Yourself

Challenge 1: Add a "Priority Service" checkbox that adds a $50 rush fee when selected
Challenge 2: Add a dropdown for property size (Small/Medium/Large) that multiplies prices
Challenge 3: Show a different header subtitle based on total amount ("Quick Clean" vs "Deep Clean Package")

What's Next

You've mastered dynamic content! In the next tutorial, you'll learn how to create multi-page documents with page breaks and organized sections.

Continue to Multi-Page Documents

Key concepts learned:

Dynamic filenames with new Date() and customer data
Conditional sections with if statements
Reading checkbox values with checkbox('id')?.value()
Sanitizing strings for filenames
Handling optional/empty fields gracefully
Formatting dates for display vs. filenames