WebDesigner Report Parts
This sample demonstrates configuring and using the report parts in ActiveReports WebDesigner with an ASP.NET Core back-end.
type=note
Note: To run this sample, you must have
- Visual Studio 2022 (version 17.0 or later)
- .NET 6.0 SDK
- .NET Core Hosting Bundle (for deployment to IIS)
Sample Location
https://github.com/activereports/WebSamples19/tree/main/WebDesigner_ReportParts
Details
Upon running the sample, you can see a customized web designer with almost all standard UI removed and the report libraries panel available and opened by default.
To observe how a library is created, go to the File menu > libraries and open 'Treadstone.rdlx' report. This is a multi-section report with three sections Cards, Tables, and Charts. All report parts that are available in this library can be viewed from the Report Parts property of the report.
The following image shows a textbox configured as a report part with its properties visible in the Properties panel.
The 'Treadstone' library contains report parts as shown in the table below. The table describes the custom property of each report part, the original report item linked to the report part, and the expression used for referencing the report part properties into the report item's property.
| Report Part | Custom properties of the Report Part* | Linked Original Report Item | Corresponding Report Item property and the Expression |
|---|---|---|---|
| Logo | BorderColor | Image | Border > Color > Default {PartProperties!BorderColor.Value} |
| BorderStyle |
Border > Style > Default {PartProperties!BorderStyle.Value} |
||
| BorderWidth | Border > Width > Default {PartProperties!BorderWidth.Value} |
||
| Copyright | Color |
TextBox | Text > Color {PartProperties!Color.Value} |
| FontFamily |
Text > Font Family {PartProperties!FontFamily.Value} |
||
| FontSize |
Text > Font Size {PartProperties!FontSize.Value} |
||
| FontStyle | Text > Font Style {PartProperties!FontStyle.Value} |
||
| Contacts | Color |
Container. The properties are applied on the text boxes it contains. | Text > Color {PartProperties!Color.Value} |
| FontFamily |
Text > Font Family {PartProperties!FontFamily.Value} |
||
| FontSize |
Text > Font Size {PartProperties!FontSize.Value} |
||
| FontStyle | Text > Font Style {PartProperties!FontStyle.Value} |
||
| salesByMonth | Title | Chart | Select Chart's Header > Caption {PartProperties!Title.Value} |
| BackgroundColor | Background >Color {PartProperties!BackgroundColor.Value} |
||
| totalSales | Caption | FormattedText | The corresponding expressions are used in the 'Html' property as shown. <html><body style='margin:0px'><center> <p style='color:{PartProperties!ValueColor.Value}; font-family:"{PartProperties!ValueFont.Value}";font-size:{PartProperties!ValueFontSize.Value}; font-style:{PartProperties!ValueFontStyle.Value}'>{FormatCurrency(Sum(SALES))}</p> <p style='color:{PartProperties!CaptionColor.Value};font-family:"{PartProperties!CaptionFont.Value}"; font-size:{PartProperties!CaptionFontSize.Value};font-style:{PartProperties!CaptionFontStyle.Value}'>{PartProperties!Caption.Value}</p> </center></body></html> |
| ValueFont | |||
| ValueFontSize | |||
| ValueFontStyle | |||
| salesPerCategoryChart | Title | Chart | Select Chart's Header > Caption {PartProperties!Title.Value} |
| BackgroundColor | Background > Color {PartProperties!BackgroundColor.Value} |
||
| SalesTable | HeaderTextColor | Tablix | Select Table Header's TextBox: Text > Color {PartProperties!HeaderTextColor.Value} |
| HeaderBgColor |
Background > Color {PartProperties!HeaderBgColor.Value} |
||
| HeaderBorderColor | Border > Color > Default {PartProperties!HeaderBorderColor.Value} |
*For complete list of custom properties in each report part, check the sample.
Try drag-and-dropping report parts from the Libraries panel to the report body, and modifying the custom properties, and previewing the result.
