Tag Archives: Reporting

Video Tutorial: Creating Your First Crosslight App

For those of you new to cross-platform development, fear not. Crosslight is here to the rescue. Building cross-platform apps has never been easier using Crosslight. Crosslight is a cross-platform toolset that helps you to create cross-platform apps using C#, leveraging the MVVM pattern. If you haven’t got a copy of Crosslight, grab one here!

To help you get started, we have just released a new video tutorial that will help you to create your first Crosslight app using the Crosslight Project Wizard and run the project on all four platforms: iOS, Android, Windows Phone and Windows Store.

Find out more about Crosslight at our Developer Center. Also checkout our newbie-proof Crosslight tutorial. If you have any questions, feel free to post it in our community forum, or drop us a mail.

Video Tutorial: Getting Started with Crosslight Reporting Service

Crosslight 2 provides a capability to view enterprise reports across multiple platforms including iOS, Android, Windows Phone and Windows 8. The reporting services is built upon the company’s flagship reporting, ClientUI Reporting, to produce identical reports across multiple platforms. You can quickly add reporting feature to your apps since Crosslight has encapsulated all of the functionality required to display the reports on multiple platforms natively. Check out the following video to learn how to configure the report server and display the report on Crosslight apps, which runs on four major platforms: iOS, Android, Windows Phone 8 and Windows Store.

You can also get the source code for this video from our new Git server: http://git.intersoftpt.com/projects/CROS-SUPP/repos/simple-reporting/browse. To learn more about Crosslight reporting service and how it works, see Viewing Enterprise Reports. If you have any questions, feel free to post it in our community forum, or drop us a mail.

Coming in 2014 R1: ClientUI Reporting 2.0

Ever since we released the first version of ClientUI Reporting in 2013 R1, we continuously shaped up the entire reporting lineup with significant enhancements and new exciting features. With our fast-pacing sprint-based development process, we are very excited to announce that the next major release, ClientUI Reporting 2.0, will be available in 2013 R2. We will ship it along with a host of professionally-designed business report samples as well as comprehensive documentation.

In this blog post, I will share some interesting features that will be available in the upcoming release.

Sub Report

We have received tremendous requests asking whether sub report will be supported in ClientUI Reporting. Today I’m pleased to announce that sub report will be included as built-in report components in 2013 R2.

Sub-Report is Available in 2013 R2

As one of the most anticipated features, sub report allows you to embed one or more reports into a single report document. This can be useful when there is a particular report structure which have a consistent appearance and functionality that needs to be included many times in a report. In addition, you can also use it to easily create side-by-side reports similar to the screenshot below.

Create Side by Side Report using Sub-Report

Entity Definitions

I expect, at a glance you must be wondering what Entity Definitions is? What is it for? Is it related to the data definitions in a Report Document? Yes, it’s close enough. But before discussing furthermore, I will give some flashback on how do we define data definitions in a report previously.

Suppose you need to display sales in 2012 and sales in 2013 separately inside a report. The generated report XAML will look like the following.

<DataDefinitions>
    <DataDefinitions.ObjectDataSources>

        <ObjectDataSource Name="Sales2012" Guid="ab5ee58b31fd440aa34aaec8735abf29">
            <ObjectDataSource.PropertyDefinitions>
                <PropertyDefinition Name="OrderID" Type="System.Int32"/>
                <PropertyDefinition Name="ShippedDate" Type="System.DateTime"/>
                <PropertyDefinition Name="Sales" Type="System.Decimal"/>
            </ObjectDataSource.PropertyDefinitions>
            <ObjectDataSource.MemberParameters>
                <MemberParameter Name="Year" Type="System.Int32" Value="2012"/>
            </ObjectDataSource.MemberParameters>
        </ObjectDataSource>

        <ObjectDataSource Name="Sales2013" Guid="a8a466e9180a4aa88bd0d37567e58783">
            <ObjectDataSource.PropertyDefinitions>
                <PropertyDefinition Name="OrderID" Type="System.Int32"/>
                <PropertyDefinition Name="ShippedDate" Type="System.DateTime"/>
                <PropertyDefinition Name="Sales" Type="System.Decimal"/>
            </ObjectDataSource.PropertyDefinitions>
            <ObjectDataSource.MemberParameters>
                <MemberParameter Name="Year" Type="System.Int32" Value="2013"/>
            </ObjectDataSource.MemberParameters>
        </ObjectDataSource>

    </DataDefinitions.ObjectDataSources>
