A workspace organized into three areas

Duplicate, delete, align left, align top, show grid, and snap-to-grid commands complete a workflow similar to a traditional visual designer.

Demo architecture

The WebView2 and PowerBuilder interaction loop

uo_lienzo_pdf.of_mostrar_diseno loads the document produced by the model:

If Len(as_html) = 0 Then Return
This.NavigateToString(as_html)

When the browser sends a message, WebMessageReceived uses JSONParser, retrieves the geometry, and triggers ue_campo_cambiado. The main window decides whether to select the field or update its position and dimensions.

The model stays independent from the user interface

nvo_formulario_pdf keeps an array of nvo_campo_pdf references. Adding a control creates the appropriate descendant; duplication produces a field copy; deletion reorganizes the collection; and alignment operations apply a shared coordinate.

Grid behavior also lives in the model. of_ajustar_valor rounds a coordinate to the configured interval, and of_ajustar_campo applies that rule to position and dimensions. These rules can therefore survive a future replacement of the visual canvas.

Portable, database-free JSON projects

The design is saved locally with JSONGenerator and loaded with JSONParser. Files use UTF-8 to preserve accents and special characters correctly.

{
"document": {
"pageSize": "A4",
"orientation": "Portrait",
"showGrid": true,
"snapToGrid": true,
"gridSize": 10
},
"fields": [
{
"type": "text",
"name": "customer_name",
"x": 55,
"y": 95,
"width": 350,
"height": 30,
"required": true
}
]
}

This approach makes it easy to save templates, version them with Git, share them with another team, or generate multiple documents without installing a database engine.

How the design becomes an interactive PDF

nvo_generador_pdf.of_generar_pdf creates a PDFDocument and a PDFPage. It then iterates over the fields and delegates each type to a short, focused function.

lpdf_campo = Create PDFFormFieldText
lpdf_campo.Tooltip = anv_campo.is_nombre + " - " + anv_campo.is_etiqueta
lpdf_campo.CurrentValue = anv_campo.is_valor_predeterminado
of_aplicar_geometria(lpdf_campo, anv_campo)
ll_resultado = apdf_pagina.AddContent(lpdf_campo)

Appeon's official documentation describes the form-field family added to PDF Builder and provides examples for the PDF objects.

Preview, portability, and final generation

The Preview button creates a temporary file, keeps a single viewer instance, and navigates the WebBrowser to the local URI. The Generate final PDF button lets the user select the permanent output location.

The executable sources contain no absolute paths from the development workstation. The temporary path is resolved at runtime and has a fallback based on the current directory. JSON projects and final PDF files use user-selected locations.

How to test the demo

1. Open demo_disenador_pdf.pbw with PowerBuilder 2025 R2.
2. Run the demo_disenador_pdf.pbt target.
3. Add a control from the toolbox.
4. Drag it across the page or use the orange handle to resize it.
5. Edit its properties and click Apply changes.
6. Save and reload the JSON project.
7. Open the preview and test the PDF fields.
8. Generate the final document in the desired location.

Use cases and extension opportunities

The demo is a practical reference for applications that need configurable forms: case files, requests, inspections, customer records, consent forms, or internal documents. Separating model, canvas, and generator makes it possible to add multiple pages, undo/redo, templates, validation rules, fonts, colors, more actions, and batch generation.