Crystal Reports ®

For Visual Studio .NET®

Interactivity and Reports in Web Applications

 Interactivity and Reports in Web Applications

© 2003 Crystal Decisions, Inc. Crystal Decisions, Crystal Reports, Crystal Enterprise,
Crystal Analysis, Crystal Services, Crystal Care, Crystal Assist, Crystal Applications, Info
and Holos are trademarks or registered trademarks of Crystal Decisions, Inc. in the U.S.
and/or other countries. All other trademarks or registered trademarks referenced are the
property of their respective owners.
Version 2.0

Crystal Decisions, Inc.

895 Emerson Street
Palo Alto, CA 94301

Copyright © 2001 Crystal Decisions, Inc.

Page 2
 Interactivity and Reports in Web Applications

Interactivity and Reports in Web Applications

Introduction
You can use the Integrated Development Environment (IDE) in Visual Studio .NET to create
interactivity in your application that hosts Crystal reports.
In this walkthrough, you will create a Web application using Active Server Pages.NET
(ASP.NET) in Visual Studio .NET. The Web application contains two Web Form controls: an
image and a Web Forms Viewer. It supports interactivity between the user and the Web
Forms Viewer, and interactivity between the Web Forms Viewer and the image control.
For more information and updates, please visit our Web site at:
http://www.crystaldecisions.com/net.

Copyright © 2001 Crystal Decisions, Inc.

Page 3
 Interactivity and Reports in Web Applications

Outline of the Web Application

The Web application will contain these controls:
• a Web Forms Viewer control hosting a report containing a group tree and three charts
(which will be referred to as Chart A, Chart B and Chart C). Users can traverse the group
tree and drill down on Chart A to select a country.
• an image control that will display a flag corresponding to the country the user has
chosen from Chart A.
The Chain of Interactions
1. The user selects a country through the Web Forms Viewer control by drilling down in
Chart A of the report.
2. The Web Forms Viewer updates its display of the report based on the selected country.
3. The image control accepts the chosen country and displays the corresponding flag for
that country.
Supporting Files
The following report and image files have been provided with this walkthrough:
• Sales By Country.rpt
• USA.jpg
• England.jpg
• France.jpg
• Germany.jpg
• Italy.jpg
• Others.jpg
They are available for download from our Web site as supporting files at:
http://www.crystaldecisions.com/net.
Create the folder "WalkthroughFiles" under the directory c:\Inetpub\wwwroot. Copy or
download the report and image files to this folder.
The following sections explain how to construct the Web application described above, and
how to navigate in Sales By Country.rpt in a Web Forms Viewer.

Copyright © 2001 Crystal Decisions, Inc.

Page 4
 Interactivity and Reports in Web Applications

Creating the Web application

Below, you will create a Visual C# Web application that has a Web Forms Viewer hosting
Sales By Country.rpt, and an image control displaying the flag of the country the user has
chosen through the report. Sales By Country.rpt assumes that the sample database,
xtreme.mdb, has been installed on C:\Program Files\Microsoft Visual Studio .NET\Crystal
Reports\Samples\Database during setup for Visual Studio .NET.
To change the location of xtreme.mdb
If you have installed xtreme.mdb at a location other than the default (i.e., C:\Program
Files\Microsoft Visual Studio 7\Crystal Reports\Samples\Database), you should do a Set
Location for Sales By Country.rpt. To do a Set Location:
1. In Visual Studio .NET, select File | Open |File. This invokes the Open File dialog box.
2. In the Open File dialog box, browse to the location c:\Inetpub\wwwroot\
WalkthroughFiles, and specify the file Sales By Country.rpt. This opens Sales By
Country.rpt in the Crystal Report Designer.
NOTE If the Crystal Decisions Registration Wizard appears, you can choose to
register the Crystal Report Designer at this point or at a later time.
3. In the Crystal Report Designer, right-click in a report area. Choose Database | Set
Location. This invokes the Set Location dialog box.
4. In the Set Location dialog box, click the down-arrow under Current Data Source.
Select the data source assumed by Sales By Country.rpt, C:\Program Files\Microsoft
Visual Studio .NET\Crystal Reports\Samples\Database\xtreme.mdb. You will
point this assumed location to the actual location of the database.
5. You may use any one of these database technologies to connect the report to the actual
data source: OLE DB (ADO), ODBC (RDO), Database Files (i.e., using native drivers), or
ADO.NET (XML) (which is under More Data Sources). For the purpose of this
walkthrough, under Replace with, double-click OLE DB (ADO). This invokes the OLE
DB (ADO) dialog box.
NOTE If you are already connected to xtreme.mdb, proceed with step 9. Or, if you
are connected to another database through OLE DB (ADO), select Make New
Connection.
6. In the OLE DB (ADO) dialog box, highlight the OLD DB provider, Microsoft Jet 4.0
OLEDB Provider. Then click the Next button.
7. Provide the necessary information to access the actual data source: for Database
Name, click the square button adjacent to the entry box. Select xtreme.mdb according
to where you have installed it. Click Next.
8. Update any advanced information for your data source, if necessary. Then click Finish.
You will be returned to the Set Location dialog box.
9. Redirect the report to look for the database in the actual location: in the Set Location
dialog box, under Replace with, highlight the actual location of the database. Click
Replace. You will find this location updated under Current Data Source. Then click
Close.