</DataDefinitions>

If you look into the above code, you can notice definition redundancy in the data sources. In the next version, we’ve greatly improved our reporting architecture in our mission to reduce report size and increase overall performance. Thanks to the new Entity Definitions, the data sources definition look much cleaner. And the good thing is, it’s highly reusable. See the following code.

<DataDefinitions>
    <DataDefinitions.EntityDefinitions>
        <EntityDefinition Guid="e68bf3c60eb74f019a5f7b3e5c5fbb44">
            <EntityDefinition.PropertyDefinitions>
                <PropertyDefinition Name="OrderID" Type="System.Int32"/>
                <PropertyDefinition Name="ShippedDate" Type="System.DateTime"/>
                <PropertyDefinition Name="Sales" Type="System.Decimal"/>
            </EntityDefinition.PropertyDefinitions>
        </EntityDefinition>
    </DataDefinitions.EntityDefinitions>

    <DataDefinitions.ObjectDataSources>

        <ObjectDataSource Name="Sales2012" Guid="ab5ee58b31fd440aa34aaec8735abf29" EntityGuid="e68bf3c60eb74f019a5f7b3e5c5fbb44">
            <ObjectDataSource.MemberParameters>
                <MemberParameter Name="Year" Type="System.Int32" Value="2012"/>
            </ObjectDataSource.MemberParameters>
        </ObjectDataSource>

        <ObjectDataSource Name="Sales2013" Guid="a8a466e9180a4aa88bd0d37567e58783" EntityGuid="e68bf3c60eb74f019a5f7b3e5c5fbb44">
            <ObjectDataSource.MemberParameters>
                <MemberParameter Name="Year" Type="System.Int32" Value="2013"/>
            </ObjectDataSource.MemberParameters>
        </ObjectDataSource>

    </DataDefinitions.ObjectDataSources>
</DataDefinitions>

With this improved architecture and design, it will effectively suppress the size of report document thus enhancing overall user experience.

Enhanced Table Cell

We have been intensively working to bring some great enhancements to the table component. You would love to see that our table now supports cell merging. As seen in the following screenshot, the table cells can be merged either horizontally or vertically. Furthermore, some new commands have been added to ribbon bar, allowing you to easily merge and split the cells.

Table Cell Merging

In addition, our table component also supports image and checkmark, allowing you to create truly appealing business reports. Definitely, you can easily customize it from the ribbon bar.

Designer Lock

Another interesting feature not to be missed is the ability to prevent end-user from editing the report document at runtime. It will ensure there is no changes can be made to report document at runtime. As can be seen in the screenshot below, all of editing commands is disabled while this feature is turned on.

Runtime Designer Lock

Not only for an entire report document, the designer lock can also be applied on specific pages, or on specific report components.

Custom Report Templates

While working with reports, sometimes you need to ensure consistency between each reports. In this case, it’s necessary to use report template to provide standard layout pattern. Some repetitive tasks while creating a new report can be skipped, so you can focus on the specific requirements of the new report. These tasks may include customizing page layout, defining data definitions, headers, footers, and also styling.

Custom Report Template

It’s easy to create a report template, you only need to create a new report which contains customized page layout, data definitions, headers, footers, and styles, then store it as a resources in your application.

That’s all for now. I hope you liked these enhancements and new features. As usual, feedback and comments are warmly welcomed.

Warm Regards,
Jack

Create a Simple Report with Intersoft ClientUI Reporting

In the previous posts, I’ve wrote about the overview and features of our new ClientUI reporting lineup. Now that we’ve released the Reporting lineup, you can download a copy of the new 2013 release here and test drive the much anticipated Reporting for yourself.

In this blog post, I will explain how to create a simple report using Intersoft Reporting. To get started, run the standalone Report Designer application which can be found in the Intersoft Premier Studio 2013 program group. The complete shortcut path can be found below.

C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Intersoft Premier Studio 2013 R1\WebUI Studio for Silverlight 5\Reporting

Once launched, you will see the Report Designer running in the browser that looks like the following:

