Intersoft Solutions Corporate Blog » Reporting

Video Tutorial: Creating Your First Crosslight App

Nicholas Lie — Tue, 05 Aug 2014 13:56:53 +0000

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

Nicholas Lie — Wed, 18 Jun 2014 16:24:20 +0000

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

jackysite — Wed, 20 Nov 2013 12:41:53 +0000

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.

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.

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.

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.

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.

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.

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.

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

jackysite — Wed, 11 Sep 2013 10:38:17 +0000

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:ProgramDataMicrosoftWindowsStart MenuProgramsIntersoft Premier Studio 2013 R1WebUI Studio for Silverlight 5Reporting

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

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.

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.

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

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.

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.

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.

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.

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.

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

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 an Image to the PageFooterBand, like the screenshot below.

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

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.

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:

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> operations = new List>();

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

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

private Func 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().FirstOrDefault();
      List sorts = collection.OfType().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 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 InitializeData(ReportDefinition reportDefinition, string dataSourceName)
{
   Action action = (results) =>
   {
      this.AddDataSource(reportDefinition, dataSourceName, results);
   };

   return action;
}

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

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

jackysite — Thu, 01 Aug 2013 01:56:28 +0000

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.

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.

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.

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.

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.

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.

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.

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.

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

ClientUI Reporting is Coming in 2013 R1

jackysite — Tue, 21 May 2013 05:04:55 +0000

As announced in our roadmap here, we’re going to introduce new major lineup for Silverlight and WPF in the coming release. A standalone reporting product is something that we’ve been working intensively since the past year. Designed from the ground-up, ClientUI reporting is a full-fledged XAML reporting engine which includes a powerful C# style scripting support for the most demanding business reports.

Our development team have put so much hard work on the new breed of reporting solution for Silverlight and WPF, so that it has the power and flexibility you need to produce great-looking reports. It will also feature blazing-fast rendering performance, great usability and superior user experiences.

In this blog post, I will share the high level overview of the reporting’s uniqueness and its key features.

XAML-based Report Engine

Creating a business report using Intersoft reporting tools is definitely easy. It will be very familiar for Silverlight/WPF developers and won’t spend too much effort to learn it as it’s completely defined using a XAML-like report metadata. Since the reporting XAML conforms to the Visual Studio specification, you get all the productivity features you loved, such as Intellisense, property value auto completion and more.

The following example illustrates a XAML report document.

The XAML report document introduces numerous great benefits, such as it support property value inheritance, an interesting feature introduced in Silverlight/WPF XAML, which enables child elements in report tree to obtain the value of a particular property from parent elements, inheriting the value as it was set in the nearest parent element. To make the report even more neat and simple, it also support style which can be shared by all of the elements inside the report.

Full Client Rendering. Datasource Agnostic.

Talking about a report solution, many developers are concerned about the datasource support. Does it support SQL Server? How about Oracle? And so on. Unlike many reporting solutions which are server-based reporting, it’s important to understand that our reporting solution fully runs on client-side, from the data source population to the pixel-identical report generation and rendering. This means there are literally no constraints on the datasource, so you can retrieve data from domain service, web service, WCF service, or virtually any kind of objects that can be serialized over the wire.

The independence to the server allows our reporting engine to perform many tasks by its own in the client-side. There are numerous great benefits associated to this design, such as faster and more responsive user experience in the client-side. And more importantly, the authored report document is truly self-contained, which means that a single report document is all you need to deploy for user consumption. And since the report is a XAML file, you can quickly deploy a report by uploading the file to the website – it’s that easy.

C# Style Scripting Engine

One of the key features of Intersoft report engine is the powerful scripting engine. Scripting is essential to any reporting solution, so we want to make sure that we have the best-of-breed scripting engine that is intuitive to developers and require minimal learning curves. The engine has to be dynamic enough to evaluate complex, multi-line syntax – not only a single line expression – to support the most demanding business report authoring.