Copyright © 2001 Crystal Decisions, Inc.

Page 5
 Interactivity and Reports in Web Applications

10. If you have modified fields in xtreme.mdb, right-click in a report area, point to
Database and select Verify Database. A message titled Verify Database suggests
you to proceed to fix up the report. Click OK to fix up unmapped fields in the database.
11. Choose File | Save Sales By Country.rpt to save the report with the updated database
location.

Creating a Web Form

You will create a Visual C# Web application project, WebFormExample, on the local host
http://localhost.
1. In Visual Studio .NET, select File | New | Project. This invokes the New Project dialog
box.
2. In the New Project dialog box, select Visual C# Projects in the left pane.
3. Select ASP.NET Web Application in the right pane.
You may choose to create your project on any Web server of your choice. For the purpose of
this example, you will create the project in the default project location, http://localhost,
which is the local IIS Web server.
4. Enter "WebFormExample" in the Location field after http://localhost/. The default
project location, http://localhost, is displayed in the Location field. Click OK.
This creates the Web application project, WebFormExample, at
http://localhost/WebFormExample.
Visual Studio creates a Web Forms page (with the default name "WebForm1.aspx") in
the project WebFormExample.

The window for the Web Forms page consists of two tabs: Design and HTML. The Design
tab allows programming using the Visual Studio IDE. The HTML tab contains the HTML
source that supports ASP.NET. Visual Studio automatically opens the Design tab of
WebForm1.aspx.

Copyright © 2001 Crystal Decisions, Inc.

Page 6
 Interactivity and Reports in Web Applications

TIP In Visual Studio .NET, you can anchor the Toolbox by clicking the "pin" icon at
the top-right corner of the Toolbox.
Also, items in a Toolbox tab can be displayed alphabetically by right-clicking the tab,
and selecting Sort Items Alphabetically from the shortcut menu.

When you are in the Design

tab, the Toolbox lists the Web
Form controls.

The Web Forms tab of the

Toolbox displays all Web Form
controls including the Web Forms
Viewer.

Copyright © 2001 Crystal Decisions, Inc.

Page 7
 Interactivity and Reports in Web Applications

Inserting the Web Form Controls

With the Toolbox set up properly, you can now insert Web Form controls into your Web
Form. Select the Design tab of WebForm1.aspx if it is not already the active tab. You will
insert two controls, an image and a Web Forms Viewer:
1. From the Web Forms tab of the Toolbox, drag the Image control and drop it into the
Web Form. The image object has a default name Image1.
2. Similarly, drag a Web Forms Viewer control and drop it into the Web Form. The Viewer
has a default name CrystalReportViewer1.

Image control Web Forms

Viewer control

Copyright © 2001 Crystal Decisions, Inc.

Page 8
 Interactivity and Reports in Web Applications

Binding Files to the Web Forms Controls

Next, you will specify the image and report files that the Web Form will display.
Initialize the image control with a United Nations flag since initially, no country has been
chosen. Later in the section "Linking Up the Web Form Controls for Interactivity", you will
further specify which flag the image control should display under what conditions.
To specify an image file for the image control:
1. In the Design tab of WebForm1.aspx, select the image control. The Properties window
automatically displays the properties applicable to the image control. You may click the
Alphabetize icon to arrange properties in their alphabetical order.
2. Scroll down to the property, ImageUrl, in the Properties window. Specify a URL or full
path name for the image file that you would like the image control to display. Specify
the URL http://localhost/WalkthroughFiles/Others.jpg. This initializes the image
control to display the flag for the United Nations.

Specify image to display.

3. You may adjust the length and the width of the image control to display the flag in the
appropriate scale.
To specify a report file for the Web Forms Viewer control
1. In the Design tab of WebForm1.aspx, select the Web Forms Viewer control. The
Properties window automatically displays the properties applicable to it.
2. Select DataBindings in the Properties window, and click the square button to the right
of the entry field. This opens the DataBindings dialog box.
3. In the DataBindings dialog box, select ReportSource under Bindable Properties,
and enter the full path name, "C:\\Inetpub\\wwwroot\\WalkthroughFiles\\Sales By
Country.rpt" (with the double quotes) under Custom binding expression. The Web
Forms Viewer control automatically displays this report at design time.

Copyright © 2001 Crystal Decisions, Inc.

Page 9
 Interactivity and Reports in Web Applications

Select the ReportSource

property under Bindable
Properties.

Specify a full path name

for the report file.

4. Highlight WebForm1.aspx in the Solution Explorer and click the View Code icon. In
WebForm1.aspx.cs, after the call to base.OnInit(e) in OnInit, enter this line:
DataBind();
5. You may adjust the size of the Web Forms Viewer control as you see fit, by first setting
the property, BestFitPage, to False, and then adjusting handles of the Viewer in the
Design tab.