Report Designer

Reporting is all about presenting data from a specific datasource. So before we started designing a report, let’s define the data source and related data definitions first.

Defining Data Definitions

Before performing data definitions tasks, it’s important to understand the ClientUI reporting data management concept. At the heart of the ClientUI reporting is the entity-based data source, which can be any objects – a simple POCO object or a complex domain model object. This means that it doesn’t coupled to any specific data providers. You can simply get the data the way you want and throw in into the report’s data source. The report viewer will take care the rest.

Back to the report designer. You can easily define data source by simply navigating to the Report Explorer tab, then click the AddDataSource button. This will launch a dialog to add a new data source. See the following illustration.

Define Data Definition

You need to specify the name and type of your data source. Actually there are 3 data source types you can use here, such as Entity (table), Method (Stored Procedure), or View. In this scenario, an Entity will be provided as a data source. Also don’t forget, you need to specify the properties owned by your data source, including it’s name and type.

Add Data Source

After added, now your Report Explorer tab will look like the following:

After Add Data Source

Designing the Report

Most functionalities you need to design a report can be easily accessed from the ribbon. From the ribbon, you can easily insert a title, logo, watermark, band, or report component into the design surface.

Design Ribbon Tab

First, let’s insert a ReportHeaderBand into the design surface. A report header will be printed once in a report, so it’s the best place for the report’s title or logo. You will notice that a visual adorner is attached to the left side of the band. The adorner allow you to re-positioning the band by using drag-drop. Besides that, you will also find a resize grip at the bottom side of the visual adorner. See the following screenshot.

Insert ReportHeaderBand

Next, insert the logo. Simply click the ‘Logo’ button and a file dialog will be appeared which require you to specify an image file. Then click the ‘Title’ and ‘Date & Time’ button to insert the report’s title and date. Suppose you need to customize it, you can done these easily from the property grid.

Insert Title

The next step is to display data in a report. Drag the data source which has been created before and drop it into the design surface. See the illustration below.

Drag Data Source

A dialog will be appeared, require you to specify which columns will be displayed in the report. Also you can define filter, sort, or group definitions in there by using drag-drop. See the following screenshot.

Create Data Band

Once the dialog is committed, a DataBand and it’s related band, such as HeaderBand, FooterBand, GroupHeaderBand, and GroupFooterBand, will be inserted automatically.

Auto Generated DataBand

Last, we will printed an image at the bottom of every report pages. In this scenario, a PageFooterBand will be used because page footer will be printed at the bottom of every pages.

Insert PageFooterBand

Insert an Image to the PageFooterBand, like the screenshot below.

Insert Image

Double click on the Image, then a dialog will be appeared and you need to provide the image source. See screenshot below.

Provide Image Source

After following those steps, your final report document will actually look like the following screenshot. Try to preview the report or open it using Intersoft ReportViewer, and don’t forget to save the report document for further usage.

Report Document

Displaying Report with Intersoft Report Viewer

In this section, we will open the saved report document using Intersoft Report Viewer. First, you need to create a simple Silverlight application. Then define the ReportViewer in your View like the following code:

<Intersoft:ReportViewer x:Name="ReportViewer"
                        ReportUri="{Binding ReportUri}"
                        ReportDefinition="{Binding ReportDefinition, Mode=TwoWay}"
                        ReportDataProvider="{Binding ReportDataProvider}"/>

Then provide the ViewModel. See the following code:

public class MainPageViewModel
{
   private Uri _reportUri;
   private ReportDefinition _reportDefinition;
   private ReportDataProvider _reportDataProvider;

   public Uri ReportUri
   {
      get { return _reportUri; }
      set
      {
         if (_reportUri!= value)
         {
            _reportUri= value;
            this.OnPropertyChanged("ReportUri");
         }
      }
   }

   public ReportDefinition ReportDefinition
   {
      get { return _reportDefinition; }
      set
      {
         if (_reportDefinition != value)
         {
            _reportDefinition = value;
            this.OnPropertyChanged("ReportDefinition");
         }
      }
   }  public ReportDataProvider ReportDataProvider
   {
      get { return _reportDataProvider; }
      set
      {
         if (_reportDataProvider != value)
         {
            _reportDataProvider = value;
            this.OnPropertyChanged("ReportDataProvider");
         }
      }
   }  public MainPageViewModel()
   {
      this.ReportUri = new Uri("Reports/SimpleReport.xaml", UriKind.Relative);
      this.ReportDataProvider = new NorthwindDataProvider();
   }
}

