Reporting layout

Reports are organized into bands. Page setup controls the printed document size, and report elements are positioned in measurement units suitable for print.

Page and bands

A report can contain multiple named design pages. Each page owns its page setup and its report header, page header, detail, report footer, and page footer bands. The designer provides page tabs for adding, duplicating, reordering, and deleting pages, while preview and PDF output render them in their defined order. A panel groups related elements so they can be positioned and moved as one container.

No provider settings defined.

Fields
Source Fields
Formula Fields
Running Total Fields
Special Fields
Functions
Additional Functions
Text
Math
Date and time
Aggregates
Operators
Arithmetic
Boolean
Comparisons
Control Structures
Item Formula
Description Select a field, function, or operator to insert it into the formula.
<Report Data="@invoice"
        Editable
        PreviewFormats="ReportPreviewFormat.Html | ReportPreviewFormat.Pdf">
    <ReportViewer PreviewFormat="ReportPreviewFormat.Html | ReportPreviewFormat.Pdf"
                  DefaultPreviewFormat="ReportPreviewFormat.Html"
                  AllowDownload
                  AllowPrint />
    <ReportDataSources>
        <ReportObjectDataSource Name="Invoice" Data="@invoice" />
    </ReportDataSources>
    <ReportPage Size="ReportPageSize.A4"
                Name="Invoice"
                Orientation="ReportOrientation.Portrait">
        <ReportHeader Name="Report header" Height="105">
            <ReportText Text="Invoice {Header.Number}" X="30" Y="18" Width="180" Height="24" FontSize="20" Bold FontColor="@ReportColors.Blue" />
            <ReportText Text="{Customer.Name}" X="30" Y="48" Width="240" Height="18" Bold />
            <ReportText Text="{Customer.Address}" X="30" Y="70" Width="300" Height="18" FontColor="@ReportColors.Gray" />
            <ReportLine Orientation="Orientation.Vertical" X="380" Y="20" Width="8" Height="54" Thickness="1" BorderColor="@ReportColors.Blue" />
            <ReportPanel X="405" Y="20" Width="120" Height="54" BorderColor="@ReportColors.Blue" BorderWidth="1" BorderStyle="ReportBorderStyle.Solid">
                <ReportText Text="REPORT HEADER" X="13" Y="19" Width="94" Height="18" Bold TextAlignment="TextAlignment.Center" FontColor="@ReportColors.Blue" />
            </ReportPanel>
        </ReportHeader>
        <ReportPageHeader Name="Page header" Height="35">
            <ReportText Text="Sku" X="30" Y="9" Width="75" Height="18" Bold />
            <ReportText Text="Description" X="120" Y="9" Width="210" Height="18" Bold />
            <ReportText Text="Qty" X="345" Y="9" Width="60" Height="18" Bold TextAlignment="TextAlignment.End" />
            <ReportText Text="Line total" X="420" Y="9" Width="90" Height="18" Bold TextAlignment="TextAlignment.End" />
        </ReportPageHeader>
        <ReportGroupHeader Name="Category group" Height="28" DataSource="Invoice.Lines" GroupBy="Category">
            <ReportText Text="Category: {Category}" X="30" Y="6" Width="240" Height="18" Bold FontColor="@ReportColors.Green" />
            <ReportLine X="30" Y="26" Width="480" Height="8" Thickness="1" BorderColor="@ReportColors.Green" />
        </ReportGroupHeader>
        <ReportDetail Name="Invoice lines" Height="30" DataSource="Invoice.Lines">
            <ReportField Field="Sku" X="30" Y="6" Width="75" Height="18" />
            <ReportField Field="Description" X="120" Y="6" Width="210" Height="18" />
            <ReportField Field="Quantity" Format="@ReportFormats.Number( 2 )" X="345" Y="6" Width="60" Height="18" />
            <ReportField Field="Total" Format="@ReportFormats.Currency()" X="420" Y="6" Width="90" Height="18" />
        </ReportDetail>
        <ReportFooter Name="Report footer" Height="60">
            <ReportLine X="30" Y="9" Width="480" Height="8" Thickness="1" />
            <ReportText Text="Report total" X="300" Y="24" Width="105" Height="18" Bold />
            <ReportField Field="Header.Total" Format="@ReportFormats.Currency()" X="420" Y="24" Width="90" Height="18" Bold FontColor="@ReportColors.Green" />
        </ReportFooter>
        <ReportPageFooter Name="Page footer" Height="30">
            <ReportText Text="Generated {PrintDate} - page {PageNumber} of {TotalPages}" X="30" Y="7" Width="300" Height="18" FontColor="@ReportColors.Gray" />
        </ReportPageFooter>
    </ReportPage>
    <ReportPage Name="Terms" Size="ReportPageSize.A4" Orientation="ReportOrientation.Portrait">
        <ReportHeader Name="Terms" Height="150">
            <ReportText Text="Invoice terms" X="30" Y="24" Width="240" Height="30" FontSize="20" Bold FontColor="@ReportColors.Blue" />
            <ReportText Text="Payment is due within 14 days. Include the invoice number with the transfer." X="30" Y="72" Width="480" Height="42" CanGrow="true" />
        </ReportHeader>
        <ReportPageFooter Name="Terms page footer" Height="30">
            <ReportText Text="Page {PageNumber} of {TotalPages}" X="390" Y="7" Width="120" Height="18" TextAlignment="TextAlignment.End" FontColor="@ReportColors.Gray" />
        </ReportPageFooter>
    </ReportPage>