Copyright © 2001 Crystal Decisions, Inc.

Page 10
 Interactivity and Reports in Web Applications

Below shows a layout of the Web Form in the Visual Studio editor, with the image and Web
Forms Viewer controls initialized.

Linking Up the Web Form Controls for Interactivity

As described in the section "Outline of Web Application" above, when the user drills down on
a country (or a group of countries for "Others") in Chart A in the report, the image control
should display the appropriate flag.
To set up the image control to display the appropriate image upon a drill-down event in the
Web Forms Viewer, you can implement the following:
1. In the Design tab of WebForm1.aspx, select the Web Forms Viewer control.
2. In the Properties window, click the Events icon. The Properties window automatically
displays all the events applicable to the Web Forms Viewer control. If you have not
already done so, you may click the Alphabetize icon to arrange events in their
alphabetical order.
3. Double-click the Drill event. This activates the editor for WebForm1.cs, and initializes a
function named CrystalReportViewer1_Drill.
4. Add the following lines of code to CrystalReportViewer1_Drill:
string sGroupName = "";
if (e.NewGroupLevel == 1)
{

Copyright © 2001 Crystal Decisions, Inc.

Page 11
 Interactivity and Reports in Web Applications

sGroupName = e.NewGroupName;
string imageURL = string.Format
("http://localhost//WalkthroughFiles//{0}.jpg", sGroupName);
Image1.ImageUrl = imageURL;
}

Building and Running the Web application

To build and run the Web application:
1. From the Visual Studio .NET Menu Bar, select File | Save All to save all changes you
have made to the project WebFormExample. The first time you save the solution file,
you will be prompted with a message about saving WebFormExample.sln. Save it to the
default location c:\Inetpub\wwwroot\WebFormExample.
2. Select Build | Build to compile your application.
3. Select Start Without Debugging from the Debug menu.
4. The Web application automatically starts at
http://localhost/WebFormExample/WebForm1.aspx in your browser.
5. Try drilling down on a country in Chart A of Sales By Country.rpt. For instance, drill
down on USA. The image control displays the flag of the United States. The report also
displays Chart B showing the sum of last year's sales for the top 5 regions in the United
States.

Copyright © 2001 Crystal Decisions, Inc.

Page 12
 Interactivity and Reports in Web Applications

Navigating in the Crystal Report

Sales By Country.rpt is grouped by the four fields - country, region, city and customer
name. It contains a group tree and charts A, B and C. You can select a grouping via the
group tree. You can also select a country grouping through Chart A.

Drilling Down in the Crystal Report

Initially, to select a grouping via the group tree, expand the group tree by clicking on the '+'
symbol to the left of a country node. You can then click a region, city, or customer name.
The report will then display the sum of last year's sales for the selected grouping.
You can also select a country grouping by drilling down on Chart A. Chart A is a group chart
displaying the sum of last year's sales for each of the top 5 countries, and the total of last
year's sales for the rest of the countries. The user may drill down (by clicking) on Chart A to
select one of the top 5 countries (or "Others" for all other countries), and view in Chart B
the sum of last year's sales for each of the top 5 regions in that country (or group of
countries in the case of "Others").

You can expand and Or, you can select a

traverse the group tree to country in Chart A by
select a grouping. drilling down on it.

Copyright © 2001 Crystal Decisions, Inc.

Page 13
Interactivity and Reports in Web Applications

Copyright © 2001 Crystal Decisions, Inc.

Page 14
 Interactivity and Reports in Web Applications

For instance, to view the sum of last year's sales for the top 5 regions in Italy, you can drill
down on "Italy" in Chart A. In this database, since there are only 3 regions in Italy (i.e.,
Lombardia, Piedmonte and Lazio) with sales, only the sum of last year's sales of each of
these 3 regions will be displayed in Chart B.

Click on a region or expand Chart B displays the sum of last

the group tree to select a year's sales in the top regions of
city or customer. the country selected in Chart A.

Copyright © 2001 Crystal Decisions, Inc.

Page 15
 Interactivity and Reports in Web Applications

At this point, you may click a region in the group tree, or further expand the group tree to
select a city or customer to display the corresponding sales. For instance, you can click the
region, Lombardia, in the group tree. The report will display in Chart C the sum of last year's
sales of the two cities in Lombardia, Bergamo and Milan.

Clicking a region will display the

sales of each city in that region.

Copyright © 2001 Crystal Decisions, Inc.

Page 16
 Interactivity and Reports in Web Applications

You may further expand the group tree and select a city or customer name to display the
corresponding sales for that city or customer. For example, if you click the city Milan, the
report will show the sales for each customer in Milan; in this database, since there is only
one customer, Milano Bike Store, in Milan, the report will only show the sales for that
customer.

Clicking on a city in the group You can click the up-arrow icon
tree will show sales of each anytime to traverse one level up
customer in that city. in the group tree.

Note that at any point, you can click the up-arrow icon in the Web Forms Viewer toolbar to
traverse one level up in the group tree.

Copyright © 2001 Crystal Decisions, Inc.

Page 17