And don’t forget to define the report data provider. You need to derive it from ReportDataProvider class, and implement the ProvideData method. Make sure the provided data reflect the one which have been defined in your report document.

In this sample, we create a NorthwindDataProvider class which derives from the ReportDataProvider. The following code is provided for the sake of simplicity, you can obviously refactor it into a generic class and easily define the logic to get the data source using the preferred data service, i.e., WCF RIA Service or DevForce Service.

public class NorthwindDataProvider : ReportDataProvider
{
   List<Func<INotifyCompleted>> operations = new List<Func<INotifyCompleted>>();

   foreach (ObjectDataSource objectDataSource in reportDefinition.DataDefinitions.ObjectDataSources)
   {
      if (objectDataSource.IsRequired && !objectDataSource.IsLoaded)
      {
         Func<INotifyCompleted> op = this.GetQuery(reportDefinition, objectDataSource);
         if (op != null)
            operations.Add(op);
      }
   }

   Coroutine.StartParallel(operations, (op) => { this.MarkAsCompleted(); });
}

private Func<INotifyCompleted> GetQuery(ReportDefinition reportDefinition, ObjectDataSource objectDataSource, QueryDescriptor queryDescriptor = null)
{
   if (queryDescriptor == null)
      queryDescriptor = new QueryDescriptor();

   queryDescriptor.SuspendQueryChanged = true;

   if (objectDataSource.ParsedFilterDescriptors.Count > 0)
      queryDescriptor.FilterDescriptors.Add(objectDataSource.ParsedFilterDescriptors);

   queryDescriptor.SuspendQueryChanged = false;

   if (queryDescriptor.FilterDescriptors.Count > 0)
   {
      CompositeFilterDescriptorCollection collection = queryDescriptor.FilterDescriptors.OfType<CompositeFilterDescriptorCollection>().FirstOrDefault();
      List<FilterDescriptor> sorts = collection.OfType<FilterDescriptor>().Where(o => o.PropertyName == "SortBy").ToList();
      if (sorts != null && sorts.Count > 0)
      {
         foreach (FilterDescriptor sort in sorts)
         {
            queryDescriptor.SortDescriptors.Add(new SortDescriptor() { PropertyName = sort.Value.ToString() });     }

         queryDescriptor.FilterDescriptors.Remove(collection);
      }
   }

   Action<IEnumerable> initializeData = this.InitializeData(reportDefinition, objectDataSource.Name);

   switch (objectDataSource.Name)
   {
      case "Customer":
         queryDescriptor.SortDescriptors.Add(new SortDescriptor() { PropertyName = "CustomerID" });
         return () => this.DataManager.Customers.ExecuteAsync(queryDescriptor, initializeData);
   }

   return null;
}

private void AddDataSource(ReportDefinition reportDefinition, string objectDataSourceName, IEnumerable dataSource)
{
   if (!reportDefinition.DataSources.ContainsKey(objectDataSourceName))
      reportDefinition.DataSources.Add(objectDataSourceName, dataSource);
   else
      reportDefinition.DataSources[objectDataSourceName] = dataSource;
}

private Action<IEnumerable> InitializeData(ReportDefinition reportDefinition, string dataSourceName)
{
   Action<IEnumerable> action = (results) =>
   {
      this.AddDataSource(reportDefinition, dataSourceName, results);
   };

   return action;
}

Run the ReportViewer, and the result will look like the following screenshot.

Simple Report

Conclusion

In this post, I have explained how to create a simple report using Intersoft Report Designer and open it using Intersoft Report Viewer. Once you have the provider and ViewModel ready, you can rapidly create reports and present them in your application. Now feel free to try and make your own report. Should you find any difficulties or have any feedback, feel free to drop us a line in the comment box.

Warm Regards,
Jack

ClientUI Reporting is Coming in 2013 R1 – Part 2