</Report>

@code {
    private readonly InvoiceReportModel invoice = new()
    {
        Header = new()
        {
            Number = "INV-2026-014",
            Total = 2765.50m,
        },
        Customer = new()
        {
            Name = "Northwind Traders",
            Address = "One Portals Way, Twin Points WA, 98156",
        },
        Lines =
        [
            new() { Category = "Services", Sku = "SRV-001", Description = "Implementation workshop", Quantity = 1, Total = 640.50m },
            new() { Category = "Services", Sku = "SUP-003", Description = "Priority support", Quantity = 1, Total = 100.00m },
            new() { Category = "Licenses", Sku = "LIC-010", Description = "Reporting module license", Quantity = 2, Total = 500.00m },
            new() { Category = "Licenses", Sku = "LIC-020", Description = "PDF export add-on", Quantity = 5, Total = 1525.00m },
        ],
    };

    private sealed class InvoiceReportModel
    {
        public InvoiceHeaderModel Header { get; set; }

        public InvoiceCustomerModel Customer { get; set; }

        public List<InvoiceLineModel> Lines { get; set; } = [];
    }

    private sealed class InvoiceHeaderModel
    {
        public string Number { get; set; }

        public decimal Total { get; set; }
    }

    private sealed class InvoiceCustomerModel
    {
        public string Name { get; set; }

        public string Address { get; set; }
    }

    private sealed class InvoiceLineModel
    {
        public string Category { get; set; }

        public string Sku { get; set; }

        public string Description { get; set; }

        public decimal Quantity { get; set; }

        public decimal Total { get; set; }
    }
}

Panels

A <ReportPanel> is a positioned container for other report elements. Child coordinates are relative to the panel, and elements can be moved into or out of the panel in the designer.

Layout table

Tables are layout containers for aligning other report elements. They do not repeat data by themselves.

No provider settings defined.