I’m pleased to introduce our C# style scripting engine, the industry’s first report scripting engine that supports complex C# style statements and syntaxes. Moreover, you have access to full .NET library and classes, you can get or set a property of an object, or even create new objects – all within the report scripting. And the best of all, our script engine performs nearly as fast as the compiled runtime execution – thanks to the full DLR integration and expression binding implemented in our scripting engine.

The following example demonstrates the basic usage of the scripting.

In addition, the report engine also supports scripting in the report events which can be authored directly in the report document. This allows you to accomplish dynamic report authoring without requiring code compilation. The following example shows what you can do in the Printing event of a TextBlock using our C# style scripting engine.

// TextBlock_Printing(object sender, EventArgs e)
var totalAmount = Math.Ceiling([Order.Order_Details.Qty] * [Order.Order_Details.UnitPrice]);
var highestAmount = Math.Max(totalAmount, [AllOrderAmount]);

if (highestAmount > [Customer.CreditLimit])
{
	e.Text = "Over limit";
	sender.Foreground = Colors.Red;
}
else
{
	e.Text = "Good";
	sender.Foreground = Colors.Black;
}

Enterprise-Grade Report Viewer

Of course, the report document is useless without the viewer that can render it. In this release, ClientUI will ships a viewer that can render the report document. What makes it truly set apart is its unique capability in handling large report document without performance bottleneck, thanks to the bare-metal virtualization implementation. It employs the most advanced rendering technique that prevent application from being freezed when rendering a lot of report pages.

In general, report rendering can be done in two ways, which can be set easily through the LoadingMode property. By default, all of pages will be rendered when report is loaded. Then busy indicator will be shown, prevent the report viewer from being accessed, until report is completely rendered. This is the mode that implemented in most reporting solutions in the market.

Freezing the report viewer while the report is being processed may sound just fine for reports with only a handful of pages. The main problem here is you may not have ideas how many pages that your report may eventually generate. It could be dozens of pages, or hundreds of pages, depending on the business data size. In this case, users will notice the significant slowness of the report generation, and worse, thinking that the application has crashed after waiting for minutes.

This is where our innovative background report generation comes to rescue. We invented very sophisticated techniques that allow the report generation to be done in the background, while updating the user interface without sacrificing performance. This makes the user interface truly responsive and thus translates to great user experiences. With this mode, users can view the report as soon as the first page is rendered, and scroll down as more pages are rendered in real-time. See the screenshot below.

Not only displaying report from the supplied data, it’s also possible to display a report based on user input at run-time. Our ReportViewer has provide a mechanism to generate and display the parameter dialog based on the report document. It’s really not an easy task to create the parameter dialog that handle different parameter type for each report you have manually.

As you can see in the figure above, the report viewer also implement the sophisticated viewing features already invented in ClientUI’s document viewer, such as printing, precise text selection, copy to clipboard, zooming, and searching. On the left panel, users can easily preview pages in a thumbnail form and navigate throughout the report pages. Actually the thumbnail will be rendered exactly same with the real page’s appearance. See the screenshot below.

To navigate through the section in a report, you can browse it using bookmark feature in ReportViewer.

In addition, our ReportViewer also provides a mechanism to display a report list which can be retrieved through many ways, such as directories lookup, from XML file, and etc. It also can be easily customized to overcome some specific scenario.

Modular and Extensible Architecture

ClientUI will ship the report engine with various built-in report controls, which generally used in most of line-of-business scenarios. Unlike other reporting solutions, Intersoft reporting engine is designed with highly modular pattern, instead of being bundled in a huge code base. You only need to include what you need, so you can maintain the solutions to be lightweight. Built with extensible capability, it’s also possible for you to add a custom report control to overcome your business specific scenarios.

That’s all for now. Hopefully this blog post gives you a high level overview of our upcoming reporting. On the next post, I will share more interesting features, the report designer parts, and much more. Thanks for reading, and stay tuned!

Regards,
Jack