As we are heading toward R1 release, you may expect to hear more about ClientUI Reporting. Continued from my previous post, I will expose some interesting features in our Report Designer which will ship along with the report viewer. With the built-in design tool, definitely you can create a stunning report in a short time without spend too much hard work. Our engineering team also have put so much thoughts on these, so that it has great usability and superior user experiences. Featuring industrial-standards user interface, definitely you will be more convenient with such a powerful and visually attractive design workspace.

Introducing Industry’s Most Advanced Report Designer

ClientUI Report Designer is built from the ground up with modern design workspace that emphasize on true WYSIWYG experience. Unlike traditional designers, ClientUI report designer features clutter-less surface that allows you to work with the report elements as if they were in an actual page. This means that you will not see any designer-related visual adorners getting in the way on the designer surface. Instead, we created gorgeous visual adorners on the left side of the report with distinguished colors allowing you easily recognize each report section defined in the page.

We streamlined the overall report authoring process by arranging most frequently accessed commands in three major workflows represented in the ribbon tab group: Design, Format and Arrange. The Design tab lets you easily insert new report elements, while the Format and Arrange tabs let you quickly beautify the report elements. Everything is thoughtfully designed so both end users and developers will find the report designer very intuitive and pleasant to be used. See the following screenshot for the visual details.

The industry's most intuitive report designer

As seen in the above image, the Report Explorer tab on the right will show the report’s hierarchy. Inside there, you can see the already defined data sources and parameters. All report components also will be listed here. In addition, you can also perform various operations, such as add, edit, or delete, for each data source or parameter.

Advanced Property Editing

Handling vary types of object with it’s specific editor is not an easy task. A report component has a lot of properties which is difference from each others. In this scenario, performance issue need to be considered. To overcome it without performance degradation, Report Designer employs the most advanced property editing control, UXPropertyGrid. The property grid features high-performance UI virtualization that allows blazing-fast properties listing and rendering when you select an object. See the following screenshot.

Advance Property Editing

Independent Data Source Provider

Discussing about a report, you must be aware about the data source. As stated before, there are literally no constraints about the data source you should use, so you can utilize any kinds of data. All you need here is only to define the data definitions. You can define it manually like the following illustration.

Add Data Source Manually

But it would be very inconvenient if you need to specify a lot of data definitions manually. Actually you can import the definitions from a generated WCF RIA or DevForce assembly, without specifying it one by one. See the following illustration.

Add Data Source from Assembly

Powerful Design Tool with Drag-Drop Functionality

Drag and drop is one of the key feature in report designer. Report designing task will become more easy and simple with this functionality introduced. Various complex actions, such as object positioning, object creation, data field sorting, and much more, which usually need 3 or more actions to perform it, can be achieved elegantly by using drag-drop. Thanks to ClientUI’s robust Drag-Drop Framework, so our teams can quickly provide fluid drag-drop capabilities for the Report Designer.

Drag-Drop Functionality

Precise Layouting with Guidance Ruler and Snap to Grid Feature

Layouting is the most important step while creating a report, which will affects the final result. For some scenario, guidance ruler will be very helpful, especially for object positioning. As you can see on the below screenshot, those rulers are placed on top and left side of the design surface. Besides that, you can also enable Snap-to-Grid feature, which allowed you to precisely resize or move objects to a specific location.

Precise Layouting with Ruler and Snap-to-Grid Feature

Create Report Efficiently using Smart Tag

To create a report fast and more efficiently, you can take advantage of using the smart tag. Actually the smart tag has been designed to display some actions which is basically needed in most business scenario. It can save your time a lot rather than browse it from the property list.

Work Efficiently Using Smart Tag

Undo/Redo Capability

Undo/Redo is a very useful feature in Report Designer. As the name explains, it allows you to undo/redo a number of recent actions. Suppose you accidentally delete an object or something else, these actions still can be reverted easily.

Preview Report at Design Time

Another important feature not to be missed is the ability to preview a report at design time, because the iterative process of perfecting a report is accomplished by moving back and forth between the Preview and Design section. Of course, the preview section will show the result exactly the same as when it is printed. See the screenshot below.

Report Preview in Design Time

Okay, I think it’s enough although there are still so much exciting stuff about the Report Designer. I’d love to hear if you have any comments, questions or feedback about our Report Designer. Thank you for reading and stay tuned for the next update.

Warm Regards,
Jack