ActiveReports 18 .NET Edition
Developers / Report Parts
In This Topic
    Report Parts
    In This Topic

    Introduction

    ActiveReports.NET includes the web designer component that you can integrate into your web-application to allow end-users to create and modify reports. The web designer covers most of the functionality of the VS.NET integrated designer and the standalone report designer; it allows configuring data binding, adding report items, and setting their properties. However, end-users of your application might not have extensive knowledge of data binding, report items, and surrounding topics. To streamline the user experience, ActiveReports.NET offers the Report Parts feature. Report Parts are basically pre-configured report items that end-users could drag-and-drop into a report body and customize further. The available customization properties are also defined in a report part.


    Web Designer with part item added

     

    Report Libraries

    A Report Library is a report that contains one or more Report Parts. You can build multiple report libraries for different user groups. If an end-user adds a report part to a target report, then it includes a link to the corresponding report library. You can then modify report parts definitions within a report library, and modifications will be automatically picked up for all target reports that use these report parts. Note that the data sourcesdatasets, and parameters are copied to a target report. Hence, modifying these items in the report library won’t immediately affect the target reports.

    Creating Report Libraries

    To create a report library, you can create a new or open an existing RDLX Report in the standalone designer application, or in the VS.NET integrated designer. Once you decided which report items should be exposed as report parts, you can initialize a new report part using the following methods:

     

    As the result of these actions, the Exported Report Parts dialog appears.
    Exported Report Parts Dialog Settings

    If you open the Export Report Parts dialog via the context menu of an existing report item, the new report part linked to that report item will be automatically created. In all other cases, you can add report parts manually. Each report part exposes the following properties:

    After defining a custom property, you can refer to its value by using the PartProperties collection. For example, if you have defined the 'BackColor' custom property in a report part, you can set the Background Color of a report item to the =PartProperties.BackColor.Value expression. The custom properties for all report parts are available via the expression editor.

    Report Part Property in Expresstion Editor

     

    Integrating Report Libraries

    After creating a report library and saving it (it is just an RDLX report), you can save it within the resources of a web-application that uses the web designer. The recommended way is to keep the report libraries the same way you keep other reports – in the file system or a database. Then you can list the report libraries that should be available for end-users via the ReportPartsSettings API. Here is the sample of code:

    Index.html
    Copy Code
    <html lang="en">
    <head>
        @*get these files from the installation location for the package: \node_modules\@mescius\activereportsnet-designer\dist*@
        <link rel="stylesheet" href="web-designer.css" />
        <script src="web-designer.js"></script>
    </head>
    <body>
        <div id="web-designer-host">
        </div>
    <script>
            GrapeCity.ActiveReports.Designer.create('#web-designer-host', {
                rdlx: {
                    reportParts: {
                        enabled: true,                  
                        libraries: [{
                            name: 'Sales',
                            path: 'Libraries/Lib_Sales.rdlx'
                        },
                        {
                            name: 'Marketing',
                            path: 'Libraries/Lib_Marketing.rdlx'
                        }]
                    }
                }
            });
        </script>
    </body>
    </html>    
    

                
    After running the application, the web designer will have the Libraries' panel that lists available libraries and the report parts. End-users will be able to drag-and-drop the report parts, modify the custom properties. Upon previewing a report, the report parts will be rendered according to its definition with the customization applied.

    Report Parts Sample

    You can download the example of report parts usage from the ActiveReports GitHub repository.  

    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 the report parts present in 'Treadstone' library in the Exported Report Parts dialog and the properties set for one of the report part in the Report Part Properties dialog, in desktop designer.

    Report Parts in Desktop 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 (in WebDesigner)
    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