Skip to content
Team Forms Team Forms Docs

SketchPad Component

The SketchPad component lets form builders upload an image or PDF for responders to mark up. Images appear directly on the form; PDFs appear in a scrollable preview where you can read every page. Click an image or choose Open PDF to open the editor.

PDF previews fill the available width by default, and image previews are 200 pixels wide. Set Width to a pixel value or percentage to change this. Images keep their proportions; PDFs stay in a scrollable panel.

Image previews show a pencil button on hover or keyboard focus. On mobile, tap the image to reveal it, then tap the pencil to edit. Read-only images show an eye button for viewing.

🔧 How it Works

Section titled “🔧 How it Works”

  1. Add the SketchPad component to your form from the component library.

  2. Upload an image or PDF of up to 5 MB (e.g., a floorplan, diagram, map, or product photo). The file is stored in the form and copied into each response, so smaller files keep forms quick to load.

  3. When a user fills out the form, they can click the image or choose Open PDF below the PDF preview to open the editor.

  4. Responders can add markup. PDFs support drawing, text, highlights, circles, and arrows across all pages, using the colour and line-width controls.

  5. Choose Done to save the markup to the response. PDFs stay as PDF files, and their annotations can be edited again by reopening the sketchpad. The marked-up image or PDF is uploaded to the team’s SharePoint document library when the response syncs.

Read-only responses open PDFs for viewing without editing. PDFs that restrict markup can still be viewed and saved unchanged by choosing Done.

Before using PDF sketchpads offline, open the form and view each PDF page while connected. Additional fonts and image decoders are downloaded as needed and cached on your device for offline use. Saved markup that has already synced to SharePoint needs a connection to open; while offline, the preview shows its first page instead.

Generated response PDFs list PDF sketchpads as filenames with file sizes, linking to the marked-up file in SharePoint after syncing. Before syncing, the filename appears without a link. No PDF thumbnail or separate original PDF is included. Image sketchpads still appear in the generated response PDF.

📌 Common Use Cases

Section titled “📌 Common Use Cases”

  • Site inspections (e.g., circle problem areas on a photo)

  • Product feedback (e.g., mark changes on a design)

  • Incident reporting (e.g., indicate damaged areas)

  • Training evaluations (e.g., annotate machinery parts or layouts)

Section titled “Related articles”