ActiveReports 19 User Guide
Samples / Web Samples / WebDesigner Samples / WebDesigner Report Parts
In This Topic
WebDesigner Report Parts
In This Topic

This sample demonstrates configuring and using the report parts in ActiveReports WebDesigner with an ASP.NET Core back-end.

Note: To run this sample, you must have

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.
Report Parts in Web Designer



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.

Copy Code 
<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.


Report Parts in Web Designer

 

See Also

Developers

Report Parts