{"id":3436,"date":"2016-05-24T03:00:05","date_gmt":"2016-05-23T19:00:05","guid":{"rendered":"http:\/\/www.finereport.com\/en\/?p=3436"},"modified":"2019-10-24T14:47:08","modified_gmt":"2019-10-24T06:47:08","slug":"finereport-template-design","status":"publish","type":"post","link":"https:\/\/frg.fineres.com\/en\/2016\/05\/24\/finereport-template-design\/","title":{"rendered":"FineReport Template Design"},"content":{"rendered":"

We will introduce Template Design of FineReport reporting software<\/a> in this article.This article includes Design Style,Bind Data Column,Parameter Interface and Define Chart.<\/p>\n

1. Design Style<\/h3>\n

The effect is as shown below:<\/p>\n

\"\"<\/p>\n

Title:<\/strong> Merge cells A1 to D2 and input Region Sales Situation.<\/p>\n

Border:<\/strong> Select area from A3 to D5 and click\"\"in the toolbar, open the drop-down menu and select\"\"to add frames both inside and outside.<\/p>\n

Lines:<\/strong> Merge cells A3 to B3, right click the cell and select Cell Element. In the drop-down menu, click Insert Slope Lines. The system will pop up a dialog box to edit the slope line, input information we’d like to add: product |sales| region. Users can also adjust the words through adding spaces. Effect is as shown below\uff1a<\/p>\n

\"\"<\/p>\n

2. Bind Data Column<\/h3>\n

The final effect is as shown below\uff1a<\/p>\n

\"\"<\/p>\n

1.1 Bind Data Column<\/strong><\/p>\n

Drag the data column to the cell and set properties. The setting position and method is as shown below\uff1a<\/p>\n

\"\"<\/p>\n

Following the method below and drag other data columns to the corresponding cells and set properties as shown below\uff1a<\/p>\n\n\n\n\n\n\n\n\n\n\n
Cell<\/td>\nData Set<\/td>\nData Columns<\/td>\nAttributes<\/td>\n<\/tr>\n
C3<\/td>\nds1<\/td>\nproduct<\/td>\nLandscape, Center<\/td>\n<\/tr>\n
A4<\/td>\nds1<\/td>\nregion<\/td>\nPortrait, Center<\/td>\n<\/tr>\n
B4<\/td>\nds1<\/td>\nsales<\/td>\nPortrait, Center<\/td>\n<\/tr>\n
C4<\/td>\nds1<\/td>\nsalesVolume<\/td>\nNo extend, Data Setting\uff1aSummary|Sum, Center<\/td>\n<\/tr>\n
D4<\/td>\nds2<\/td>\ngrossSales<\/td>\nNo extend, Data Setting\uff1aSummary|Sum, Center<\/td>\n<\/tr>\n
C5<\/td>\n\u2014<\/td>\n\u2014<\/td>\n=sum(C4)<\/td>\n<\/tr>\n
D5<\/td>\n\u2014<\/td>\n\u2014<\/td>\n=sum(D4)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

2.2 Multi-dataset Linkage<\/strong><\/p>\n

Because the data comes from two different datasets, it is required to use data filter to build connections between them.<\/p>\n

Select cell D4 and click the Filter<\/span> button in the upper right corner of the property panel as shown below\uff1a<\/p>\n

\"\"<\/p>\n

Open Filter setting panel and add conditions as shown below, make sales of ds2 equal sales of ds1.<\/p>\n

\"\"<\/p>\n

3. Parameter Interface<\/h3>\n

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.<\/p>\n

FineReport has an embedded parameter panel to allow users to adjust the positions of parameters; moreover, users can get different data selection style through controls setting. We will introduce the design process of parameter query on the basis of previous report.<\/p>\n

3.1 Layout of Parameter Panel<\/strong><\/p>\n

Click Parameter Panel and you will enter the editing interface. In New Template and Datasetsection\uff0cwe defined parameter “region” in dataset ds1.<\/p>\n

The defined parameters will display in the lower-right corner; click Add All<\/span>, FineReport will use default layout to generate parameter interface, where users can adjust the panel as they wish.<\/p>\n

\"\"<\/p>\n

3.2 Style of Parameter Control<\/strong><\/p>\n

Select ComboBox as the parameter control\u2019s type as shown below.<\/p>\n

\"\"<\/p>\n

4. Define Chart<\/h3>\n

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’s sales conditions.<\/p>\n

We will select the cell data source, which means the data come form cells.<\/p>\n

4.1 Insert Chart<\/strong><\/p>\n

Merge cells from A7 to D18 and click Insert>Cell Element>Insert Chart<\/span> on menu, The dialog box will pop up as shown below. Here we choose Column Chart<\/span> and click OK.<\/p>\n

\"\"<\/p>\n

Select the chart, and then choose the Chart Properties-Data in the upper-right corner. Set Datasource by default.<\/p>\n

Input formula in the Category textbox: =B4.<\/p>\n

Set Series Name and Series Value separately =C3 and =C4.<\/p>\n

The effect is as shown below.<\/p>\n

\"\"<\/p>\n

Finally, clickSave.<\/p>\n

4.2 Set Expansion Properties<\/strong><\/p>\n

We only want the chart here to reflect the whole conditions, so the Left and Upper Parent should be set None.<\/p>\n

Select the chart and Cell Properties-Expansion setting panel is in the lower-right corner as below.<\/p>\n

\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"

We will introduce Template Design of FineReport reporti…<\/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],"_links":{"self":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts\/3436"}],"collection":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/comments?post=3436"}],"version-history":[{"count":5,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts\/3436\/revisions"}],"predecessor-version":[{"id":8464,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts\/3436\/revisions\/8464"}],"wp:attachment":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/media?parent=3436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/categories?post=3436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/tags?post=3436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}