Fields
Source Fields
Formula Fields
Running Total Fields
Special Fields
Functions
Additional Functions
Text
Math
Date and time
Aggregates
Operators
Arithmetic
Boolean
Comparisons
Control Structures
Item Formula
Description Select a field, function, or operator to insert it into the formula.
<Report Data="@invoice"
        Editable
        PreviewFormats="ReportPreviewFormat.Html | ReportPreviewFormat.Pdf">
    <ReportViewer PreviewFormat="ReportPreviewFormat.Html | ReportPreviewFormat.Pdf"
                  DefaultPreviewFormat="ReportPreviewFormat.Html" />
    <ReportDataSources>
        <ReportObjectDataSource Name="Invoice" Data="@invoice" />
    </ReportDataSources>
    <ReportPage Name="Invoice">
        <ReportHeader Name="Invoice header" Height="150">
            <ReportText Text="Layout table invoice" X="30" Y="18" Width="240" Height="24" FontSize="20" Bold FontColor="@ReportColors.Blue" />
            <ReportTable X="30" Y="55" Width="495" Height="72">
                <ReportTableRow Height="24">
                    <ReportTableCell>
                        <ReportText Text="Customer" Bold />
                    </ReportTableCell>
                    <ReportTableCell ColumnSpan="2">
                        <ReportText Text="{Customer.Name}" />
                    </ReportTableCell>
                    <ReportTableCell>
                        <ReportText Text="Invoice" Bold />
                    </ReportTableCell>
                    <ReportTableCell>
                        <ReportText Text="{Header.Number}" />
                    </ReportTableCell>
                </ReportTableRow>
                <ReportTableRow Height="24">
                    <ReportTableCell>
                        <ReportText Text="Address" Bold />
                    </ReportTableCell>
                    <ReportTableCell ColumnSpan="2">
                        <ReportText Text="{Customer.Address}" />
                    </ReportTableCell>
                    <ReportTableCell>
                        <ReportText Text="Issued" Bold />
                    </ReportTableCell>
                    <ReportTableCell>
                        <ReportField Field="Header.IssuedAt" Format="@ReportFormats.Date()" />
                    </ReportTableCell>
                </ReportTableRow>
                <ReportTableRow Height="24">
                    <ReportTableCell>
                        <ReportText Text="Tax number" Bold />
                    </ReportTableCell>
                    <ReportTableCell ColumnSpan="2">
                        <ReportText Text="{Customer.TaxNumber}" />
                    </ReportTableCell>
                    <ReportTableCell>
                        <ReportText Text="Total" Bold />
                    </ReportTableCell>
                    <ReportTableCell>
                        <ReportField Field="Header.Total" Format="@ReportFormats.Currency()" Bold FontColor="@ReportColors.Green" />
                    </ReportTableCell>
                </ReportTableRow>
            </ReportTable>
        </ReportHeader>
        <ReportPageHeader Name="Line headers" Height="32">
            <ReportText Text="Sku" X="30" Y="8" Width="75" Height="18" Bold />
            <ReportText Text="Description" X="120" Y="8" Width="210" Height="18" Bold />
            <ReportText Text="Qty" X="345" Y="8" Width="60" Height="18" Bold TextAlignment="TextAlignment.End" />
            <ReportText Text="Total" X="420" Y="8" Width="90" Height="18" Bold TextAlignment="TextAlignment.End" />
        </ReportPageHeader>
        <ReportDetail Name="Invoice lines" Height="30" DataSource="Invoice.Lines">
            <ReportField Field="Sku" X="30" Y="6" Width="75" Height="18" />
            <ReportField Field="Description" X="120" Y="6" Width="210" Height="18" />
            <ReportField Field="Quantity" Format="@ReportFormats.Number( 2 )" X="345" Y="6" Width="60" Height="18" />
            <ReportField Field="Total" Format="@ReportFormats.Currency()" X="420" Y="6" Width="90" Height="18" />
        </ReportDetail>
    </ReportPage>
</Report>

@code {
    private readonly InvoiceReportModel invoice = new()
    {
        Header = new()
        {
            Number = "INV-2026-021",
            IssuedAt = new DateTime( 2026, 6, 17 ),
            Total = 1240.50m,
        },
        Customer = new()
        {
            Name = "Northwind Traders",
            Address = "One Portals Way, Twin Points WA, 98156",
            TaxNumber = "NW-45821",
        },
        Lines =
        [
            new() { Sku = "SRV-001", Description = "Implementation workshop", Quantity = 1, Total = 640.50m },
            new() { Sku = "LIC-010", Description = "Reporting module license", Quantity = 2, Total = 500.00m },
            new() { Sku = "SUP-003", Description = "Priority support", Quantity = 1, Total = 100.00m },
        ],
    };

    private sealed class InvoiceReportModel
    {
        public InvoiceHeaderModel Header { get; set; }

        public InvoiceCustomerModel Customer { get; set; }

        public List<InvoiceLineModel> Lines { get; set; } = [];
    }

    private sealed class InvoiceHeaderModel
    {
        public string Number { get; set; }

        public DateTime IssuedAt { get; set; }

        public decimal Total { get; set; }
    }

    private sealed class InvoiceCustomerModel
    {
        public string Name { get; set; }

        public string Address { get; set; }

        public string TaxNumber { get; set; }
    }

    private sealed class InvoiceLineModel
    {
        public string Sku { get; set; }

        public string Description { get; set; }

        public decimal Quantity { get; set; }

        public decimal Total { get; set; }
    }
}

Lines

Line elements use X and Y for placement, Width and Height for the selectable element box, and Thickness for the centered stroke width in points. Set Orientation to Orientation.Horizontal or Orientation.Vertical to control the direction of the line.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

On this page