ca83ef8cdefb8b6c32ecd88386dcbff8fa944894
Guides/ReportDesign/14.0-Izenda-FORMS.md
| ... | ... | @@ -159,7 +159,7 @@ And this is an incorrect use: |
| 159 | 159 | [/repeater] |
| 160 | 160 | ``` |
| 161 | 161 | |
| 162 | -##Tutorial |
|
| 162 | +##Video Tutorials |
|
| 163 | 163 | |
| 164 | 164 | We will go over a fairly complex FORMs report using the concepts described above. We also have a couple of **Video tutorials** |
| 165 | 165 | |
| ... | ... | @@ -167,4 +167,242 @@ We will go over a fairly complex FORMs report using the concepts described above |
| 167 | 167 | * http://screencast.com/t/6RwYd7sKKKh (alternate) |
| 168 | 168 | * http://blog.izenda.com/quick-tutorial-making-the-most-of-your-toolbar-options/ |
| 169 | 169 | |
| 170 | +##Advanced FORMS report tutorial |
|
| 170 | 171 | |
| 172 | +This tutorial will demonstrate how to incorporate the various concepts described above to create the following FORMS report: |
|
| 173 | + |
|
| 174 | +![]() |
|
| 175 | + |
|
| 176 | +###Step 1: The main report |
|
| 177 | + |
|
| 178 | +The main report is going to hold all of your top-level data and will be used for the drilldown reports that will make up the sub-sections of this FORMS report. Below are the steps to create the main report. |
|
| 179 | + |
|
| 180 | +1. On the ReportList page of our [[demo site|http://www.izenda.com/bi/ReportList.aspx]], go to **New** and select **Report**. |
|
| 181 | +2. On the **DataSources** tab choose **Employees** |
|
| 182 | +3. Go to the **Fields** tab and select the following columns |
|
| 183 | + 1. EmployeeID: call it **SubreportA** in the Description |
|
| 184 | + 2. EmployeeID: call this one **SubreportC** in the Description. We will make use of these two fields later. |
|
| 185 | + 3. LastName: call this one **Employee Name** in the Description. |
|
| 186 | + 4. FirstName: do not do anything special with this field |
|
| 187 | + 5. Address |
|
| 188 | + 6. City |
|
| 189 | + 7. Region |
|
| 190 | + 8. PostalCode |
|
| 191 | + 9. Country |
|
| 192 | +4. Click **Advanced** next to **LastName** (the gear-shaped image) |
|
| 193 | +5. In the **Expression** field, enter the following: ``[FirstName] + ' ' + [LastName]`` |
|
| 194 | +6. Click **Design Form** at the bottom of the **Fields** tab |
|
| 195 | +7. Enter the following code into the form under **Source View** |
|
| 196 | +```html |
|
| 197 | +<div class="report-container"> |
|
| 198 | + <div class="sectionA"> |
|
| 199 | + <div style="background-color:darkslateblue;width:100%"><span style="color:white;margin-left:5px;">Employee</span></div><table style="width:100%;"> |
|
| 200 | + <tbody><tr> |
|
| 201 | + <td> |
|
| 202 | + <table> |
|
| 203 | + <tbody><tr> |
|
| 204 | + <th class="job_attrs">Employee Name:</th> |
|
| 205 | + <td style="font-weight:bold;">[Employee Name]</td> |
|
| 206 | + </tr> |
|
| 207 | + <tr> |
|
| 208 | + <th class="job_attrs">Address:</th> |
|
| 209 | + <td>[Address]</td> |
|
| 210 | + </tr> |
|
| 211 | + <tr> |
|
| 212 | + <th class="job_attrs">City:</th> |
|
| 213 | + <td>[City]</td> |
|
| 214 | + </tr> |
|
| 215 | + <tr> |
|
| 216 | + <th class="job_attrs">Region:</th> |
|
| 217 | + <td>[Region]</td> |
|
| 218 | + </tr> |
|
| 219 | + <tr> |
|
| 220 | + <th class="job_attrs">Country:</th> |
|
| 221 | + <td>[Country]</td> |
|
| 222 | + </tr> |
|
| 223 | + <tr> |
|
| 224 | + <th class="job_attrs">Postal Code:</th> |
|
| 225 | + <td>[PostalCode]</td> |
|
| 226 | + </tr> |
|
| 227 | + </tbody></table> |
|
| 228 | + <br> |
|
| 229 | + [SubreportC] |
|
| 230 | + </td> |
|
| 231 | + <td> |
|
| 232 | + [SubreportA] |
|
| 233 | + </td> |
|
| 234 | + </tr> |
|
| 235 | + </tbody></table> |
|
| 236 | + </div> |
|
| 237 | +</div> |
|
| 238 | +``` |
|
| 239 | +8. Go to the **Style** tab and enter the following code into the CSS box |
|
| 240 | +```css |
|
| 241 | +.report-container td, .report-container th{ |
|
| 242 | + font-size: 12px; |
|
| 243 | + font-family: sans-serif; |
|
| 244 | +} |
|
| 245 | + |
|
| 246 | +.report-container table{ |
|
| 247 | + border-collapse: collapse; |
|
| 248 | +} |
|
| 249 | + |
|
| 250 | +.report-container th{ |
|
| 251 | + font-weight: bold; |
|
| 252 | +} |
|
| 253 | + |
|
| 254 | +.report-container tr.border-bottom th{ |
|
| 255 | + border-bottom: 1px solid black; |
|
| 256 | +} |
|
| 257 | + |
|
| 258 | +.report-container th.job_attrs{ |
|
| 259 | + text-align: right; |
|
| 260 | + padding-right: 20px; |
|
| 261 | +} |
|
| 262 | + |
|
| 263 | +.report-container table.surveys th{ |
|
| 264 | + text-align: left; |
|
| 265 | +} |
|
| 266 | +.report-container table.surveys td{ |
|
| 267 | + vertical-align: top; |
|
| 268 | +} |
|
| 269 | + |
|
| 270 | +.report-container table.comp-analysis td{ |
|
| 271 | + padding: 2px 20px; |
|
| 272 | +} |
|
| 273 | +``` |
|
| 274 | +9. **Save** the report under any name you wish. |
|
| 275 | + |
|
| 276 | +###Step 2: SubreportA |
|
| 277 | + |
|
| 278 | +SubreportA is going to be a list of orders that each employee is associated with. This means that the **drilldown key** for this report is going to be EmployeeID. You can scroll up to step 1 and find that this will correspond to the field we named **SubreportA**. Follow the steps below to create this report: |
|
| 279 | + |
|
| 280 | +1. On the ReportList, go to **New** and select **Report** |
|
| 281 | +2. On the DataSources tab, click **Employees**, **Orders**, **Order Details**, and **Products**. Continue to **Fields** |
|
| 282 | +3. On the **Fields** tab, choose the following fields |
|
| 283 | + 1. OrderID: No alias is required |
|
| 284 | + 2. OrderID: Alias this one as **SubreportB** (edit the description textbox) |
|
| 285 | + 3. UnitsOnOrder: Call this field **Order Total** |
|
| 286 | + 4. UnitsOnOrder: Call this field **Total Units On Order |
|
| 287 | +4. Apply a **Group** function to the first two fields and a **Sum** function to the next two fields |
|
| 288 | +5. Click **Advanced** next to the first **UnitsOnOrder** field and enter the following into the **Expression** field: ``SUM([dbo].[Products].[UnitsOnOrder] * [dbo].[Products].[UnitPrice])`` |
|
| 289 | +6. Click **Design Form** at the bottom of the **Fields** tab |
|
| 290 | +7. Enter the following code into the form under **Source View** |
|
| 291 | +```html |
|
| 292 | +<table style="width:100%;min-width:550px;"> |
|
| 293 | + <tbody> |
|
| 294 | + <tr><td> |
|
| 295 | + <table style="margin-left: auto; text-align: left"> |
|
| 296 | + <tbody> |
|
| 297 | + <tr class="border-bottom"> |
|
| 298 | + <th style="width: 200px; padding-right: 10px"> Order Number</th> |
|
| 299 | + <th style="width: 138px; padding-right: 10px"> </th> |
|
| 300 | + <th style="width: 106px;">Units On Order</th> |
|
| 301 | + <th style="width: 106px;">Total Price</th> |
|
| 302 | + </tr> |
|
| 303 | + <!-- [repeater] --> |
|
| 304 | + |
|
| 305 | + <tr class="border-bottom"> |
|
| 306 | + <td style="text-align: left">[Order ID]</td> |
|
| 307 | + <td style="text-align: left"></td> |
|
| 308 | + <td style="text-align: left">[Total Units Ordered]</td> |
|
| 309 | + <td style="text-align: left">[Order Total]</td> |
|
| 310 | + </tr> |
|
| 311 | + <tr style="border-bottom:1px solid black;"> |
|
| 312 | + <td colspan="4"><table style="margin-left: auto; text-align:left;"><tbody><tr><td>[SubreportB]</td></tr></tbody></table> |
|
| 313 | + </td></tr> |
|
| 314 | + |
|
| 315 | + <!-- [/repeater] --> |
|
| 316 | + </tbody> |
|
| 317 | + </table> |
|
| 318 | + </td></tr></tbody> |
|
| 319 | +</table> |
|
| 320 | +``` |
|
| 321 | +8. On the **Misc** tab, click the **drill-down key** dropdown and select **EmployeeID** |
|
| 322 | +9. **Save** the report under any name you wish. Be sure to remember it, though. You will need it later. |
|
| 323 | + |
|
| 324 | +###Step 3: SubreportB |
|
| 325 | + |
|
| 326 | +SubreportB is going to be a breakdown of the products that are contained on each order that each employee has associated to his/her employee ID. We will be using this on SubreportA to link orders to products. So we will be using the **OrderID** as the drilldown key for this report. Follow the steps below to create this report: |
|
| 327 | + |
|
| 328 | +1. On the ReportList, go to **New** and select **Report** |
|
| 329 | +2. On the **DataSources** tab, click **Orders**, **OrderDetails**, and **Products** |
|
| 330 | +3. On the **Fields** tab, choose the following fields: |
|
| 331 | + 1. ProductName |
|
| 332 | + 2. UnitsOnOrder |
|
| 333 | + 3. UnitPrice |
|
| 334 | +4. Click **Design Form** at the bottom of the **Fields** tab |
|
| 335 | +5. Enter the following code into the form under **Source View** |
|
| 336 | +```html |
|
| 337 | +<table style="margin-left: auto;"> |
|
| 338 | + <tbody> |
|
| 339 | + <tr class=" border-bottom"> |
|
| 340 | + </tr></tbody><tbody><tr><th style="width: 200px; text-align:left;">Product</th> |
|
| 341 | + <th style="width: 102px; text-align:left;">Units</th> |
|
| 342 | + <th style="width: 102px; text-align:left;">Price Per Unit</th> |
|
| 343 | + </tr> |
|
| 344 | + <!--[repeater]--> |
|
| 345 | + <tr> |
|
| 346 | + <td style="font-weight:bold;">[ProductName]</td> |
|
| 347 | + <td style="text-align:left;">[UnitsOnOrder]</td> |
|
| 348 | + <td style="text-align:left;">[UnitPrice]</td> |
|
| 349 | + </tr> |
|
| 350 | + <!--[/repeater]--> |
|
| 351 | + </tbody> |
|
| 352 | +</table> |
|
| 353 | +``` |
|
| 354 | +6. On the **Misc** tab, click the **drill-down key** dropdown and select **OrderID** |
|
| 355 | +7. **Save** the report under any name you wish. Be sure to remember it, though. You will need it later. |
|
| 356 | + |
|
| 357 | +Step 4: SubreportC |
|
| 358 | + |
|
| 359 | +SubreportC is a sub-report of the main report as well and will use the drill-down key **EmployeeID** to display its data. This report specifically makes use of fields with special datatypes that cannot normally be included in **grouped** and **distinct** SELECTed data. This will allow us to simulate grouping on these fields. |
|
| 360 | + |
|
| 361 | +1. On the ReportList, go to **New** and select **Report** |
|
| 362 | +2. On the **DataSources** tab, click **Employees** |
|
| 363 | +3. On the **Fields** tab, choose the following fields: |
|
| 364 | + 1. Photo |
|
| 365 | + 2. Notes |
|
| 366 | +4. Click **Design Form** at the bottom of the **Fields** tab |
|
| 367 | +5. Enter the following code into the form under **Source View** |
|
| 368 | +```html |
|
| 369 | +<hr> |
|
| 370 | +<table><tbody> |
|
| 371 | +<tr class="ReportHeader"><td>Image</td></tr> |
|
| 372 | +<tr><td>[Photo]</td></tr> |
|
| 373 | +<tr class="ReportHeader"><td>Notes</td></tr> |
|
| 374 | +<tr><td>[Notes]</td></tr> |
|
| 375 | +</tbody> |
|
| 376 | +</table> |
|
| 377 | +<hr> |
|
| 378 | +``` |
|
| 379 | +6. On the **Misc** tab, click the **drill-down key** dropdown and select **EmployeeID** |
|
| 380 | +7. **Save** the report under any name you wish. Be sure to remember it, though. You will need it later. |
|
| 381 | + |
|
| 382 | +###Step 5: Setting the subreports |
|
| 383 | + |
|
| 384 | +Now we have all four reports created: the **main report**, **SubreportA**, **SubreportB**, and **SubreportC**. We now need to link them to each other and apply the finishing touches. |
|
| 385 | + |
|
| 386 | +1. Open the main report you created in the Report Designer. |
|
| 387 | +2. Remember the **SubreportA** column? Now we can wire that up. |
|
| 388 | + 1. Click **Advanced** (the gear to the right of the field). |
|
| 389 | + 2. In the **Subreport** field, select the report you created in Step 2. This is SubreportA. |
|
| 390 | + 3. In the Drill-Down Style field, select **Embedded**. |
|
| 391 | + 4. Click **OK**. |
|
| 392 | +3. For **SubreportC**, do the following: |
|
| 393 | + 1. Click **Advanced**. |
|
| 394 | + 2. In the **Subreport** field select the report you created in Step 4. This is SubreportC. |
|
| 395 | + 3. In the Drill-Down Style field, select **Embedded**. |
|
| 396 | + 4. Click **OK**. |
|
| 397 | +4. **Save** the report. |
|
| 398 | +5. Open SubreportA (the report created in Step 2) in the Report Designer. |
|
| 399 | +6. For the **SubreportB** column, do the following: |
|
| 400 | + 1. Click **Advanced**. |
|
| 401 | + 2. In the **Subreport** field select the report you created in Step 3. This is SubreportB. |
|
| 402 | + 3. In theh Drill-Down Style field, select **Embedded**. |
|
| 403 | + 4. Click **OK**. |
|
| 404 | +7. **Save** the report. |
|
| 405 | + |
|
| 406 | +###Step 6: Viewing and tweaking the report |
|
| 407 | + |
|
| 408 | +If you go back to your main report and view it, you should see an output very similar or identical to the one shown in the image at the beginning of the tutorial. You can see from this example how complex pixel-perfect reports and drill-downs can be achieved through FORMS. If you have data that is not reliant on a drilldown, you can use the double bracket method described in section 14.3. When we combine all of these reports together, we essentially get a parent report that tracks individual employees and each item in the sub-report is designed to track individual orders. We then have a sub-report nested in the sub-report that tracks products placed on that order. So if there are five employees on record, we run one query plus five queries to obtain those employees' orders (1 + (1*5) = 6 queries). If each EmployeeID has ten associated OrderIDs, a sub-query will be run for each of those OrderIDs to obtain the product information (6 + (6*10) = 66 queries). Always be careful with how many queries you are performing. As you nest sub-reports, the number of queries performed on the database increases greatly. |
|
| ... | ... | \ No newline at end of file |