Skip to Content

Wiki source code of 02. Pages Reporting Guide

Last modified by Chris Weston on 06/11/2025, 14:23
Show last authors
1 {{box cssClass="floatinginfobox" title="**Contents**"}}
2 {{toc/}}
3 {{/box}}
4
5 This guide is designed to aid in the creation of [[CXAIR>>doc:Technical Documentation.CXAIR.WebHome]] [[Pages>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome]] reports in the 2019.1 release and will cover the various functionality areas available such as layers, tiling, HTML elements and drill through options.
6
7 = Report Structure =
8
9 When using [[Pages>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome]], there are two distinct modes: **Edit** mode and **Run** mode.
10
11 To edit a Pages report, click the **Edit** icon: [[image:1.png||height="25" width="28"]]
12
13 To run a Pages report, click the **Run** icon: [[image:2.png||height="25" width="28"]]
14
15 When in **Edit** mode, the structure panel located on the left side of the screen contains all the current report information and components:
16
17 [[image:3.png||height="115" width="250"]]
18
19 The floating toolbox contains all available report components and the associated tools to visually manipulate the resulting report.
20
21 The toolbox can be moved anywhere on-screen by clicking and dragging it to the desired location. Its sections can be collapsed using the blue arrow to the right of each heading and the entire toolbox can be collapsed to a single row using the icon in the top-left corner.
22
23 [[image:4.png||height="285" width="250"]]
24
25 To add a component to the report, drag and drop the relevant icon to the required location on the page.
26
27 **Please note: before starting the report building process, it is important to consider who will be digesting the output and how. Setting up the size of the page and its orientation is a key step that must be completed prior to adding components, as making retrospective changes will clear the report.**
28
29 Changes can be made to individual reports, or a set of options can be saved as [[User Preferences>>doc:Technical Documentation.CXAIR.User Guide.6\. User Preferences.WebHome]] that will apply to new reports automatically.
30
31 To change the default layout, navigate to the [[Pages section>>doc:Technical Documentation.CXAIR.User Guide.6\. User Preferences.WebHome||anchor="Pages UP"]] of the [[User Preferences>>doc:Technical Documentation.CXAIR.User Guide.6\. User Preferences.WebHome]]:
32
33 [[image:5.png||height="207" width="250"]]
34
35 = Report Design =
36
37 There are a number of options to consider before designing a [[Pages>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome]] report:
38
39 Is a single-page report required? If so, will it contain a background image and HTML elements to improve its appearance?
40
41 Is an interactive report required? Reports can be created where the user effectively clicks one of a number of buttons to drill through to other layers or pages.
42
43 Is a report containing a number of pages, each displaying the same information split by a relevant field, required? It is possible to create reports that repeats pages based on a specific field, such as Region or Area.
44
45 Examples of each will be given below. There are many ways to create [[Pages>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome]] reports, and the following examples detail a number of key stages.
46
47 == Single Page Report with Background Image, Titles and HTML Elements ==
48
49 **Adding Background Images**
50
51 In **Edit** mode drag a [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] from the toolbox onto the page. Single-click the added component to display a number of component-specific options:
52
53 [[image:6.png||height="187" width="250"]]
54
55 Click **Fill Page** from the Layout section of the toolbox to resize the component to fill the entire page, then double click the added component to display the following popup:
56
57 [[image:7.png||height="400" width="800"]]
58
59 Drag and drop a background image, such as the one below into the white space. Then, using the bottom right corner of the image, resize the image so it fits the outlined blue area. Click **Apply**.
60
61 [[image:8.png||height="447" width="800"]]
62
63 Tip: It is recommended that, when adding images to a report, the **Run** icon at the top of the screen should be clicked to view how the image is currently displayed.
64
65
66 **HTML Elements**
67
68 Now the report has a background image, a number of HTML elements can be added that can serve as a backdrop to individual reporting components. These are added using more [[Text components>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]].
69
70 Click **Page 1** from the structure panel and select **Add Layer** from the floating toolbox. Now, click the up arrow to move **Layer 2** above **Layer 1**:
71
72 [[image:Screenshot 2019-03-11 at 11.22.29.png||height="117" width="600"]]
73
74 Click **Layer 2** and drag a [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] onto the left side of the page. Double-click it and select **Tools**, then **Source Code**.
75
76 Copy and paste the following text into the **Source Code** window:
77
78 **<div style="width: 97%; height: 90%; background: #e1c38f; box-shadow: 5px 5px 5px #888888; border-radius: 1em;">
79 <p style="text-align: center;"><br /></p>
80 <p style="text-align: center;"><span style="font-family: 'trebuchet ms', geneva, sans-serif; color: #fff;"><span style="font-family: 'trebuchet ms', geneva, sans-serif;" class="font24">Header</span></span></p>
81 <br /></div>**
82
83 Click **Ok**, then **Apply**.
84
85 This will provide a light brown box with curved edges, shaded background and a centred header. A selection of useful HTML options are detailed within the [[HTML Examples>>doc:Technical Documentation.CXAIR.User Guide.09\. Reporting Guides.09b\. Pages Reporting Guide.WebHome||anchor="HTML"]] section of this guide that provide an insight into how to amend the colours, headers and other display options.
86
87 In this instance, the report is intended to have three of the smaller HTML [[Text components>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] on the side of the screen and a larger [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] on the right. Resize the [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] then, under **Layer 2**, drag and drop the [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] onto the page. This will add a copy of the previously created [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]]. Repeat this procedure twice more, resize and move accordingly.
88
89 Click **Layer 2** then **Layer Style** at the bottom of the component toolbox. Slightly amend the opacity so background image is slightly visible.
90
91 Click **Run**, and the report should resemble the following image~:
92
93 [[image:9.png||height="565" width="800"]]
94
95 Using the [[Custom component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Custom"]], HTML elements can be saved and used in other reports.
96
97 To save a HTML element, single-click it in edit mode. Then from the toolbox, click **Save**:
98
99 [[image:Screenshot 2019-03-11 at 12.00.02.png||height="109" width="250"]]
100
101 Type a name for the element in the **Report Name** folder and select a destination folder. Click **Save** to complete the process.
102
103 When adding the [[Custom reporting component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Custom"]], previously created HTML elements can now be loaded.
104
105
106 **Adding a Chart to the Report**
107
108 Return to **Edit** mode, click **Page 1** then **Add Layer**. Move this layer to the top of the list.
109
110 Click **Layer 3**, drag a [[Chart component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Chart"]] into the top-left HTML [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] and resize it to fit. Make this a Bar Chart, remove the Legend and style the Chart so that the text colour is FFFFFF and the Background colour is blank, also amending the Bar Chart Colour.
111
112 Click **Save Chart** to add it to the page. Single-click the newly added chart and click **Component Style** in the toolbox. Enable the **Remove Background** option.
113
114
115 **Adding a Crosstab to the Report**
116
117 Click **Layer 3**, drag a [[Crosstab component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Crosstab"]] into the middle-left HTML [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] and resize it to fit. In the **Totals** tab, make this a sum of a monetary value, adding a £ **Prefix** and amending the **Value Format** to be #,##0.##
118
119 Click the **Layout** tab. In the **Table** options, disable the **Show Cell Borders** option. Click the preview and select **Table** from the popup menu to reveal the the **Style** options, where the **Font Size** and **Text Colour** of the totals can be changed.
120
121 Click **Save Crosstab** to add it to the page. Single-click the newly added [[Crosstab>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Crosstab"]] and click **Component Style** in the toolbox. Enable the **Remove Background** option.
122
123 The values in the [[Crosstab>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Crosstab"]] will have the drill through functionality enabled, allowing users to view the underlying records.
124
125
126 **Adding a Headline Figure to the Report**
127
128 The sum of a value will now be added using the same settings found in the [[Crosstab>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Crosstab"]] **Total** tab. However, the drill through functionality will be disabled.
129
130 Click **Layer 3** in the structure panel and drag a [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] into the bottom-left HTML [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] and resize it to fit. Double click the textbox and click the **Sigma** (**&Sigma;**) icon to display the following screen:
131
132 [[image:10.png||height="297" width="400"]]
133
134 Amend the options so that an average of a numeric value is calculated and click **Save**. Click on newly added component and change its **Font Size** and **Colour**. Centrally align the value and click **Apply**.
135 \\Now, drag a [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] into the top-right of the report, above the previously added [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]]. Double click it and drag a logo into the text editor. Click the image and select **Insert**, then **Link**. Enter a valid URL and change the **Target** to be **New Window** before clicking **Ok**. Click **Apply** and then run the report.
136
137 It should resemble the following image~:
138
139 [[image:11.png||height="563" width="800"]]
140
141 When the logo is clicked in run mode, a new browser window will open that will navigate to the specified URL.
142
143
144 **Adding Tiles and Containers to the Report**
145
146 Using **Tiles**, end-users are able to navigate between [[reporting components>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Reporting Components"]] added to the same area of a report. **Containers** take this concept a step further and allow multiple components to be switched at once.
147
148 Return to **Edit** mode, click **Layer 3** and drag a [[Chart component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Chart"]] into the last empty HTML [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] before resizing it to fit. Make this a column chart and change the **Style** options so that the text colour is FFFFFF and the background colour is blank. Amend the column chart **Colour**.
149
150 Click **Save Chart** to add it to the page. Single-click the newly added chart and click **Component Style** in the toolbox. Enable the **Remove Background** option.
151
152 Click the chart and select **Add Tile** from the floating toolbox. This will add a second tile in the same location as the previously created chart and enables the user to change the view between charts. Click **Tile 2** and drag another chart onto the tile.
153
154 Run the report and it should resemble the following image~:
155
156 [[image:12.png||height="564" width="800"]]
157
158 Hovering the mouse over the newly added chart will enable left and right arrows for the user to navigate between tiles.
159
160 Return to **Edit** mode, click the **Tiles** heading from the structure panel and click **Style** from the **Tiles Options** section of the floating toolbox. The **Transition** drop-down list controls how the tile will be changed, with **Slider** selected by default and **Slideshow** available, where the tile is automatically changed after a specified number of seconds. With **Slider** selected from the **Transition** drop-down list, select an option from the **Navigation** drop-down list to modify how users interact with the tiles.
161
162 Containers work in a similar manner but need to be added prior to the reporting components. In **Edit** mode, single-click the chart at the top-left of the report and click **Remove from Page**. Do the same for the [[Crosstab>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Crosstab"]] in the middle HTML element. Using this remove option will keep the report component in the structure panel ready to be re-added with all configuration options preserved.
163
164 Add a [[Container>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Container"]] to the report using the following icon:
165
166 [[image:Screenshot 2019-03-11 at 14.38.16.png||height="141" width="250"]]
167
168 Resize this component so that it encompasses both empty HTML elements and drag the previously removed components back onto the HTML elements from the **Unused** section of the structure panel. They will be now be added to the **Container**.
169
170 Click the **Container** entry in the structure panel and click **Add Tile** from the floating toolbox. Add another **Container** before adding more reporting components, or simply add a single component that can be navigated to using the same options used when adding **Tiles**.
171
172 Now when running the report, multiple components can be controlled using the same **Tile** transition.
173
174 Click the **Save** icon at the top of the report to save the created report.
175
176 == Single Page Report with Drill Through into Layers ==
177
178 In **Edit** mode, click the **New Report** tab to clear the report and load a blank page.
179
180 Click **Page 1** from the structure panel and select **Page Style** from the floating toolbox. Change the **Orientation** to Landscape and the **Background Colour** to EEEEEE.
181
182 Drag a **Text** component onto the page, position it in the top-left corner of the page and then stretch it so it fits the whole width. Double-click it and select **Tools**, then **Source Code**. Copy and paste the following text into the **Source Code** window:
183
184 **<div style="width: 100%; height: 92%; background: #00acdc; border-bottom-right-radius: 10em; border-bottom: 5px solid #313139;">
185 <p style="text-align: center;"><br /></p>
186 <p style="text-align: center;"><span style="font-family: 'trebuchet ms', geneva, sans-serif; color: #fff;"><span style="font-family: 'trebuchet ms', geneva, sans-serif;" class="font24">Header</span></span></p>
187 <br /></div>**
188
189 Click **Apply** to save this change. Drag another [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] onto the page and expand it to fill two-thirds of the page, leaving space on the right side. Add the following HTML to the [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]]:
190
191 **<div style="width: 98%; height: 97%; background: #fff; box-shadow: 5px 5px 5px #888888; border-radius: 1em;">
192 <br /></div>**
193
194 Click **Run**, and the report should resemble the following image~:
195
196 [[image:14.png||height="561" width="800"]]
197
198 Return to **Edit** mode and click **Layer 1** from the structure panel. Click **Rename** from the floating toolbox and name the component Background.
199
200 Click **Page 1** from the structure panel then click **Add Layer** from the floating toolbox. Ensure this layer is moved to the top of the list and rename this to be called Top Layer. On this layer add a small [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] to the right side of the page. This will be used as a button to drill through to another layer. Add the following HTML:
201
202 **<div style="width: 97%; height: 90%; background: #00acdc; box-shadow: 5px 5px 5px #888888; border-radius: 1em;">
203 <p style="text-align: center;"><br /></p>
204 <p style="text-align: center;"><span style="font-family: 'trebuchet ms', geneva, sans-serif; color: #fff;"><span style="font-family: 'trebuchet ms', geneva, sans-serif;" class="font18">Financials</span></span></p>
205 <br /></div>**
206
207 From the structure panel, locate the [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] that has just been modified. Drag this from the panel onto the page, below the original component. This will create an exact copy of the component. Double-click the copy and in the HTML, replace the word ‘Financials’ with ‘Trends’. This will amend the button name.
208
209 Drag a [[Chart component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Chart"]] into the middle [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]], resize it to fit and make the chart a record count and a column chart.
210
211 Select the [[Chart component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Chart"]] and (% style="-webkit-text-stroke-width:0px; background-color:#ffffff; color:#666666; display:inline !important; float:none; font-family:Roboto,~"Helvetica Neue~",Helvetica,Arial,sans-serif; font-size:13px; font-style:normal; font-variant-caps:normal; font-variant-ligatures:normal; font-weight:400; letter-spacing:0.1px; orphans:2; text-align:start; text-decoration-color:initial; text-decoration-style:initial; text-decoration-thickness:initial; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px" %)select (% style="-webkit-text-stroke-width:0px; background-color:#ffffff; box-sizing:border-box; color:#666666; font-family:Roboto,~"Helvetica Neue~",Helvetica,Arial,sans-serif; font-size:13px; font-style:normal; font-variant-caps:normal; font-variant-ligatures:normal; font-weight:bold; letter-spacing:0.1px; orphans:2; text-align:start; text-decoration-color:initial; text-decoration-style:initial; text-decoration-thickness:initial; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px" %)**Drill**(% style="-webkit-text-stroke-width:0px; background-color:#ffffff; color:#666666; display:inline !important; float:none; font-family:Roboto,~"Helvetica Neue~",Helvetica,Arial,sans-serif; font-size:13px; font-style:normal; font-variant-caps:normal; font-variant-ligatures:normal; font-weight:400; letter-spacing:0.1px; orphans:2; text-align:start; text-decoration-color:initial; text-decoration-style:initial; text-decoration-thickness:initial; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px" %) in the toolbox to modify the drill action. (%%)T(% style="-webkit-text-stroke-width:0px; background-color:#ffffff; color:#666666; display:inline !important; float:none; font-family:Roboto,~"Helvetica Neue~",Helvetica,Arial,sans-serif; font-size:13px; font-style:normal; font-variant-caps:normal; font-variant-ligatures:normal; font-weight:400; letter-spacing:0.1px; orphans:2; text-align:start; text-decoration-color:initial; text-decoration-style:initial; text-decoration-thickness:initial; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px" %)o display a pop-up window containing the drill through records specific to the data point clicked, select (% style="-webkit-text-stroke-width:0px; background-color:#ffffff; box-sizing:border-box; color:#666666; font-family:Roboto,~"Helvetica Neue~",Helvetica,Arial,sans-serif; font-size:13px; font-style:normal; font-variant-caps:normal; font-variant-ligatures:normal; font-weight:bold; letter-spacing:0.1px; orphans:2; text-align:start; text-decoration-color:initial; text-decoration-style:initial; text-decoration-thickness:initial; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px" %)**Popup**(% style="-webkit-text-stroke-width:0px; background-color:#ffffff; color:#666666; display:inline !important; float:none; font-family:Roboto,~"Helvetica Neue~",Helvetica,Arial,sans-serif; font-size:13px; font-style:normal; font-variant-caps:normal; font-variant-ligatures:normal; font-weight:400; letter-spacing:0.1px; orphans:2; text-align:start; text-decoration-color:initial; text-decoration-style:initial; text-decoration-thickness:initial; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px" %) from the (% style="-webkit-text-stroke-width:0px; background-color:#ffffff; box-sizing:border-box; color:#666666; font-family:Roboto,~"Helvetica Neue~",Helvetica,Arial,sans-serif; font-size:13px; font-style:normal; font-variant-caps:normal; font-variant-ligatures:normal; font-weight:bold; letter-spacing:0.1px; orphans:2; text-align:start; text-decoration-color:initial; text-decoration-style:initial; text-decoration-thickness:initial; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px" %)**Drill-To**(% style="-webkit-text-stroke-width:0px; background-color:#ffffff; color:#666666; display:inline !important; float:none; font-family:Roboto,~"Helvetica Neue~",Helvetica,Arial,sans-serif; font-size:13px; font-style:normal; font-variant-caps:normal; font-variant-ligatures:normal; font-weight:400; letter-spacing:0.1px; orphans:2; text-align:start; text-decoration-color:initial; text-decoration-style:initial; text-decoration-thickness:initial; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px" %) drop-down list. The Pop-up Element will default to 'Report' which displays the records in a table, but you can pass the context through to another element.
212
213 Click **Run**, and the report should resemble the following image~:
214
215 [[image:15.png||height="562" width="800"]]
216
217 Notice that when selecting '(% data-valueid="-1" class="h v" %)Birmingham and North Midlands(%%)' this loads a pop-up table containing the context specific records rather than loading the query screen:
218
219 [[image:1705061051217-687.png||height="529" width="713"]]
220
221 Return to **Edit** mode and click on the Top Layer. In the floating toolbox, click **Copy**. There will now be a third layer called Copy of Top Layer. Ensure this is positioned below Top Layer in the structure panel.
222
223 Click on Copy of Top Layer in the structure panel and select **Layer Style** from the floating toolbox. Enable the **Hidden** option and click **Apply**.
224
225 Rename the Top Layer to Financials, rename Copy of Top Layer to Trends.
226
227 On the Financials layer, double click the Financials [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] on the page and change the name in the HTML to Top Layer. Double-click the [[Chart component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Chart"]], amend it to be a bar chart using different colours, containing financial information. Add the name Financials to user field 1 and add this to the chart header.
228
229 On the Trends layer, double click the Financials [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] on the page and change the name in the HTML to Top Layer. Double-click the [[Chart component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Chart"]], add the name Trends to user field 1 and add this to the chart header.
230
231 To activate the buttons, first click the Financials button then click **Drill** from the floating toolbox. Here, the setting can be amended, allowing a component to drill through to another layer or page. Select the Financials layer. Repeat this process for each of the three layers containing charts.
232
233 Click **Run**, then click the Financials button and the report should navigate to the Financials Layer:
234
235 [[image:16.png||height="562" width="800"]]
236
237 Click the Trends button and the user should see the Trends Layer:
238
239 [[image:17.png||height="564" width="800"]]
240
241 Click the **Save** icon at the top of the report to save the created report.
242
243 == Page Report with Break Fields ==
244
245 In **Edit** mode, click the **New Report** tab to clear the report and load a blank page. Click **Report Style** from the floating toolbox and change the **Orientation** to **Landscape**.
246
247 Drag a [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] onto the page that fills three-quarters of the screen. Double-click the component and drag a background image into it.
248
249 Click on **Page 1** then **Add Layer**. Using this new layer, drag a [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] to the right of the screen. Double-click this and drag in a logo. Resize accordingly.
250
251 Drag a [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] to the top-left of the screen. Double-click this and give the report a header.
252
253 Click **Run**, and the report should resemble the following image~:
254
255 [[image:18.png||height="562" width="800"]]
256
257 Return to **Edit** mode, click **Page 1** and select **Copy** from the floating toolbox. A new page called Page 1#1 will now be available in the structure panel. Click on Page 1#1 and rename it to Information Page.
258
259 On the Information Page, click on **Layer 1** and reduce the opacity using the **Style** options.
260
261 Click on Layer 2 and drag a [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] onto a page. Add the following HTML:
262
263 **<div style="width: 100%; height: 90%; background-color: #29374a; border-radius: 15px; box-shadow: 4px 4px 4px #888888; text-align: center; color: #fff; vertical-align: middle; font-size: 20pt; padding-top: 15px;">Overall Rating</div>
264 <div>
265 <p><br /></p>
266 </div>**
267
268 This will be used to add a [[gauge>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Gauges"]] on top of it. Repeat the procedure but use the slightly amended HTML below:
269
270 **<div style="width: 100%; height: 95%; background-color: #29374a; border-radius: 15px; box-shadow: 4px 4px 4px #888888; text-align: center; color: #fff; vertical-align: middle; font-size: 20pt; padding-top: 15px;">Trends</div>
271 <div>
272 <p><br /></p>
273 </div>**
274
275 This will be used to add a [[chart>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Chart"]] on top of it. Run the report and there should now be two pages available, with the second page resembling the following image~:
276
277 [[image:19.png||height="561" width="800"]]
278
279 Return to **Edit** mode, click on the Information Page and **Add Layer**. Click on Layer 3 then drag a [[Gauge component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Gauges"]] onto the Overall rating HTML [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] and a [[Chart component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Chart"]] onto the Trends HTML [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]]. Remove the background on both components and in the change the chart text colour to be FFFFFF. Run the report and the Information Page should resemble the following image~:
280
281 [[image:20.png||height="533" width="800"]]
282
283 Currently all of the data within the Index is being displayed. By breaking this page down by a field, such as Region Name, the same page structure will be displayed but only against each Region’s data.
284
285 To create a page break, return to **Edit** mode and in the click the **Layout** tab above the structure panel.
286
287 The following screen should be displayed:
288
289 [[image:21.png||height="121" width="400"]]
290
291 The current page layout is displayed on the right side of the screen. The pages can be dragged above or below to re-order them, if necessary. To create the break fields, drag a field from the left side and onto the Information Page.
292
293 This will display the following:
294
295 [[image:22.png||height="121" width="136"]]
296
297 To order or exclude values, click the **Magnifying Glass** icon located to the left of the **X** icon.
298
299 Click the **Pages** tab above the structure panel and click on Layer 2 beneath the Information Page. Double click the [[Text component>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.WebHome||anchor="Text"]] containing the header. Delete the text contained within here and under the **Add Field** drop-down list, select the field you have just broken the page on, such as Region Name. Amend the font size and format, if required. This will identify the Region Name on each Page.
300
301 Run the report. After the header page, there will be a page per each value in the field specified.
302
303 Click the **Save** icon at the top of the report to save the created report.
304
305 = Additional Options =
306
307 Options from the Toolbox include:
308
309 * **Snap** – this is useful in providing more flexibility for resizing elements
310 * **Rotate** – this enables components to be rotated into the desired on-screen position
311 * **Transform** – is used to stretch or shrink the sides of a component.
312
313 Clicking on any report component will reveal its properties and options in the floating toolbox:
314
315 * **Drill **to set the drill action for the component, (% style="-webkit-text-stroke-width:0px; background-color:#ffffff; color:#666666; display:inline !important; float:none; font-family:Roboto,~"Helvetica Neue~",Helvetica,Arial,sans-serif; font-size:13px; font-style:normal; font-variant-caps:normal; font-variant-ligatures:normal; font-weight:400; letter-spacing:0.1px; orphans:2; text-align:start; text-decoration-color:initial; text-decoration-style:initial; text-decoration-thickness:initial; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px" %)it can be used to navigate to separate layers of the report or present users with a pop-up window
316 * **Add Tile**
317 * **Rename**
318 * **Create Links to other charts and Crosstabs**
319 * **Info **will inform the user which Search Engine and Index the component is built from
320 * **Remove from Page** (the component is removed from the page but still available under the Unused list from the left-hand structure)
321 * **Remove from Report** (completely removed from the report)
322
323 Clicking on any report page or background will reveal its style options in the floating toolbox:
324
325 * **Report Style**
326 ** **Page Size** sets the dimensions of the report
327 ** **Cell Size **lets you change the size of the snap to grid background
328 ** **Cycle through pages** (% style="-webkit-text-stroke-width:0px; background-color:#ffffff; color:#666666; display:inline !important; float:none; font-family:Roboto,~"Helvetica Neue~",Helvetica,Arial,sans-serif; font-size:13px; font-style:normal; font-variant-caps:normal; font-variant-ligatures:normal; font-weight:400; letter-spacing:0.1px; orphans:2; text-align:start; text-decoration-color:initial; text-decoration-style:initial; text-decoration-thickness:initial; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px" %)Automatically cycles through pages within the report, refreshing data as each page is displayed.
329 * **Page Style **Set these options before adding content to your report, the layout changes will clear your layout. These are the settings to change the page orientation and background colour.
330 * **Layer Style** This allows you to hide the layer and set Opacity.
331
332
333
334 = {{id name="HTML"/}}HTML Examples =
335
336 == Rectangular Box with Full Border ==
337
338 **<div style="width: 99%; height: 99%; background: #ccc; border: 2px solid #000;"><br /></div>**
339
340 Style=width: 99%; height: 99% - box ;
341 background:#ccc - colour of the box;
342 border: 1px solid #000 - border of the box
343
344 [[image:23.png||height="235" width="400"]]
345
346 == Blue Box with Curved Edges, Border and Shadowed Background ==
347
348 **<div style="width: 98%; height: 96%; background: #00acdc; border: 1px solid #000; box-shadow: 10px 10px 5px #888888; border-radius: 1em;"><br /></div>**
349
350 box-shadow: 10px 10px 5px #888888 - background shadow & size and colour
351 border-radius: 1em - cornered edges
352
353 [[image:24.png||height="213" width="400"]]
354
355 == Blue Box with Curved Edges, Shaded Background and centred Header ==
356
357 **<div style="width: 97%; height: 90%; background: #00acdc; box-shadow: 5px 5px 5px #888888; border-radius: 1em;">
358 <p style="text-align: center;"><br /></p>
359 <p style="text-align: center;"><span style="font-family: 'trebuchet ms', geneva, sans-serif; color: #fff;"><span style="font-family: 'trebuchet ms', geneva, sans-serif;" class="font24">Header</span></span></p>
360 <br /></div>**
361
362 [[image:25.png||height="230" width="400"]]
363
364 == White Box with Curved Edges, Shaded Background Left-aligned Element Header ==
365
366 **<div style="width: 97%; height: 95%; background: #fff; box-shadow: 5px 5px 5px #888888; border-radius: 1em;">
367 <p style="text-align: left; padding-left: 30px;" class="font14"><span color="#00acdc" style="color: #00acdc;">Element header</span></p>
368 <br /></div>**
369
370 **[[image:26.png||height="230" width="400"]]**
371
372 == Header with Curved Corner and Coloured Border ==
373
374 **<div style="width: 100%; height: 92%; background: #00acdc; border-bottom-right-radius: 10em; border-bottom: 5px solid #313139;">
375 <p style="text-align: center;"><br /></p>
376 <p style="text-align: center;"><span style="font-family: 'trebuchet ms', geneva, sans-serif; color: #fff;"><span style="font-family: 'trebuchet ms', geneva, sans-serif;" class="font24">Header</span></span></p>
377 <br /></div>**
378
379 **[[image:27.png||height="125" width="400"]]**
380
381 == White Shadowed Box ==
382
383 **<div style="width: 99%; height: 99%; background: #fff; box-shadow: 5px 5px 5px #888888; border-bottom-right-radius: 4em;">
384 <p style="text-align: left; padding-left: 30px;" class="font14">Element Header</p>
385 <br /></div>**
386
387 [[image:28.png||height="242" width="400"]]
388
389 == Header with Curved Corner and Sub-header ==
390
391 **<div style="width: 100%; height: 92%; background: #00acdc; border-bottom-right-radius: 10em; border-bottom: 5px solid #313139;">
392 <p style="text-align: center;"><br /></p>
393 <p style="text-align: center;"><span style="font-family: 'trebuchet ms', geneva, sans-serif; color: #fff;"><span style="font-family: 'trebuchet ms', geneva, sans-serif;" class="font28">Header</span></span></p>
394 <p style="text-align: center;"><span style="font-family: 'trebuchet ms', geneva, sans-serif; color: #ffffff;"><span style="font-family: 'trebuchet ms', geneva, sans-serif; color: #ffffff;" class="font12">Sub Header</span></span></p>
395 <br /></div>**
396
397 [[image:29.png||height="128" width="400"]]
398
399 == Textbox with Blue Border, Curved edge and Header ==
400
401 **<div style="width: 98%; height: 97%; background: #fff; border-bottom-right-radius: 4em; border: 1px solid #00acdc; box-shadow: 3px 3px 3px #888888;">
402 <p style="text-align: left; padding-left: 30px;" class="font14">Element Header</p>
403 <br /></div>**
404
405 [[image:30.png||height="259" width="400"]]
406
407 == Header with Curved Top and Corners ==
408
409 **<div style="width: 100%; height: 80%; background: #00acdc; border-bottom-right-radius: 10em; border-top-right-radius: 10em; border-top: 15px solid #313139;">
410 <p style="text-align: center;"><br /></p>
411 <p style="text-align: center;"><span color="#030303" face="trebuchet ms, geneva, sans-serif" style="color: #313139; font-family: 'trebuchet ms', geneva, sans-serif;"><span style="font-size: 37.3333px;">Header</span></span></p>
412 <br /></div>**
413
414 [[image:31.png||height="141" width="400"]]
415
416 == Box with Header and Paragraph including Hyperlink ==
417
418 **<div style="width: 98%; height: 94%; background-color: #dddddd; border-radius: 1em; box-shadow: 5px 5px 5px #888888; text-align: center; color: #005395; vertical-align: middle; font-size: 20pt; padding-top: 10px;">Hydration<br />
419 <div style="text-align: left; color: #eb3d3a; font-size: 14pt; padding-top: 10px; padding-left: 5px;">The study (DRIE) found high prevalence of dehydration in older people living in UK long-term care, reinforcing the proposed association between cognitive and renal function and hydration. Dehydration is associated with increased mortality and disability in older people.</div>
420 <div style="text-align: left; color: #eb3d3a; font-size: 14pt; padding-top: 10px; padding-left: 5px;">(<a href="http[[:>>http://biomedgerontology.oxfordjournals.org/content/71/10/1341.short?rss=1]]~/~/biomedgerontology.oxfordjournals.org/content/71/10/1341.short?rss=1" target="_blank">Link to The Journal of Gerontology - Which Frail Older People are Dehydrated</a>)</div>
421 </div>**
422
423 [[image:32.png||height="276" width="400"]]
424
425 == White Box with Shaded Corner and Blue Border ==
426
427 **<div style="width: 97%; height: 95%; background: #fff; box-shadow: 5px 5px 5px #888888; border-top: 1px solid #0075C2; border-left: 1px solid #0075C2;"><br /></div>**
428
429 [[image:33.png||height="276" width="400"]]
430
431 == Header with Bottom Border ==
432
433 **<div style="width: 100%; height: 92%; background: #0075C2; border-bottom: 5px solid #313139;">
434 <p style="text-align: left; padding-left: 30px;"><span style="font-family: 'trebuchet ms', geneva, sans-serif; color: #fff;"><span style="font-family: 'trebuchet ms', geneva, sans-serif;" class="font28">Header</span></span></p>
435 <br /></div>**
436
437 [[image:34.png||height="101" width="400"]]
438
439 == Header with Text Shadow ==
440
441 **<p><span class="font54" style="color: #00acdc; text-shadow: 3px 2px #888;">Header</span></p>**
442
443 [[image:35.png||height="210" width="400"]]
444
445 == Orange Dotted Border ==
446
447 **<div style="width: 99.5%; height: 99%; border-bottom: 2px dashed #E17029; border-right: 2px dashed #E17029;"><br /></div>**
448
449 [[image:36.png||height="273" width="400"]]
450
451 == Element Box with Header ==
452
453 **<div style="width: 330px; height: 30px; background: #ffffff; border: 2px solid #cccccc; text-align: left; padding-left: 10px; padding-top: 7.5px;"><span style="font-family: 'trebuchet ms', geneva, sans-serif; color: #313139;"><span class="font14">Element Header</span></span></div>
454 <div style="width: 340px; height: 125px; background: #fff; border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; border-left: 2px solid #ccc;"><br /></div>**
455
456 [[image:37.png||height="324" width="400"]]