{"id":3198,"date":"2016-04-19T14:16:14","date_gmt":"2016-04-19T06:16:14","guid":{"rendered":"http:\/\/www.finereport.com\/en\/?p=3198"},"modified":"2025-04-17T15:58:55","modified_gmt":"2025-04-17T07:58:55","slug":"how-to-design-a-report","status":"publish","type":"post","link":"https:\/\/www.finereport.com\/en\/product-functions\/how-to-design-a-report.html","title":{"rendered":"Design for Reporting: A Step-by-Step Guide"},"content":{"rendered":"<div id=\"toc_container\" class=\"toc_transparent no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#Design_for_Reporting_Effect_Display_Techniques\">Design for Reporting: Effect Display Techniques<\/a><\/li><li><a href=\"#Design_for_Reporting_Getting_Started_with_Report_Designer\">Design for Reporting: Getting Started with Report Designer<\/a><ul><li><a href=\"#1_Start_Designer\">1. Start Designer<\/a><\/li><li><a href=\"#2_Activate_Report_Designer\">2. Activate Report Designer<\/a><\/li><li><a href=\"#3_Connect_to_Database\">3. Connect to Database<\/a><\/li><\/ul><\/li><li><a href=\"#Design_for_Reporting_Creating_New_Workbooks_Datasets\">Design for Reporting: Creating New Workbooks &amp; Datasets<\/a><\/li><li><a href=\"#Design_for_Reporting_Design_Style\">Design for Reporting: Design Style<\/a><\/li><li><a href=\"#Design_for_Reporting_Bind_Data_Column\">Design for Reporting: Bind Data Column<\/a><ul><li><a href=\"#1_Bind_Data_Column\">1. Bind Data Column<\/a><\/li><li><a href=\"#2_Multi-dataset_Linkage\">2. Multi-dataset Linkage<\/a><\/li><\/ul><\/li><li><a href=\"#Design_for_Reporting_Parameter_Panel\">Design for Reporting: Parameter Panel<\/a><ul><li><a href=\"#1_Layout_of_Parameter_Panel\">1. Layout of Parameter Panel<\/a><\/li><li><a href=\"#2_Style_of_Parameter_Control\">2. Style of Parameter Control\n<\/a><\/li><\/ul><\/li><li><a href=\"#Design_for_Reporting_Define_Charts\">Design for Reporting: Define Charts<\/a><ul><li><a href=\"#1_Insert_Chart\">1. Insert Chart<\/a><\/li><li><a href=\"#2_Set_Expansion_Properties\">2. Set Expansion Properties<\/a><\/li><\/ul><\/li><li><a href=\"#Preview_for_Design_for_Reporting\">Preview for Design for Reporting<\/a><\/li><\/ul><\/div>\n<h2><span id=\"Design_for_Reporting_Effect_Display_Techniques\"><strong>Design for Reporting: Effect Display Techniques<\/strong><\/span><\/h2>\n<p>It is a typical cross template, consisting of slash cell, aggregation cell, formula cell and chart cell. It supports grouping horizontally and vertically and parameter query. The following section will introduce the whole process of how this template is made, deployed and displayed, leading you to a new application system developing journey started by FineReport Reporting Tool.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports01.png\" alt=\"design reports\" \/><\/p>\n<h2><span id=\"Design_for_Reporting_Getting_Started_with_Report_Designer\"><strong>Design for Reporting: Getting Started with Report Designer<\/strong><\/span><\/h2>\n<h3><span id=\"1_Start_Designer\"><strong>1. Start Designer<\/strong><\/span><\/h3>\n<p>After downloading the installation file from FineReport official website, please follow the guide to install FineReport on your computer. You can also refer to <a href=\"\/en\/knowledge\/how-to-install-finereport-reporting-software.html\" target=\"_blank\" rel=\"noopener\">Installing FineReport<\/a> to finish the installation. Then you can can <span style=\"color: green;\">click<strong> Start&gt;FineReport_8.0&gt;Designer<\/strong><\/span> to start designer.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports02.png\" alt=\"design reports\" \/><\/p>\n<h3><span id=\"2_Activate_Report_Designer\"><strong>2. Activate Report Designer<\/strong><\/span><\/h3>\n<p>It is required to input user information to activate the designer at the first time as shown below.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports03.png\" alt=\"design reports\" \/><\/p>\n<p>Click the &#8216;<strong>Click to get activation code<\/strong>&#8216; button, the dialog box will link to our official webpage. Please leave your e-mail address and the activation code will be automatically sent to your e-mail box within a few minutes. Come back to fill the blank with the code, click <strong>Use Designer<\/strong> button, and then the designer will be activated successfully.<\/p>\n<h3><span id=\"3_Connect_to_Database\"><strong>3. Connect to Database<\/strong><\/span><\/h3>\n<p>After starting designer, click menu <span style=\"color: green;\"><strong>Server(s)&gt;Define Data Connection<\/strong><\/span>, then a dialog box will pop up as shown below.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports04.png\" alt=\"design reports\" \/><\/p>\n<p>The designer has connected to a database named <strong>FRDemo<\/strong> by defaul, click <span style=\"color: green;\"><strong>Test Connection<\/strong><\/span> and the pop-up dialog box will inform users of the results. There are other connection methods, such as JDBC, for which users can refer to JDBC Connect to Database.<\/p>\n<p>Now we can use data in database to design template since FineReport designer has connected to database.<\/p>\n<h2><span id=\"Design_for_Reporting_Creating_New_Workbooks_Datasets\"><strong>Design for Reporting: Creating New Workbooks &amp; Datasets<\/strong><\/span><\/h2>\n<p>Click <img src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports05.png\" alt=\"design reports\" \/> from the <strong>Quick Toolbar<\/strong> to create a new workbook.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports06.png\" alt=\"design reports\" \/><\/p>\n<p>In the lower-left corner,there is a <strong>Template Dataset<\/strong> window listing all the available datasets. Click button to add a dataset.<\/p>\n<p>Create a new dataset ds1 and define the SQL statement as <span style=\"color: green;\"><strong>SELECT * FROM sales where region =&#8217;${region}&#8217;<\/strong><\/span>. This is an SQL statement with parameter whose name is \u201cregion\u201d.<\/p>\n<p>Click <strong>Refresh<\/strong> button in the parameter panel below and users can obtain the parameters of the dataset. Set the default value as \u201cEast\u201d, click <strong>Preview<\/strong> and the effect is as shown below.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports07.png\" alt=\"design reports\" \/><\/p>\n<p>Create dataset ds2 in the same way and define the the SQL statement as <span style=\"color: green;\"><strong>SELECT * FROM salesvalue<\/strong><\/span>.<\/p>\n<h2><span id=\"Design_for_Reporting_Design_Style\"><strong>Design for Reporting: <\/strong>Design Style<\/span><\/h2>\n<p>The effect is as shown below:<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports08.png\" alt=\"design reports\" \/><\/p>\n<p>Title: Merge cells A1 to D2 and input Region Sales Situation.<\/p>\n<p>Border: Select area from A3 to D5 and click <img src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports08-1.png\" alt=\"design reports\" \/> in the toolbar; open the drop-down menu and select <img src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports08-2.png\" alt=\"design reports\" \/> to add frames both inside and outside.<\/p>\n<p>Slope lines: Merge cells A3 to B3, right click the cell and select Cell Element. In the drop-down menu, click <strong>Insert Slope Lines<\/strong>. The system will pop up a dialog box to edit the slope line, input information we&#8217;d like to add: <strong>product |sales| region<\/strong>. Users can also adjust the words through adding spaces. Effect is as shown below.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports09.png\" alt=\"design reports\" \/><\/p>\n<h2><span id=\"Design_for_Reporting_Bind_Data_Column\"><strong>Design for Reporting: <\/strong>Bind Data Column<\/span><\/h2>\n<p>The final effect is as shown below.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports10.png\" alt=\"design reports\" \/><\/p>\n<h3><span id=\"1_Bind_Data_Column\"><strong>1. Bind Data Column<\/strong><\/span><\/h3>\n<p>Drag the data column to the cell and set properties. The setting position and method is as shown below.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports11.png\" alt=\"design reports\" \/><\/p>\n<p>Following the method below and drag other data columns to the corresponding cells and set properties as shown below.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports12.png\" alt=\"design reports\" \/><\/p>\n<h3><span id=\"2_Multi-dataset_Linkage\"><strong>2. Multi-dataset Linkage<\/strong><\/span><\/h3>\n<p>Because the data comes from two different datasets, it is required to use data filter to build connections between them. Select cell D4 and click the<strong> Filter<\/strong> button in the upper right corner of the property panel as shown below.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports13.png\" alt=\"design reports\" \/><\/p>\n<p>Open Filter setting panel and add conditions as shown below, make sales of ds2 equal sales of ds1.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports14.png\" alt=\"design reports\" \/><\/p>\n<h2><span id=\"Design_for_Reporting_Parameter_Panel\"><strong>Design for Reporting: <\/strong>Parameter Panel<\/span><\/h2>\n<p>In most cases, users need to use parameters to display part of the data that meets certain requirements. Here, parameter design is actually a dynamic process of filtering data, helping the user to realize real-time interaction with data. FineReport reporting software has an embedded parameter panel to allow users to adjust the positions of parameters; moreover, users can get different data selection style through widget setting. We will introduce the design process of parameter query on the basis of previous report.<\/p>\n<h3><span id=\"1_Layout_of_Parameter_Panel\"><strong>1. Layout of Parameter Panel<\/strong><\/span><\/h3>\n<p>Click <strong>Parameter Panel<\/strong> and you will enter the editing interface. In <strong>New Workbook<\/strong> and <strong>Datasetsection<\/strong>, we defined parameter region in dataset ds1. The defined parameters will display in the lower-right corner; click Add All, FineReport will use default layout to generate parameter interface, where users can adjust the panel as they wish.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports15.png\" alt=\"design reports\" \/><\/p>\n<h3><span id=\"2_Style_of_Parameter_Control\"><strong>2. Style of Parameter Control<br \/>\n<\/strong><\/span><\/h3>\n<p>Select ComboBox as the control\u2019s type as shown below.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports16.png\" alt=\"design reports\" \/><\/p>\n<p>Select ComBox control and set its dictionary in the upper-right corner. Select <span style=\"color: green;\"><strong>Database Form&gt; FRDemo&gt;sales<\/strong><\/span> and define Actual Value and Display Value as Region.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports17.png\" alt=\"design reports\" \/><\/p>\n<h2><span id=\"Design_for_Reporting_Define_Charts\"><strong>Design for Reporting: <\/strong>Define Charts<\/span><\/h2>\n<p>Apart from table, FineReport can also use chart to visually display data. We will add chart display on the basis of the previous template to show every product&#8217;s sales conditions. We will select the cell data source, which means the data come form cells.<\/p>\n<h3><span id=\"1_Insert_Chart\"><strong>1. Insert Chart<\/strong><\/span><\/h3>\n<p>Merge cells from A7 to D18 and click <span style=\"color: green;\"><strong>Insert&gt;Cell Element&gt;Insert Chart <\/strong><\/span>on menu. The dialog box will pop up as shown below. Here we choose <strong>Column Chart<\/strong> and click <strong>OK.<\/strong><\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports18.png\" alt=\"design reports\" \/><\/p>\n<p>Then select Chart Properties-Data in the upper-right corner. Set <strong>Datasource<\/strong> by default.<\/p>\n<p>Input formula: Category<strong>=B4<\/strong><\/p>\n<p>Set Series Name and Series Value separately<strong>=C3<\/strong> and <strong>=C4<\/strong>.<\/p>\n<p>The effect is as shown below.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports19.png\" alt=\"design reports\" \/><\/p>\n<h3><span id=\"2_Set_Expansion_Properties\"><strong>2. Set Expansion Properties<\/strong><\/span><\/h3>\n<p>We only want the chart here to reflect the whole conditions, so the Left and Upper Parent should be set None. Select the chart and Cell Properties-Expansion setting panel is in the lower-right corner as below.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports20.png\" alt=\"design reports\" \/><\/p>\n<h2><span id=\"Preview_for_Design_for_Reporting\">Preview for <strong>Design for Reporting<\/strong><\/span><\/h2>\n<p>Input<\/p>\n<p>http:\/\/localhost:8075\/WebReport\/ReportServer?reportlet=GettingStarted.cpt<\/p>\n<p>in browser to view the chart.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports21.png\" alt=\"design reports\" \/><\/p>\n<p>According to the process of creating the frist report, we can summarize the procedure of template making as shown below:<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/designreports22.png\" alt=\"design reports\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>ContentsDesign for Reporting: Effect Display TechniquesDesign for Reporting: Getting Started with Report Designer1. Start Designer2. Activate Report Designer3. Connect to DatabaseDesign for Reporting: Creating New Workbooks &amp; DatasetsDesign for Reporting: Design StyleDesign for Reporting: Bind Data Column1. Bind Data Column2. Multi-dataset LinkageDesign for Reporting: Parameter Panel1. Layout of Parameter Panel2. Style of Parameter Control Design&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[111],"tags":[117],"yst_prominent_words":[455,196,3508,185,2413,805,616,5580,2595,416,1155,5573],"_links":{"self":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts\/3198"}],"collection":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/comments?post=3198"}],"version-history":[{"count":5,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts\/3198\/revisions"}],"predecessor-version":[{"id":19669,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts\/3198\/revisions\/19669"}],"wp:attachment":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/media?parent=3198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/categories?post=3198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/tags?post=3198"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/yst_prominent_words?post=3198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}