Parent | Child | Previous | Next
 

Using the HTML Report Editor

This is a user guide for the HTML Report Editor. It focuses on what you do in the interface to build and preview reports.

New Html Report

  • The Xbasic editor opens in Bindings mode first.
  • Keep a sample report goal in mind (invoice, order list, summary, etc.).

Save Html Report

  • The Hamburger menu provides a 'Save' option to save the report definition in the project

Existing Html Report

  • The Hamburger menu provides a 'Load' option to pick an HTML report in the current project

Editor layout at a glance

The editor is organized into tabs. Most users work left-to-right through these:

  1. Bindings
  2. Mapping
  3. Files
  4. Stylesheet
  5. Layout
  6. Settings
  7. Preview
  8. View JSON

You can move between tabs at any time; they all work on the same report definition.

Typical workflow

Use this sequence for fastest results:

  1. In Bindings, connect data and load preview rows.
  2. In Mapping, shape and calculate the data for display.
  3. In Layout, design the report bands and place fields.
  4. In Stylesheet, refine fonts, spacing, borders, and colors.
  5. In Settings, adjust page size, orientation, and margins.
  6. In Preview, verify output and apply tweaks.
  7. In View JSON, inspect/copy the final definition when needed.
flowchart TD
    A[Open Editor] --> B[Bindings\nConnect and load data]
    B --> C[Mapping\nTransform and calculate]
    C --> D[Layout\nDesign report bands]
    D --> E[Stylesheet\nApply visual styling]
    E --> F[Settings\nSet page and margins]
    F --> G[Preview\nValidate output]
    G --> H{Looks correct?}
    H -- No --> C
    H -- Yes --> I[View JSON\nSave/Share definition]

Tab-by-tab guide

Bindings

Purpose: connect report data.

  • Choose SQL Connection source mode.
  • Select a connection.
  • Select a table or define/edit SQL for each list.
  • Use Test All to validate queries.
  • Use Load Preview Data to populate data for Mapping/Layout/Preview.

Tips:

  • If required parameters are shown, fill them before testing/loading.
  • If results look stale, reload preview data after any binding change.

Mapping

Purpose: transform raw data into report-ready data.

  • Review input data structure.
  • Add grouping rules when needed.
  • Add calculated fields/counters for totals or derived values.
  • Confirm transformed output before moving to Layout.

Use Mapping whenever display values differ from source fields.

Files

Purpose: manage report assets.

  • Upload images or supporting files.
  • Rename paths to keep file references clean.
  • Inspect files to confirm content.
  • Delete files you no longer use.

Use this for logos, icons, and any file referenced by template or styles.

Stylesheet

Purpose: control report styling.

  • Edit CSS directly in the stylesheet editor.
  • Use style preview to validate changes quickly.
  • Keep class names consistent with your layout HTML.

Recommended pattern:

  • Define reusable classes for titles, table headers, detail rows, and totals.

Layout

Purpose: design the report structure and content.

  • Work in report bands (header/detail/footer areas).
  • Switch between WYSIWYG and Source mode as needed.
  • Use formatting toolbar actions for text/table formatting.
  • Insert tables and bind fields to data.
  • Use right-click actions for context operations.

Practical advice:

  • Start simple: one clean detail table first, then add headers/footers.
  • Re-check Preview after each major layout change.

Settings

Purpose: define page output rules.

  • Set page size and orientation.
  • Configure margins.
  • Use custom width/height only when standard sizes do not fit.

Preview

Purpose: validate final appearance and behavior.

  • Review pagination and spacing.
  • Use selection mode to inspect/target elements.
  • Apply tweak changes, then undo or commit as needed.

Preview is your final quality check before publishing/exporting.

View JSON

Purpose: inspect or share full definition JSON.

  • Review the generated definition.
  • Copy/export when you need to store or transfer the design.

Common tasks

  1. Go to Files and upload the image.
  2. Go to Layout and insert/reference the image in a header band.
  3. Go to Preview and verify size and alignment.

Create totals

  1. Go to Mapping and add calculated fields or counters.
  2. Go to Layout and place the calculated value in footer/summary area.
  3. Go to Preview and confirm totals are correct.

Fix crowded output

  1. Go to Stylesheet and reduce font size/padding.
  2. Go to Settings and adjust margins/orientation.
  3. Go to Preview and check pagination again.

Troubleshooting (UI-focused)

  • No data appears in Layout/Preview
    • Return to Bindings and run Load Preview Data again.
  • Fields show blank values
    • Verify field names in Layout match output fields from Mapping.
  • Styles not applying
    • Confirm class names in Layout match class selectors in Stylesheet.
  • Preview does not look right after edits
    • Re-run data load in Bindings, then refresh Preview.

Best practices

  • Build incrementally: data first, then layout, then polish.
  • Keep calculations in Mapping rather than embedding complex logic in HTML.
  • Use reusable CSS classes to keep templates maintainable.
  • Validate often in Preview instead of making many changes at once.