| You will learn |
|---|
|
I. Design report layout
1. Set mobile attribute
1) Select [Template] > [Mobile Attribute] and check [Set as mobile canvas size].
2) After the settings above are completed, you can see the page boundary.
2. General layout
1) Two charts at the top display indicators of summary nature.
2) Below the charts, breakdowns of data are displayed in two cards.
3. Get breakdowns of data
1) Create a new DB Query dataset [ds1] by inputting the following SQL statement:
SELECT ORDERID, ORDERS.CUSTOMERID AS CUSTID, EMPID, SIGNDATE, AMOUNT, PAID,CUSTOMERNAME, CITY, COUNTRY, TEL
FROM ORDERSLEFT JOIN (SELECT CUSTOMERID, CUSTOMERNAME, CITY, COUNTRY, TEL
FROM CUSTOMER) AS C WHERE ORDERS.CUSTOMERID = C.CUSTOMERID
2) Preview [ds1]. The data is a breakdown of the order and will be displayed below the charts.
4. Summarize sales
1) Create a new dataset and modify the name of the dataset to sales by inputting the following SQL statement
SELECT SUM(AMOUNT)/1000000 AS SALES, 'Sales' AS CATEGORYFROM ORDERS
2) Preview the dataset [sales]. This indicator will be displayed in the upper-left chart.
5. Summarize return
1) Create a new dataset and modify the name of the dataset to return by inputting the following SQL statement:
SELECT SUM(PAID)/1000000 AS RETURN, 'Return' AS CATEGORYFROM ORDERS
2) Preview the dataset [return]. This indicator will be displayed in the upper-right chart.
6. Design chart layout
1) Merge A1 and B1 to accommodate the upper-left chart, and merge C1 and D1 to accommodate the upper-right chart.
2) Set the width of Columns A, B, C and D as 30MM.
3) Set the height of Row 1 as 50MM.
7. Insert a chart
1) Click A1, insert a chart and set chart type as [Angular Gauge Chart].
2) Click C1 and insert a chart in the same way.
8. Design the layout of the breakdowns of data
1) Set the height of Rows 2, 5 and 8, which serve as header rows, as 14MM.
2) Set the height of Rows 3, 4, 6, 7, 9 and 10, where the breakdowns of data will be displayed, as 10MM.
9. Set headers for the breakdowns of data
1) Merge A2 and B2, and enter Order Info.
2) Merge A5 and B5, and enter Customer Info.
3) Merge A8 and B8, and enter Payment Info.
10. Set field names for the breakdowns of data
Input text in cells by reference to the figure below.
II. Set the charts
1. Set sales gauge data
Dataset: sales
Category Name: CATEGORY
Pointer Value: SALES
Target Value: Select Custom, click
and input 20
2. Hide gauge title
Select [Style] > [Title] and uncheck [Show Title]
3. Set gauge label
1) Select [Label] and uncheck [Percentage], which means no percentage label will be displayed.
2) Set the format of value label:
Click [Format]. Click the first drop-down box in the pop-up box and select [Number].
The second drop-down box defaults to #0, which means only the integer part of a value is displayed. Directly input Million after #0, so that the value is followed by a unit in the preview.
3) Set the style of value label: make the label text bold and customize the color as 87929c.
4. Set gauge series style
Set scale (i.e., gauge background) color as ebf2f7.
5. Set series color
Select [Custom] below [Range].
Set partitioning as 1.
Set the maximum as 20 and the minimum as 0.
Customize the partitioning color as 24a7ff.
6. Set the minimum value of scale
1) Select [Axis].
2) Check [Custom Minimum Value] and input 0.
3) The maximum value is the [Target Value] set in [Data] tab.
7. Cancel gauge toolbar
1) Select [Special Effect].
2) Uncheck [Sort], [Export Image] and [Full Screen Display].
8. Preview the effect of the sales gauge
9. Reuse chart style
1) You may repeat the settings above to the gauge in C1 or directly reuse the existing chart style by copying the chart in A1, provided that the two charts are of the same type.
2) Right-click A1 and select [Copy].
3) Right-click [C1] and select [Paste]. The chart in C1 will be the same as the one in A1.
10. Set return gauge data
1) After the chart style is reused, you have to modify the data in the chart.
2) Select [Data]:
Dataset: return
Category Name: CATEGORY
Pointer Value: RETURN
11. Modify series color
1) Modify series color to distinguish the data indicators displayed in the two gauges.
2) Select [Series], click on the category at the bottom and modify the color to 99ccff
12. Preview the effect of the return gauge
III. Design the card-like breakdowns of data
1. Drag data columns into cells
Drag data columns in [ds1] into the breakdowns of data by reference to the figure below.
2. Set parent cell
1) Set the left parent cell of all header rows as B3. Header cells include A2~D2, A5~D5 and A8~D8.
2) Set the left parent cell of all fieldname cells as B3. Fieldname cells include: A2~A4, C2~C4, A6~A7, C6~C7, A9 and C9.
3) Set the left parent cell of some cells containing data columns as B3. Such cells include: B4, B6, B7 and B9.
4) Set the left parent cell of the row of blank cells below the breakdowns of data as B3, so that the breakdowns will be separated by a blank line between them in the preview.
3. Optimize headers
1) Set the background color of all header rows as d5e6f7. After setting one of the rows, the style can be directly copied to other rows using the format painter.
2) Set the left indentation for all headers as 10
3) Set the font size of headers as 12, make the font bold, and set font color as 0f3f70.
4. Optimize fieldnames
Set the background color of fieldname cells as ebf2f7.
2) Set the font size of fieldnames as 12, set center alignment, and set font color as 59a2eb.
5. Optimize field values
Set the font size of field values as 12, set center alignment, and set font color as 87929c.
6. Design borders
1) Select the cell range A2:D9, set the border color the same as the background color of header rows (i.e., d5e6f7) and set internal and external borders at the same time.
2) Select the cell range A2:D1, choose the thickest line, set the border color as 99ccff and only set the top border
7. Preview
IV. View the effect on a mobile terminal
1. Rename the report
Select the current template in the left-hand template directory tree, click on the Rename icon to rename the template as First Mobile Report.
2. Mount the mobile report at a directory
1) Store the template on the server of the report platform and then log in the decision-making platform as an Admin, add a report in the Report directory, and select First Mobile Report.cpt.
2) Set the template as only visible via tablet and mobile terminals.
3. Set view permissions
Select [Permission] to configure the access to the template for users. For instance, select the user demo on the left and ensure that First Mobile Report is visible in the directories displayed on the right.
4. Effect on a mobile terminal
Log in the data analysis APP with the demo account. Find and view First Mobile Report in Report.
V. Download the template
I. Fill Out Reports on Mobile
1. Salespersons and users may need to perform such operations as adding, modifying, and deleting in the database. It is more flexible and convenient to conduct Data Entry on mobile terminals.
2. Data Entry on general reports and dashboards is now available on App and H5.
Note: Data Entry on App supports taking a photo before uploading and scanning, while Data Entry on H5 supports Wechat and DingTalk.
II. Data entry of general reports
1. Set the attributes of the mobile terminal
a) Select [Template]-[Mobile Attribute].
b) Check [Set as mobile canvas size].
c) A new page border can be seen after the above settings are completed.
2. Design report format
a) Create a new dataset query [ds1], select FRDemoEN as the database, and the SQL statement used is as follows:
SELECT * FROM SALES_BASIC
b) Combine A1:F1, and type in: Sales Data Filling. Drag the data column of [ds1] to A3:F3. Type in Region, Salesperson, Product Types, Product, Sales Volume, and Date in A2:F2. Adjust the Row Height and Column Width.
3. Insert the Data Entry widget
a) Select A3 and insert the Drop-down Box widget. Click to set up Data Dictionary.
b) Insert the Drop-down Box widget in B3:D3. Select E3 to insert the Sales Volume widget. Select F3 to insert the Date widget.
4. Report preview
a) Select [Report Mobile Preview]. Set the preview type as [Data Entry] in a browser, and scan the QR code to view the report using the Data Analysis app.
b) The preview effect on a mobile terminal is as follows:
c) After filling in all information, click √ below to submit.
Previous：[General] Setting Focus on a Mobile Text Widget Through JS
