crystal reports for Visual Studio .NET(webformsample)

[align=left]Crystal Reports ®[/align][align=left]For Visual Studio .NET®[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 2[/align][align=left]© 2003 Crystal Decisions, Inc. Crystal Decisions, Crystal Reports, Crystal Enterprise,[/align][align=left]Crystal Analysis, Crystal Services, Crystal Care, Crystal Assist, Crystal Applications, Info[/align][align=left]and Holos are trademarks or registered trademarks of Crystal Decisions, Inc. in the U.S.[/align][align=left]and/or other countries. All other trademarks or registered trademarks referenced are the[/align][align=left]property of their respective owners.[/align][align=left]Version 2.0[/align][align=left]Crystal Decisions, Inc.[/align][align=left]895 Emerson Street[/align][align=left]Palo Alto, CA 94301[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 3[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Introduction[/align][align=left]You can use the Integrated Development Environment (IDE) in Visual Studio .NET to create[/align][align=left]interactivity in your application that hosts Crystal reports.[/align][align=left]In this walkthrough, you will create a Web application using Active Server Pages.NET[/align][align=left](ASP.NET) in Visual Studio .NET. The Web application contains two Web Form controls: an[/align][align=left]image and a Web Forms Viewer. It supports interactivity between the user and the Web[/align][align=left]Forms Viewer, and interactivity between the Web Forms Viewer and the image control.[/align][align=left]For more information and updates, please visit our Web site at:[/align][align=left]http://www.crystaldecisions.com/net.[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 4[/align][align=left]Outline of the Web Application[/align][align=left]The Web application will contain these controls:[/align][align=left]· a Web Forms Viewer control hosting a report containing a group tree and three charts[/align][align=left](which will be referred to as Chart A, Chart B and Chart C). Users can traverse the group[/align][align=left]tree and drill down on Chart A to select a country.[/align][align=left]· an image control that will display a flag corresponding to the country the user has[/align][align=left]chosen from Chart A.[/align][align=left]The Chain of Interactions[/align][align=left]1. The user selects a country through the Web Forms Viewer control by drilling down in[/align][align=left]Chart A of the report.[/align][align=left]2. The Web Forms Viewer updates its display of the report based on the selected country.[/align][align=left]3. The image control accepts the chosen country and displays the corresponding flag for[/align][align=left]that country.[/align][align=left]Supporting Files[/align][align=left]The following report and image files have been provided with this walkthrough:[/align][align=left]· Sales By Country.rpt[/align][align=left]· USA.jpg[/align][align=left]· England.jpg[/align][align=left]· France.jpg[/align][align=left]· Germany.jpg[/align][align=left]· Italy.jpg[/align][align=left]· Others.jpg[/align][align=left]They are available for download from our Web site as supporting files at:[/align][align=left]http://www.crystaldecisions.com/net.[/align][align=left]Create the folder "WalkthroughFiles" under the directory c:/Inetpub/wwwroot. Copy or[/align][align=left]download the report and image files to this folder.[/align][align=left]The following sections explain how to construct the Web application described above, and[/align][align=left]how to navigate in Sales By Country.rpt in a Web Forms Viewer.[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 5[/align][align=left]Creating the Web application[/align][align=left]Below, you will create a Visual C# Web application that has a Web Forms Viewer hosting[/align][align=left]Sales By Country.rpt, and an image control displaying the flag of the country the user has[/align][align=left]chosen through the report. Sales By Country.rpt assumes that the sample database,[/align][align=left]xtreme.mdb, has been installed on C:/Program Files/Microsoft Visual Studio .NET/Crystal[/align][align=left]Reports/Samples/Database during setup for Visual Studio .NET.[/align][align=left]To change the location of xtreme.mdb[/align][align=left]If you have installed xtreme.mdb at a location other than the default (i.e., C:/Program[/align][align=left]Files/Microsoft Visual Studio 7/Crystal Reports/Samples/Database), you should do a Set[/align][align=left]Location for Sales By Country.rpt. To do a Set Location:[/align][align=left]1. In Visual Studio .NET, select File | Open |File. This invokes the Open File dialog box.[/align][align=left]2. In the Open File dialog box, browse to the location c:/Inetpub/wwwroot/[/align][align=left]WalkthroughFiles, and specify the file Sales By Country.rpt. This opens Sales By[/align][align=left]Country.rpt in the Crystal Report Designer.[/align][align=left]NOTE If the Crystal Decisions Registration Wizard appears, you can choose to[/align][align=left]register the Crystal Report Designer at this point or at a later time.[/align][align=left]3. In the Crystal Report Designer, right-click in a report area. Choose Database | Set[/align][align=left]Location. This invokes the Set Location dialog box.[/align][align=left]4. In the Set Location dialog box, click the down-arrow under Current Data Source.[/align][align=left]Select the data source assumed by Sales By Country.rpt, C:/Program Files/Microsoft[/align][align=left]Visual Studio .NET/Crystal Reports/Samples/Database/xtreme.mdb. You will[/align][align=left]point this assumed location to the actual location of the database.[/align][align=left]5. You may use any one of these database technologies to connect the report to the actual[/align][align=left]data source: OLE DB (ADO), ODBC (RDO), Database Files (i.e., using native drivers), or[/align][align=left]ADO.NET (XML) (which is under More Data Sources). For the purpose of this[/align][align=left]walkthrough, under Replace with, double-click OLE DB (ADO). This invokes the OLE[/align][align=left]DB (ADO) dialog box.[/align][align=left]NOTE If you are already connected to xtreme.mdb, proceed with step 9. Or, if you[/align][align=left]are connected to another database through OLE DB (ADO), select Make New[/align][align=left]Connection.[/align][align=left]6. In the OLE DB (ADO) dialog box, highlight the OLD DB provider, Microsoft Jet 4.0[/align][align=left]OLEDB Provider. Then click the Next button.[/align][align=left]7. Provide the necessary information to access the actual data source: for Database[/align][align=left]Name, click the square button adjacent to the entry box. Select xtreme.mdb according[/align][align=left]to where you have installed it. Click Next.[/align][align=left]8. Update any advanced information for your data source, if necessary. Then click Finish.[/align][align=left]You will be returned to the Set Location dialog box.[/align][align=left]9. Redirect the report to look for the database in the actual location: in the Set Location[/align][align=left]dialog box, under Replace with, highlight the actual location of the database. Click[/align][align=left]Replace. You will find this location updated under Current Data Source. Then click[/align][align=left]Close.[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 6[/align][align=left]10. If you have modified fields in xtreme.mdb, right-click in a report area, point to[/align][align=left]Database and select Verify Database. A message titled Verify Database suggests[/align][align=left]you to proceed to fix up the report. Click OK to fix up unmapped fields in the database.[/align][align=left]11. Choose File | Save Sales By Country.rpt to save the report with the updated database[/align][align=left]location.[/align][align=left]Creating a Web Form[/align][align=left]You will create a Visual C# Web application project, WebFormExample, on the local host[/align][align=left]http://localhost.[/align][align=left]1. In Visual Studio .NET, select File | New | Project. This invokes the New Project dialog[/align][align=left]box.[/align][align=left]2. In the New Project dialog box, select Visual C# Projects in the left pane.[/align][align=left]3. Select ASP.NET Web Application in the right pane.[/align][align=left]You may choose to create your project on any Web server of your choice. For the purpose of[/align][align=left]this example, you will create the project in the default project location, http://localhost,[/align][align=left]which is the local IIS Web server.[/align][align=left]4. Enter "WebFormExample" in the Location field after http://localhost/. The default[/align][align=left]project location, http://localhost, is displayed in the Location field. Click OK.[/align][align=left]This creates the Web application project, WebFormExample, at[/align][align=left]http://localhost/WebFormExample.[/align][align=left]Visual Studio creates a Web Forms page (with the default name "WebForm1.aspx") in[/align][align=left]the project WebFormExample.[/align][align=left]The window for the Web Forms page consists of two tabs: Design and HTML. The Design[/align][align=left]tab allows programming using the Visual Studio IDE. The HTML tab contains the HTML[/align][align=left]source that supports ASP.NET. Visual Studio automatically opens the Design tab of[/align][align=left]WebForm1.aspx.[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 7[/align][align=left]TIP In Visual Studio .NET, you can anchor the Toolbox by clicking the "pin" icon at[/align][align=left]the top-right corner of the Toolbox.[/align][align=left]Also, items in a Toolbox tab can be displayed alphabetically by right-clicking the tab,[/align][align=left]and selecting Sort Items Alphabetically from the shortcut menu.[/align][align=left]When you are in the Design[/align][align=left]tab, the Toolbox lists the Web[/align][align=left]Form controls.[/align][align=left]The Web Forms tab of the[/align][align=left]Toolbox displays all Web Form[/align][align=left]controls including the Web Forms[/align][align=left]Viewer.[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 8[/align][align=left]Inserting the Web Form Controls[/align][align=left]With the Toolbox set up properly, you can now insert Web Form controls into your Web[/align][align=left]Form. Select the Design tab of WebForm1.aspx if it is not already the active tab. You will[/align][align=left]insert two controls, an image and a Web Forms Viewer:[/align][align=left]1. From the Web Forms tab of the Toolbox, drag the Image control and drop it into the[/align][align=left]Web Form. The image object has a default name Image1.[/align][align=left]2. Similarly, drag a Web Forms Viewer control and drop it into the Web Form. The Viewer[/align][align=left]has a default name CrystalReportViewer1.[/align][align=left]Web Forms[/align][align=left]Viewer control[/align][align=left]Image control[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 9[/align][align=left]Binding Files to the Web Forms Controls[/align][align=left]Next, you will specify the image and report files that the Web Form will display.[/align][align=left]Initialize the image control with a United Nations flag since initially, no country has been[/align][align=left]chosen. Later in the section "Linking Up the Web Form Controls for Interactivity", you will[/align][align=left]further specify which flag the image control should display under what conditions.[/align][align=left]To specify an image file for the image control:[/align][align=left]1. In the Design tab of WebForm1.aspx, select the image control. The Properties window[/align][align=left]automatically displays the properties applicable to the image control. You may click the[/align][align=left]Alphabetize icon to arrange properties in their alphabetical order.[/align][align=left]2. Scroll down to the property, ImageUrl, in the Properties window. Specify a URL or full[/align][align=left]path name for the image file that you would like the image control to display. Specify[/align][align=left]the URL http://localhost/WalkthroughFiles/Others.jpg. This initializes the image[/align][align=left]control to display the flag for the United Nations.[/align][align=left]3. You may adjust the length and the width of the image control to display the flag in the[/align][align=left]appropriate scale.[/align][align=left]To specify a report file for the Web Forms Viewer control[/align][align=left]1. In the Design tab of WebForm1.aspx, select the Web Forms Viewer control. The[/align][align=left]Properties window automatically displays the properties applicable to it.[/align][align=left]2. Select DataBindings in the Properties window, and click the square button to the right[/align][align=left]of the entry field. This opens the DataBindings dialog box.[/align][align=left]3. In the DataBindings dialog box, select ReportSource under Bindable Properties,[/align][align=left]and enter the full path name, "C://Inetpub//wwwroot//WalkthroughFiles//Sales By[/align][align=left]Country.rpt" (with the double quotes) under Custom binding expression. The Web[/align][align=left]Forms Viewer control automatically displays this report at design time.[/align][align=left]Specify image to display.[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 10[/align][align=left]4. Highlight WebForm1.aspx in the Solution Explorer and click the View Code icon. In[/align][align=left]WebForm1.aspx.cs, after the call to base.OnInit(e) in OnInit, enter this line:[/align][align=left]DataBind();[/align][align=left]5. You may adjust the size of the Web Forms Viewer control as you see fit, by first setting[/align][align=left]the property, BestFitPage, to False, and then adjusting handles of the Viewer in the[/align][align=left]Design tab.[/align][align=left]Select the ReportSource[/align][align=left]property under Bindable[/align][align=left]Properties.[/align][align=left]Specify a full path name[/align][align=left]for the report file.[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 11[/align][align=left]Below shows a layout of the Web Form in the Visual Studio editor, with the image and Web[/align][align=left]Forms Viewer controls initialized.[/align][align=left]Linking Up the Web Form Controls for Interactivity[/align][align=left]As described in the section "Outline of Web Application" above, when the user drills down on[/align][align=left]a country (or a group of countries for "Others") in Chart A in the report, the image control[/align][align=left]should display the appropriate flag.[/align][align=left]To set up the image control to display the appropriate image upon a drill-down event in the[/align][align=left]Web Forms Viewer, you can implement the following:[/align][align=left]1. In the Design tab of WebForm1.aspx, select the Web Forms Viewer control.[/align][align=left]2. In the Properties window, click the Events icon. The Properties window automatically[/align][align=left]displays all the events applicable to the Web Forms Viewer control. If you have not[/align][align=left]already done so, you may click the Alphabetize icon to arrange events in their[/align][align=left]alphabetical order.[/align][align=left]3. Double-click the Drill event. This activates the editor for WebForm1.cs, and initializes a[/align][align=left]function named CrystalReportViewer1_Drill.[/align][align=left]4. Add the following lines of code to CrystalReportViewer1_Drill:[/align][align=left]string sGroupName = "";[/align][align=left]if (e.NewGroupLevel == 1)[/align][align=left]{[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 12[/align][align=left]sGroupName = e.NewGroupName;[/align][align=left]string imageURL = string.Format[/align][align=left]("http://localhost//WalkthroughFiles//{0}.jpg", sGroupName);[/align][align=left]Image1.ImageUrl = imageURL;[/align][align=left]}[/align][align=left]Building and Running the Web application[/align][align=left]To build and run the Web application:[/align][align=left]1. From the Visual Studio .NET Menu Bar, select File | Save All to save all changes you[/align][align=left]have made to the project WebFormExample. The first time you save the solution file,[/align][align=left]you will be prompted with a message about saving WebFormExample.sln. Save it to the[/align][align=left]default location c:/Inetpub/wwwroot/WebFormExample.[/align][align=left]2. Select Build | Build to compile your application.[/align][align=left]3. Select Start Without Debugging from the Debug menu.[/align][align=left]4. The Web application automatically starts at[/align][align=left]http://localhost/WebFormExample/WebForm1.aspx in your browser.[/align][align=left]5. Try drilling down on a country in Chart A of Sales By Country.rpt. For instance, drill[/align][align=left]down on USA. The image control displays the flag of the United States. The report also[/align][align=left]displays Chart B showing the sum of last year's sales for the top 5 regions in the United[/align][align=left]States.[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 13[/align][align=left]Navigating in the Crystal Report[/align][align=left]Sales By Country.rpt is grouped by the four fields - country, region, city and customer[/align][align=left]name. It contains a group tree and charts A, B and C. You can select a grouping via the[/align][align=left]group tree. You can also select a country grouping through Chart A.[/align][align=left]Drilling Down in the Crystal Report[/align][align=left]Initially, to select a grouping via the group tree, expand the group tree by clicking on the '+'[/align][align=left]symbol to the left of a country node. You can then click a region, city, or customer name.[/align][align=left]The report will then display the sum of last year's sales for the selected grouping.[/align][align=left]You can also select a country grouping by drilling down on Chart A. Chart A is a group chart[/align][align=left]displaying the sum of last year's sales for each of the top 5 countries, and the total of last[/align][align=left]year's sales for the rest of the countries. The user may drill down (by clicking) on Chart A to[/align][align=left]select one of the top 5 countries (or "Others" for all other countries), and view in Chart B[/align][align=left]the sum of last year's sales for each of the top 5 regions in that country (or group of[/align][align=left]countries in the case of "Others").[/align][align=left]You can expand and[/align][align=left]traverse the group tree to[/align][align=left]select a grouping.[/align][align=left]Or, you can select a[/align][align=left]country in Chart A by[/align][align=left]drilling down on it.[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 14[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 15[/align][align=left]For instance, to view the sum of last year's sales for the top 5 regions in Italy, you can drill[/align][align=left]down on "Italy" in Chart A. In this database, since there are only 3 regions in Italy (i.e.,[/align][align=left]Lombardia, Piedmonte and Lazio) with sales, only the sum of last year's sales of each of[/align][align=left]these 3 regions will be displayed in Chart B.[/align][align=left]Click on a region or expand[/align][align=left]the group tree to select a[/align][align=left]city or customer.[/align][align=left]Chart B displays the sum of last[/align][align=left]year's sales in the top regions of[/align][align=left]the country selected in Chart A.[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 16[/align][align=left]At this point, you may click a region in the group tree, or further expand the group tree to[/align][align=left]select a city or customer to display the corresponding sales. For instance, you can click the[/align][align=left]region, Lombardia, in the group tree. The report will display in Chart C the sum of last year's[/align][align=left]sales of the two cities in Lombardia, Bergamo and Milan.[/align][align=left]Clicking a region will display the[/align][align=left]sales of each city in that region.[/align][align=left]Interactivity and Reports in Web Applications[/align][align=left]Copyright © 2001 Crystal Decisions, Inc.[/align][align=left]Page 17[/align][align=left]You may further expand the group tree and select a city or customer name to display the[/align][align=left]corresponding sales for that city or customer. For example, if you click the city Milan, the[/align][align=left]report will show the sales for each customer in Milan; in this database, since there is only[/align][align=left]one customer, Milano Bike Store, in Milan, the report will only show the sales for that[/align][align=left]customer.[/align][align=left]Note that at any point, you can click the up-arrow icon in the Web Forms Viewer toolbar to[/align][align=left]traverse one level up in the group tree.[/align][align=left]Clicking on a city in the group[/align][align=left]tree will show sales of each[/align][align=left]customer in that city.[/align][align=left]You can click the up-arrow icon[/align][align=left]anytime to traverse one level up[/align][align=left]in the group tree.[/align]