Wiki source code of 04. About Components
Last modified by Ian Covey on 06/11/2025, 14:24
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{box cssClass="floatinginfobox" title="**Contents**"}} | ||
| 2 | {{toc/}} | ||
| 3 | {{/box}} | ||
| 4 | |||
| 5 | (% class="lead" %) | ||
| 6 | Learn more about using Pages Components to help you build reports that display your data in the most effective way. | ||
| 7 | |||
| 8 | Pages Components are the tables, charts and gauges used to display data and other elements used to present information in your reports. | ||
| 9 | |||
| 10 | You can add as many components as required to each page, layer, and Tile in your Pages report. | ||
| 11 | |||
| 12 | |||
| 13 | = Types of Components = | ||
| 14 | |||
| 15 | Pages components can be split into two categories: | ||
| 16 | |||
| 17 | * **Data Components** – those that enable you to add data from your CXAir indexes to the report. | ||
| 18 | * **Structuring & Styling Components** – those that enable you to control the layout & design of your report. | ||
| 19 | |||
| 20 | (% border="1" cellspacing="0" style="border-collapse:collapse; border:solid windowtext 1.0pt" class="MsoTableGrid" %) | ||
| 21 | (% style="height:26.65pt" %)|(% width="226" style="background-color:#e7e6e6; background:#e7e6e6; border-style:solid; border-width:1.0pt; width:169.85pt" %)((( | ||
| 22 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 23 | (% style="color:black; height:26.65pt; line-height:normal" %)**Category** | ||
| 24 | )))|(% width="375" style="background-color:#e7e6e6; background:#e7e6e6; border-left:none; border-style:solid; border-width:1.0pt; width:280.95pt" %)((( | ||
| 25 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 26 | (% style="color:black; height:26.65pt; line-height:normal" %)**Components** | ||
| 27 | ))) | ||
| 28 | |(% width="226" style="border-style:solid; border-width:1.0pt; width:169.85pt" %)((( | ||
| 29 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 30 | (% style="line-height:normal" %)**Data Components** | ||
| 31 | )))|(% width="375" style="border-bottom:solid windowtext 1.0pt; border-left:none; border-right:solid windowtext 1.0pt; width:280.95pt" %)((( | ||
| 32 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 33 | (% style="line-height:normal" %)Crosstab | ||
| 34 | |||
| 35 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 36 | (% style="line-height:normal" %)Chart | ||
| 37 | |||
| 38 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 39 | (% style="line-height:normal" %)Guage | ||
| 40 | |||
| 41 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 42 | (% style="line-height:normal" %)Query | ||
| 43 | |||
| 44 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 45 | (% style="line-height:normal" %)Venn | ||
| 46 | |||
| 47 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 48 | (% style="line-height:normal" %)Custom | ||
| 49 | ))) | ||
| 50 | |(% width="226" style="border-style:solid; border-width:1.0pt; width:169.85pt" %)((( | ||
| 51 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 52 | (% style="line-height:normal" %)**Structuring & Styling Components** | ||
| 53 | )))|(% width="375" style="border-bottom:solid windowtext 1.0pt; border-left:none; border-right:solid windowtext 1.0pt; width:280.95pt" %)((( | ||
| 54 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 55 | (% style="line-height:normal" %)Text | ||
| 56 | |||
| 57 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 58 | (% style="line-height:normal" %)Embed | ||
| 59 | |||
| 60 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 61 | (% style="line-height:normal" %)External | ||
| 62 | |||
| 63 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 64 | (% style="line-height:normal" %)Report Link | ||
| 65 | |||
| 66 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 67 | (% style="line-height:normal" %)Filter | ||
| 68 | |||
| 69 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 70 | (% style="line-height:normal" %)Placeholder | ||
| 71 | |||
| 72 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 73 | (% style="line-height:normal" %)Container | ||
| 74 | |||
| 75 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 76 | (% style="line-height:normal" %)Custom | ||
| 77 | ))) | ||
| 78 | |||
| 79 | . | ||
| 80 | |||
| 81 | = Adding and Editing Components = | ||
| 82 | |||
| 83 | == Adding components to a report == | ||
| 84 | |||
| 85 | To add a component to a report: | ||
| 86 | |||
| 87 | 1. Click the component's icon on the Dynamic Toolbar then **drag it onto the Workspace**. | ||
| 88 | |||
| 89 | . | ||
| 90 | |||
| 91 | == Moving & Resizing components == | ||
| 92 | |||
| 93 | === Moving a component === | ||
| 94 | |||
| 95 | Once you’ve added a component to the workspace, to move it: | ||
| 96 | |||
| 97 | 1. Click anywhere in the centre of the component then drag it. As you begin to drag the component, the new position of the component is illustrated with a green outline. | ||
| 98 | |||
| 99 | (% class="box" %) | ||
| 100 | ((( | ||
| 101 | **Note:** You can move components so that they overlay each other. This is useful when designing the look & feel of your report, however, be aware that overlaying components can cause readability and interactivity issues. | ||
| 102 | ))) | ||
| 103 | |||
| 104 | . | ||
| 105 | |||
| 106 | === Resizing a component === | ||
| 107 | |||
| 108 | To resize a component: | ||
| 109 | |||
| 110 | 1. Hover over the component to displays the component’s 8 resizing drag handles. | ||
| 111 | 1. These allow you to resize a component horizontally, vertically, and diagonally by clicking then dragging the appropriate handle. | ||
| 112 | |||
| 113 | . | ||
| 114 | |||
| 115 | === Setting the Width of the Component Dynamically === | ||
| 116 | |||
| 117 | The Layout section on the Dynamic Toolbar. | ||
| 118 | |||
| 119 | (% border="1" cellspacing="0" style="border-collapse:collapse; border:solid windowtext 1.0pt" class="MsoTableGrid" %) | ||
| 120 | (% style="height:24.95pt" %)|(% width="301" style="background-color:#f2f2f2; background:#f2f2f2; border-style:solid; border-width:1.0pt; width:225.4pt" %)((( | ||
| 121 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 122 | (% style="color:black; height:24.95pt; line-height:normal" %)**Option** | ||
| 123 | )))|(% width="301" style="background-color:#f2f2f2; background:#f2f2f2; border-left:none; border-style:solid; border-width:1.0pt; width:225.4pt" %)((( | ||
| 124 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 125 | (% style="color:black; height:24.95pt; line-height:normal" %)**Description** | ||
| 126 | ))) | ||
| 127 | |(% width="301" style="border-style:solid; border-top:none; border-width:1.0pt; width:225.4pt" %)((( | ||
| 128 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 129 | (% style="line-height:normal" %)**Fit to container** | ||
| 130 | )))|(% width="301" style="border-bottom:solid windowtext 1.0pt; border-left:none; border-right:solid windowtext 1.0pt; border-top:none; width:225.4pt" %)((( | ||
| 131 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 132 | (% style="line-height:normal" %)The data component will be resized to fit both the width and height set when added to the Workspace. | ||
| 133 | |||
| 134 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 135 | (% style="line-height:normal" %)No scroll bars. | ||
| 136 | ))) | ||
| 137 | |(% width="301" style="border-style:solid; border-top:none; border-width:1.0pt; width:225.4pt" %)((( | ||
| 138 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 139 | (% style="line-height:normal" %)**Fit width** | ||
| 140 | )))|(% width="301" style="border-bottom:solid windowtext 1.0pt; border-left:none; border-right:solid windowtext 1.0pt; border-top:none; width:225.4pt" %)((( | ||
| 141 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 142 | (% style="line-height:normal" %)The data component will be resized to fit both the width and height set when added to the Workspace. | ||
| 143 | ))) | ||
| 144 | |(% width="301" style="border-style:solid; border-top:none; border-width:1.0pt; width:225.4pt" %)((( | ||
| 145 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 146 | (% style="line-height:normal" %)**Fit Height** | ||
| 147 | )))|(% width="301" style="border-bottom:solid windowtext 1.0pt; border-left:none; border-right:solid windowtext 1.0pt; border-top:none; width:225.4pt" %)((( | ||
| 148 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 149 | (% style="line-height:normal" %)The data component will be resized to fit both the width and height set when added to the Workspace. | ||
| 150 | ))) | ||
| 151 | |(% width="301" style="border-style:solid; border-top:none; border-width:1.0pt; width:225.4pt" %)((( | ||
| 152 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 153 | (% style="line-height:normal" %)**Original Size** | ||
| 154 | )))|(% width="301" style="border-bottom:solid windowtext 1.0pt; border-left:none; border-right:solid windowtext 1.0pt; border-top:none; width:225.4pt" %)((( | ||
| 155 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 156 | (% style="line-height:normal" %)The data component will not be resized. | ||
| 157 | |||
| 158 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 159 | (% style="line-height:normal" %)If it needs more room to | ||
| 160 | ))) | ||
| 161 | |(% width="301" style="border-style:solid; border-top:none; border-width:1.0pt; width:225.4pt" %)((( | ||
| 162 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 163 | (% style="line-height:normal" %)**Fill Page** | ||
| 164 | )))|(% width="301" style="border-bottom:solid windowtext 1.0pt; border-left:none; border-right:solid windowtext 1.0pt; border-top:none; width:225.4pt" %)((( | ||
| 165 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 166 | (% style="line-height:normal" %)The data component is resized to fill the full width of the Workspace. | ||
| 167 | ))) | ||
| 168 | |||
| 169 | . | ||
| 170 | |||
| 171 | = Styling Components = | ||
| 172 | |||
| 173 | Each component on your Pages report can be styled to change its appearance and behaviour. | ||
| 174 | |||
| 175 | How much control you have over the appearance & behaviour varies depending on the component. | ||
| 176 | |||
| 177 | To access the component style settings: | ||
| 178 | |||
| 179 | 1. Click the component that you want to style. | ||
| 180 | 1. Click the Component Style icon on the Dynamic Toolbar. This displays the Component Style dialog. | ||
| 181 | |||
| 182 | . | ||
| 183 | |||
| 184 | (% id="HCommonComponentStyleoptions" %) | ||
| 185 | **Common Component Style options** | ||
| 186 | |||
| 187 | (% border="1" cellspacing="0" class="MsoTableGrid" style="border-collapse:collapse; border:solid windowtext 1.0pt" %) | ||
| 188 | (% style="height:25.1pt" %)|(% style="background-color:#f2f2f2; background:#f2f2f2; border-style:solid; border-width:1.0pt; width:120.25pt" width="160" %)((( | ||
| 189 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 190 | (% style="color:black; height:25.1pt; line-height:normal" %)**Option** | ||
| 191 | )))|(% style="background-color:#f2f2f2; background:#f2f2f2; border-left:none; border-style:solid; border-width:1.0pt; width:191.75pt" width="256" %)((( | ||
| 192 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 193 | (% style="color:black; height:25.1pt; line-height:normal" %)**How to set** | ||
| 194 | )))|(% style="background-color:#f2f2f2; background:#f2f2f2; border-left:none; border-style:solid; border-width:1.0pt; width:138.8pt" width="185" %)((( | ||
| 195 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 196 | (% style="color:black; height:25.1pt; line-height:normal" %)**Description** | ||
| 197 | ))) | ||
| 198 | |(% style="border-style:solid; border-top:none; border-width:1.0pt; width:120.25pt" width="160" %)((( | ||
| 199 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 200 | (% style="line-height:normal" %)**Remove Background** | ||
| 201 | )))|(% style="border-bottom:solid windowtext 1.0pt; border-left:none; border-right:solid windowtext 1.0pt; border-top:none; width:191.75pt" width="256" %)((( | ||
| 202 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 203 | (% style="line-height:normal" %)Click the checkbox. | ||
| 204 | )))|(% style="border-bottom:solid windowtext 1.0pt; border-left:none; border-right:solid windowtext 1.0pt; border-top:none; width:138.8pt" width="185" %)((( | ||
| 205 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 206 | (% style="line-height:normal" %)Makes the component’s background transparent. | ||
| 207 | ))) | ||
| 208 | |(% style="border-style:solid; border-top:none; border-width:1.0pt; width:120.25pt" width="160" %)((( | ||
| 209 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 210 | (% style="line-height:normal" %)**Border Style** | ||
| 211 | )))|(% style="border-bottom:solid windowtext 1.0pt; border-left:none; border-right:solid windowtext 1.0pt; border-top:none; width:191.75pt" width="256" %)((( | ||
| 212 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 213 | (% style="line-height:normal" %)Select from the drop-down list whether you want to apply a rounded-corner or square-cornered border to the component. | ||
| 214 | )))|(% style="border-bottom:solid windowtext 1.0pt; border-left:none; border-right:solid windowtext 1.0pt; border-top:none; width:138.8pt" width="185" %)((( | ||
| 215 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 216 | (% style="line-height:normal" %)Add a border to the component | ||
| 217 | ))) | ||
| 218 | |(% style="border-style:solid; border-top:none; border-width:1.0pt; width:120.25pt" width="160" %)((( | ||
| 219 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 220 | (% style="line-height:normal" %)**Auto Refresh** | ||
| 221 | )))|(% style="border-bottom:solid windowtext 1.0pt; border-left:none; border-right:solid windowtext 1.0pt; border-top:none; width:191.75pt" width="256" %)((( | ||
| 222 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 223 | (% style="line-height:normal" %)Enter the time in seconds after which the data will refresh. | ||
| 224 | )))|(% style="border-bottom:solid windowtext 1.0pt; border-left:none; border-right:solid windowtext 1.0pt; border-top:none; width:138.8pt" width="185" %)((( | ||
| 225 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 226 | (% style="line-height:normal" %)Refreshes the data displayed in the component | ||
| 227 | ))) | ||
| 228 | |(% style="border-style:solid; border-top:none; border-width:1.0pt; width:120.25pt" width="160" %)((( | ||
| 229 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 230 | (% style="line-height:normal" %)**Scroll when required** | ||
| 231 | )))|(% style="border-bottom:solid windowtext 1.0pt; border-left:none; border-right:solid windowtext 1.0pt; border-top:none; width:191.75pt" width="256" %)((( | ||
| 232 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 233 | (% style="line-height:normal" %)Click the checkbox. | ||
| 234 | )))|(% style="border-bottom:solid windowtext 1.0pt; border-left:none; border-right:solid windowtext 1.0pt; border-top:none; width:138.8pt" width="185" %)((( | ||
| 235 | (% style="margin-bottom:0cm; padding:0cm 5.4pt 0cm 5.4pt" %) | ||
| 236 | (% style="line-height:normal" %)Displays scrollbars if the contents of the component is larger than the size allocated on the Workspace. | ||
| 237 | ))) | ||
| 238 | |||
| 239 | . | ||
| 240 | |||
| 241 | == Removing Components == | ||
| 242 | |||
| 243 | To remove a component: | ||
| 244 | |||
| 245 | 1. Click the component you want to remove. You now have 2 options: | ||
| 246 | |||
| 247 | * Click the **Remove From Page** icon to remove the component from the report but store it in the Unused section of the Report Structure Panel. This retains any configuration & styling changes you’ve made to the component’s settings. | ||
| 248 | * Click the **Remove From Report** icon on the Dynamic Toolbar to permanently remove the component. | ||
| 249 | |||
| 250 | . | ||
| 251 | |||
| 252 | = Data Components = | ||
| 253 | |||
| 254 | == Crosstab == | ||
| 255 | |||
| 256 | Page’s Crosstabs give you the power to build sophisticated, interactive data tables. | ||
| 257 | |||
| 258 | It's simple, intuitive interface allows you to nest multiple fields as rows or columns, select multiple measures and calculations, apply traffic lighting and field formatting on any data and produce tables of results. | ||
| 259 | |||
| 260 | When adding a Crosstab to your Workspace, the following options are displayed: | ||
| 261 | |||
| 262 | * Create New. | ||
| 263 | * Load Existing. | ||
| 264 | * Link Existing. | ||
| 265 | |||
| 266 | Click **Create New** to build a new Crosstab without leaving the current screen. Once the relevant options have been set, click Save Crosstab to add it to the current report. | ||
| 267 | |||
| 268 | [[Learn more about Crosstabs>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.02c\. Crosstabs.WebHome]] | ||
| 269 | |||
| 270 | |||
| 271 | Click Load Existing to add a previously created Crosstab to the report or click Link Existing to add a previously created Crosstab that will update to reflect any changes to the source Crosstab. Both options open the Saved Reports window, where clicking the checkbox next to the relevant report will load it. | ||
| 272 | |||
| 273 | If a Crosstab is loaded that contains both a table and a chart, the option to Ignore Chart or Split Crosstab will appear. The Split Crosstab option will halve the window, placing the table in one section and the chart in the other, while the Ignore Chart option will only load the Crosstab table onto the report. | ||
| 274 | |||
| 275 | . | ||
| 276 | |||
| 277 | == Chart == | ||
| 278 | |||
| 279 | Page’s Charts component uses the same intuitive builder interface as Crosstabs – giving the ability to easily add interactive charts to your Pages report. | ||
| 280 | |||
| 281 | When adding a chart to your Workspace, the following options are displayed: | ||
| 282 | |||
| 283 | * Create New. | ||
| 284 | * Load Existing. | ||
| 285 | * Link Existing. | ||
| 286 | |||
| 287 | Click Create New to enter the Crosstab interface with the addition of the Charting tab. Once the relevant options have been set, click Save Chart to add it to the current report. Alternatively, click the Save icon to save it for future use. | ||
| 288 | |||
| 289 | |||
| 290 | Click Load Existing to add a previously created chart to the report or click Link Existing to add a previously created chart that will update to reflect any changes to the source Crosstab. Both options will open the Saved Reports window, where clicking the checkbox next to the relevant chart will load it into the report. | ||
| 291 | |||
| 292 | If a Crosstab is loaded that contains both a table and a chart, the options to Ignore Table or Split Crosstab will appear. The Split Crosstab option will halve the window, placing the table in one section and the chart in the other, while the Ignore Table option will only load the chart onto the report. | ||
| 293 | |||
| 294 | To disable the loading animation when running the report, disable the Show Pages Animation option in the Charting tab. | ||
| 295 | |||
| 296 | . | ||
| 297 | |||
| 298 | == Gauge == | ||
| 299 | |||
| 300 | Page’s Gauge component allows you to select from a range of gauge types, to easily add traffic-lighted RAG data to your reports. | ||
| 301 | |||
| 302 | When adding a gauge, the gauge creation screen that contains the following tabs: Axes, Totals, Layout, Drill, Gauge and Save Gauge. | ||
| 303 | |||
| 304 | . | ||
| 305 | |||
| 306 | === Axes === | ||
| 307 | |||
| 308 | Select the rows used to create the gauge using the Available Rows drop-down list. | ||
| 309 | |||
| 310 | . | ||
| 311 | |||
| 312 | === Totals === | ||
| 313 | |||
| 314 | Specify one or more aggregations using the Aggregation options and click the Colour Bands tab to manually change or add additional colour bands to the gauge. | ||
| 315 | |||
| 316 | By default, a gauge is created with three colour bands split into even percentages or whole values labelled Low, Medium and High. Change the percentages using the first two textboxes and change the label by completing the Name textboxes. Click New Colour Range to add an additional colour band and reverse all bandings based on their percentages by clicking Reverse. | ||
| 317 | |||
| 318 | . | ||
| 319 | |||
| 320 | === Gauge === | ||
| 321 | |||
| 322 | In this tab, the display options are set. The preview at the bottom of the tab will update after every change. | ||
| 323 | |||
| 324 | Use the Gauge Type drop-down list to select which gauge will be used to visually represent the data. When multiple totals are present, use the Total drop-down list to select the total that will be used for the gauge. | ||
| 325 | |||
| 326 | The Data radio buttons allow the selection between Use Grand Total, to measure the grand total of the rows, and Row, to measure the specific row out of the grand total. Selecting Row will present a drop-down list to allow the choice of row to measure against. | ||
| 327 | |||
| 328 | The Show Animation option allows the toggling of the gauge loading animation and the Format Number Scale option, if enabled, will represent thousands as K and millions as M. | ||
| 329 | |||
| 330 | An image can be displayed behind a gauge using the Background Image option. Click Select Image to load the image to be used and click Clear to remove a loaded image. | ||
| 331 | |||
| 332 | To display the row name above the gauge, enable the Show Caption option and to display percentages rather than actual values, enable the Show Values as Percent option. Alter the number of displayed markers by entering a value in the Number of Tick Marks textbox. | ||
| 333 | |||
| 334 | . | ||
| 335 | |||
| 336 | === Advanced Options === | ||
| 337 | |||
| 338 | Depending on the selected gauge, a number of advanced options are available. | ||
| 339 | |||
| 340 | Enable the Show Labels option to display the colour band names on the gauge. | ||
| 341 | |||
| 342 | Use the Background Image option to specify an uploaded image that will be displayed behind the gauge component. Click Select Image to present the load screen, where clicking the adjacent checkbox for the required image will add it to the gauge. To remove an added image, click Clear. | ||
| 343 | |||
| 344 | When enabled, the Show Caption option will display the field name(s) added to the row above the gauge. Enable the Show Values as Percent option to switch to a percentage view of the values. | ||
| 345 | |||
| 346 | To set up trends, click New Trend and enter the trend values in the first two textboxes. The Name textbox allows the addition of a label and the Colour textbox is used to define a specific colour by either typing the hex code or using the popup colour picker. | ||
| 347 | |||
| 348 | Once all options have been set, click Save Gauge to add it to the report. | ||
| 349 | |||
| 350 | . | ||
| 351 | |||
| 352 | == Query == | ||
| 353 | |||
| 354 | The Pages Query component enables you to add a previously saved CXAir Query to your report. | ||
| 355 | |||
| 356 | A CXAir Query is “natural language” search that allows you to explore & filter your data in a quick and intuitive way. | ||
| 357 | |||
| 358 | Adding a saved Query to a report allows search results from a specific query to be displayed. | ||
| 359 | |||
| 360 | The Saved Query screen is displayed when this component is added, allowing the Header, Footer, Custom Labels, Layout and Style options to be set. Click the … icon to open the Saved Reports screen, where clicking the checkbox next to the relevant query will load it. | ||
| 361 | |||
| 362 | Enable the Linked option to reflect any changes made to the source query in the report and click Apply to complete the process, or Close to cancel changes. | ||
| 363 | |||
| 364 | [[Learn more about Queries>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.01\. Query.WebHome]] > | ||
| 365 | |||
| 366 | . | ||
| 367 | |||
| 368 | == Venn Diagram == | ||
| 369 | |||
| 370 | The Venn diagram component allows a previously saved interactive diagram to be added to the report. | ||
| 371 | |||
| 372 | CXAir’s Venn diagrams enable you to build complex search terms by overlaying visual representations of data revealing relationships in the underlying data. | ||
| 373 | |||
| 374 | Click the … icon after adding the component to load the Venn, then click Apply to complete the process. Alternatively, click Close to cancel any changes. | ||
| 375 | |||
| 376 | [[Learn more about Venn Diagrams>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.02d\. Venn Diagrams.WebHome]] > | ||
| 377 | |||
| 378 | . | ||
| 379 | |||
| 380 | == Text == | ||
| 381 | |||
| 382 | The Text component is a flexible and powerful way to add context & functionality to your Pages report. | ||
| 383 | |||
| 384 | It allows you to add formatted text, images, html code and dynamically calculated and displayed content to your report. | ||
| 385 | |||
| 386 | The flexibility of the Text component means you can use it to add: | ||
| 387 | |||
| 388 | * Important context to the data displayed in the report. | ||
| 389 | * Dynamically generated data. | ||
| 390 | * Navigation buttons. | ||
| 391 | * Your brand’s logo & other images. | ||
| 392 | |||
| 393 | After adding the Text component to a report, double-click it to display text editor. | ||
| 394 | |||
| 395 | . | ||
| 396 | |||
| 397 | === Adding Text === | ||
| 398 | |||
| 399 | Standard text can be added and styled using the built-in toolbar that provides a number of font, alignment, sizing & formatting options. | ||
| 400 | |||
| 401 | . | ||
| 402 | |||
| 403 | === Adding Images === | ||
| 404 | |||
| 405 | The Text component can also be used to add images to a report. Drag an image from the file browser of the local machine into the text editor to add an image. The blue border represents the size of the added component, and the image can resized accordingly. Clicking the image will present a number of options to rotate, flip, crop and set an exact size of the added image. Please note that large image files may need to be rescaled prior to being uploaded. | ||
| 406 | |||
| 407 | . | ||
| 408 | |||
| 409 | === Adding a field value from an Index === | ||
| 410 | |||
| 411 | Use the Add Field textbox to add a field from the Index into the text component. Used in conjunction with the filtering options, such as page breaks, this can be used to dynamically output entries into the report. | ||
| 412 | |||
| 413 | Click the Sigma icon to add a total along with any required conditional formatting to the Text component using values from the currently loaded Index. To modify an existing total, right click it in the edit screen. | ||
| 414 | |||
| 415 | . | ||
| 416 | |||
| 417 | === Adding an event Trigger === | ||
| 418 | |||
| 419 | Click the Trigger icon to display the Create Trigger dialog box. Enter the name of a new Trigger, or select a previous creation, and click Add before selecting between the Click and Scroll radio buttons. Click Triggers generate interactive buttons while Scroll Triggers require users to scroll through text. To ensure scrolling is enabled for the Text component, single click the component on the grid and click Component Style before enabling the Scroll When Required option. Once a Trigger has been added, it needs to be assigned to an Event. | ||
| 420 | |||
| 421 | . | ||
| 422 | |||
| 423 | === Adding Dynamic Text === | ||
| 424 | |||
| 425 | The Add Text option contains a number of dynamic values to communicate key run-time information. Selecting Date or Time will output the relevant information taken from the server's system time settings, while Index will output the current Index name that the report is run against. This can be supplemented with the Index Date Time option that will display when the Index was last refreshed. Add the Page Number option to add dynamic page number information, and Report Path to output the location of the Pages report once saved. Finally, adding the User option will identify the user who generated the report. | ||
| 426 | |||
| 427 | To filter the contents of a specific Text component, single click the added component and click the Info button in the component toolbox. Under the Saved Query heading, click Select Query to load a Query from the associated Index and click Apply to save the changes. To remove an added Query, click clear. | ||
| 428 | |||
| 429 | Once the required content has been written, click Apply to save or Close to discard changes. | ||
| 430 | |||
| 431 | To save a Text component that can be used in future reports, click the Save button in the toolbox when the required Text component has been selected. | ||
| 432 | |||
| 433 | . | ||
| 434 | |||
| 435 | === HTML Editor === | ||
| 436 | |||
| 437 | When enabled by the system administrator, the HTML editor allows you to add HTML to a text box. This gives you the ability to format elements directly using CSS and to add additional functionality to those elements. | ||
| 438 | |||
| 439 | To access the HTML editor: | ||
| 440 | |||
| 441 | 1. Click Tools menu option. This displays a drop-down menu. | ||
| 442 | 1. Click the <> Source Code menu option. This displays the Source Code dialog. | ||
| 443 | 1. Add the HTML code as required then click OK to save changes. | ||
| 444 | |||
| 445 | . | ||
| 446 | |||
| 447 | == Embed == | ||
| 448 | |||
| 449 | The Embed component allows an external URL to be embedded into the report. When the report is run, the webpage will be displayed in the frame specified. | ||
| 450 | |||
| 451 | Enter the link in the URL textbox then click Apply. | ||
| 452 | |||
| 453 | (% class="box" %) | ||
| 454 | ((( | ||
| 455 | **Note:** This component must be enabled by the system administrator. The target website must support iframe embed for its content to be displayed in your report. | ||
| 456 | ))) | ||
| 457 | |||
| 458 | . | ||
| 459 | |||
| 460 | == External == | ||
| 461 | |||
| 462 | The External component allows files, that have been imported into CXAir, to be displayed on the report. | ||
| 463 | |||
| 464 | Once this component has been added, the Saved Reports window will open. Click the checkbox next to the required file to complete the process. | ||
| 465 | |||
| 466 | (% class="box" %) | ||
| 467 | ((( | ||
| 468 | **Note**: The permitted file types are set by the system administrator. If adding images to a report, it is recommend that the Text component is used. | ||
| 469 | ))) | ||
| 470 | |||
| 471 | . | ||
| 472 | |||
| 473 | == CXForm == | ||
| 474 | |||
| 475 | CXForms is an extension of CXAir that allows you to build & share data-capture forms. These forms create an intuitive, user-friendly interface for data-entry directly into a CXAir index | ||
| 476 | |||
| 477 | To add a saved form to a Pages report for completion and report integration: | ||
| 478 | |||
| 479 | 1. Drag the CXFORM component onto the Workspace. | ||
| 480 | 1. Double click the newly added component to open the CXFORMS dialog. | ||
| 481 | |||
| 482 | Use the Project and Form drop-down lists to select the form that you want to display on your report. | ||
| 483 | |||
| 484 | To display a single step of a form on your report, use the Show Single Step option to select a step from the selected form. | ||
| 485 | |||
| 486 | (% class="box" %) | ||
| 487 | ((( | ||
| 488 | **Note:** This allows the creation of a Pages report containing one step per page. | ||
| 489 | ))) | ||
| 490 | |||
| 491 | The Field Mapping options present a drop-down list for each field in the form, allowing the relevant fields to be pre-populated with data from the currently loaded index. When a field has been selected, the Driving Field option is displayed. Select this option to specify the fields that will be loaded when viewing the latest submission for an individual. | ||
| 492 | |||
| 493 | (% class="box" %) | ||
| 494 | ((( | ||
| 495 | **Note:** When viewing a CXForm in pages with this option enabled, the data must be reduced to a single record to produce valid results. | ||
| 496 | ))) | ||
| 497 | |||
| 498 | Enable the Load Latest Submission option to ensure the latest data is loaded. | ||
| 499 | |||
| 500 | The Confirm Filters option, when enabled, presents users with a dialog box confirming the submissions for the currently selected filters. It is recommended that this option is enabled when forms are submitted via Pages reports that utilise filters to drive submissions. | ||
| 501 | |||
| 502 | The Warn on Leaving if not Submitted option, when enabled, displays a warning message if the report user navigates away from the form without submitting their responses. | ||
| 503 | |||
| 504 | . | ||
| 505 | |||
| 506 | == Report Link == | ||
| 507 | |||
| 508 | The Report Link component allows you to easily add links to you Pages report that enable report users to navigate to other CXAir reports. | ||
| 509 | |||
| 510 | Using the available formatting and styling options, when adding or editing a link, gives you the ability to quickly add button elements to your report. | ||
| 511 | |||
| 512 | . | ||
| 513 | |||
| 514 | == Filter == | ||
| 515 | |||
| 516 | Using the Filter component, interactive Filters can be added to the report rather than to the Filter Panel. | ||
| 517 | |||
| 518 | Once added to the grid, the Filter Configuration popup is presented. Please refer to the Filters chapter for more information regarding the available options. | ||
| 519 | |||
| 520 | To modify an existing Filter component, right click the added filter in the edit screen. | ||
| 521 | |||
| 522 | . | ||
| 523 | |||
| 524 | == Placeholder == | ||
| 525 | |||
| 526 | When creating multi-component Pages reports, the Placeholder component is a useful tool that allows users to position empty components on the grid. These can be moved and resized to establish the desired layout before components are added in place. | ||
| 527 | |||
| 528 | Once added and resized, the Placeholder can then be replaced by other components. Drag the required component on top of the Placeholder to replace it with the desired component. | ||
| 529 | |||
| 530 | . | ||
| 531 | |||
| 532 | == Container == | ||
| 533 | |||
| 534 | When using tiles, the transition is controlled per component. Containers allow multiple components to be controlled via a single transition. | ||
| 535 | |||
| 536 | Use the Component Select toggle in the top-right corner to toggle between selecting the Container or the contained components. | ||
| 537 | |||
| 538 | To utilise Containers that contain multiple components, first add a Container to the report. Resize the added Container so that it is large enough to house one or more component and drag the required components into the Container. Then, click the container name in the navigation pane and click Add Tile. | ||
| 539 | |||
| 540 | If a single component is required, simply drag it onto the newly created tile. To add more than one component, drag another Container into the tile and repeat the previous steps to add the required components. | ||
| 541 | |||
| 542 | When using the transition options, multiple Components can now be switched at once. | ||
| 543 | |||
| 544 | . | ||
| 545 | |||
| 546 | === Container Options === | ||
| 547 | |||
| 548 | In addition to the Border Style and Auto Refresh options, the container has the following options: | ||
| 549 | |||
| 550 | * Index | ||
| 551 | * Repeatable Field | ||
| 552 | |||
| 553 | . | ||
| 554 | |||
| 555 | == Custom == | ||
| 556 | |||
| 557 | Using the Custom component, saved Text components containing custom HTML content can be loaded into reports. | ||
| 558 | |||
| 559 | Simply add the component to present the load screen, where a previously saved Text component can be added to the report using the relevant checkbox. | ||
| 560 | |||
| 561 | [[Learn more about report templates>>doc:Technical Documentation.CXAIR.User Guide.02\. Reporting.2e\. Pages.05\. Creating Pages Report Templates.WebHome]] > |