<style>p { margin: 0; }span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } blockquote { border-left: solid 2px #5e35b1; color: #5e35b1; margin-left:0; padding-left:5px;}blockquote blockquote{ border-color: #00bcd4; color: #00bcd4;}blockquote blockquote blockquote{ border-color: #43a047; color: #43a047;} table.grid{ border-collapse: collapse;} table.grid td, table.grid th { border: 1px solid #ddd;} .fr-fic.fr-dib{ display: block; margin: 5px auto;}.fr-fic.fr-dib.fr-fir{ text-align: right; margin: 5px 0 5px auto;}.fr-fic.fr-dib.fr-fil{ text-align: left; margin: 5px auto 5px 0;}.fr-fic.fr-dii{ float: none; margin: 5px auto;}.fr-fic.fr-dii.fr-fil{ float: left; margin: 5px auto;}.fr-fic.fr-dii.fr-fir{ float: right; margin: 5px auto;}img.fr-dib.fr-fir { margin-right: 0; text-align: right;}img.fr-dib.fr-fil { margin-left: 0; text-align: left;}img.fr-dib { margin: 5px auto; display: block; float: none;}img.fr-bordered { box-sizing: content-box; border: solid 5px #CCC;}img.fr-shadow { box-shadow: 10px 10px 5px 0px #cccccc;}img.fr-rounded { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;}</style><p style="text-align: left;"><br></p><p><br></p>
<style>p { margin: 0; }span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } blockquote { border-left: solid 2px #5e35b1; color: #5e35b1; margin-left:0; padding-left:5px;}blockquote blockquote{ border-color: #00bcd4; color: #00bcd4;}blockquote blockquote blockquote{ border-color: #43a047; color: #43a047;} table.grid{ border-collapse: collapse;} table.grid td, table.grid th { border: 1px solid #ddd;} .fr-fic.fr-dib{ display: block; margin: 5px auto;}.fr-fic.fr-dib.fr-fir{ text-align: right; margin: 5px 0 5px auto;}.fr-fic.fr-dib.fr-fil{ text-align: left; margin: 5px auto 5px 0;}.fr-fic.fr-dii{ float: none; margin: 5px auto;}.fr-fic.fr-dii.fr-fil{ float: left; margin: 5px auto;}.fr-fic.fr-dii.fr-fir{ float: right; margin: 5px auto;}img.fr-dib.fr-fir { margin-right: 0; text-align: right;}img.fr-dib.fr-fil { margin-left: 0; text-align: left;}img.fr-dib { margin: 5px auto; display: block; float: none;}img.fr-bordered { box-sizing: content-box; border: solid 5px #CCC;}img.fr-shadow { box-shadow: 10px 10px 5px 0px #cccccc;}img.fr-rounded { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;}</style><p><strong>In this guide we will cover:</strong></p><p><strong>- How to customise the appearance of Report tables using HTML</strong></p><p><strong>- </strong><strong>Pin Scrollbar to the bottom of the page</strong></p><p><br></p><p><br></p><p>HTML can be applied to reports to customise how they appear/are formatted. This allows you to completely customise how your reports look. </p><p><br></p><p><strong><span style="font-size: 14pt;">How to customise the appearance of Report tables using HTML<br></span></strong></p><p>To customise the appearance of a Halo report you must go to the appearance tab against the report and enable 'Customise Table HTML'. </p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjIyNGY4MTY1LWJmNzEtNDNlZi1hMDI2LTg5NzI1OWE0NGFlNCJ9._seA7LPjEmFkBAWk3isiNP-p558tzi29QA75zb_qm8E" class="fr-fic fr-fil fr-dib" width="1125" style="width: 1127px; height: 519.509px;" height="519"></p><p><strong><span style="font-size: 10pt;">Fig 1. Enable ability to customise the html of a report</span></strong></p><p><br></p><p>When enabled, you will be presented with various places (fields) to set the HTML used for the report. </p><p><br><strong><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEyM2M2YWJmLWQxOWYtNDhmZS04MTg4LTJkYzkzYzY5NzQwMyJ9.VgMu5NN7rUNaUuU_B3OiJO8WrTMucRRL7dzpbF3cksw" class="fr-fic fr-fil fr-dib" width="1335" style="width: 1337px; height: 709.375px;" height="709"></strong></p><p><strong><span style="font-size: 10pt;">Fig 2. Field to add HTML for a report</span></strong></p><p><strong><br></strong></p><p><strong>Report Table HTML </strong>- Here you can add HTML/CSS to apply to the column headers of the report. The variable $-REPORTROWS needs to be used here too to print the report data.</p><p id="isPasted"><strong>Report Table Row HTML</strong> - Here, you can add HTML/CSS to apply to each row in the report. Column headers can be used as variables here to choose which column to apply the styling to. </p><p id="isPasted"><strong>Report Table Group HTML</strong> - Here you can add HTML/CSS to apply to each header that is used to group rows in your report. The variables $-GROUP1HEADER, $-GROUP2HEADER, $-GROUP3HEADER etc. can be used to choose which header to apply styling to. </p><p id="isPasted"><strong>Report Table Total Row HTML</strong> - Here, you can add HTML/CSS to apply to each row total in the report, only used if totals are used in the report. Column headers can be used as variables here to choose which column to apply the styling to. </p><p><br></p><p><strong><em>Note: If you are using custom HTML for a report, HTML for the whole table must be setup, you cannot only apply CSS styling. </em></strong></p><p><strong><br></strong></p><p>Lets look at an example. </p><p><br></p><p>The figure 3 example shows a report with no custom HTML applied. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImVkNTdhZGZhLWI2NDQtNDU0NC1iNjQ3LWUwZGUwZTU1N2Q5NCJ9.GVvGf46r5vXb3cYp9vFQiN6zO3i4mbx1O1b_4rAP01Y" class="fr-fic fr-fil fr-dib" width="1046" style="width: 1048px; height: 566.386px;" height="566"></p><p><strong><span style="font-size: 10pt;">Fig 4. Report without custom HTML</span></strong></p><p><br></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;" id="isPasted">To start, ensure 'Customise Table HTML' has been enabled then add in 'Report Table HTML'. The figure 5 example shows the bare minimum HTML required to pull in the column headers for the report, this currently has no styling applied. </p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImFiZjIxNWQ5LTEyYzEtNGYwYy1hZjQ0LTlkMDM0ZGM3MzQ2ZiJ9.fsVdB-bWEjv4VOfQrBSF1Ek-Flfh8wxdxswNRwMJBYw" class="fr-fic fr-fil fr-dib" width="762" height="527"></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><strong><span style="font-size: 10pt;">Fig 5. Basic report table HTML </span></strong></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;">You will need to include the names of the column headers you would like to use here in the '<th> ' tags. Here, the column headers are 'Time Logged', 'Status', 'Agent'. </p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;">The variable $-REPORTROWS will also need to be specified to use as a the body of the table. This is included in the <tbody> tags. This will pull through the HTML configured in the next field, 'Report Table Row HTML'.</p><p><br></p><p>This HTML on it's own will only return the headers for the report, therefore to pull in the data 'Report Table Row HTML' will also need to be configured. The figure 6 example shows the bare minimum HTML required to pull in data from the report. </p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImU0YjRmZjliLWRlOGMtNDZmZi1iZTA3LWJhZWI5NDczNmU5NCJ9.8PzdLurLPqItz_ZmU3bwZu-mSqm7_Rjlwf_ffoHoyT4" class="fr-fic fr-fil fr-dib" width="858" style="width: 860px; height: 387.235px;" height="387"></p><p><strong><span style="font-size: 10pt;">Fig 6. Report Table Row HTML</span></strong></p><p><br></p><p>Here, you will need to specify which column report data will be stored in. Each alias for the column headers specified in the data source will be used as dollar variables here. Using the above example $-Time_Logged, $-Status, $-Agent have been used as variables to pull through report data. This is because these are the names of the aliases used for these columns in the report data source, as shown in figure 7. </p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImFhNzY5MDM4LTA3NjQtNGE0OC05MDI5LWM2MTdlZTUwODQ5NCJ9.hHSxKABneO6bLbOCX4WIhxvCl_xiTUN2Vl6mhF7tJoI" class="fr-fic fr-fil fr-dib" width="1140" style="width: 1142px; height: 363.013px;" height="363"></p><p><strong><span style="font-size: 10pt;">Fig 7. Colum aliases in data source </span></strong></p><p><br></p><p id="isPasted">Essentially the aliases for the column headers become dollar variables e.g [Ticket ID] becomes $Ticket_ID and [Summary] Becomes $Summary. If there is a space in the name the dollar variable will require '_' instead of the space. We can then use these within HTML.</p><p><br></p><p>Using the above examples, the report data will now look as shown in figure 8. </p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY1YWJjMGY3LTY1Y2QtNGFmNy1iMDllLWJlYWQ2ZDc2ODdhNCJ9.zR_wWcXksX-Vv38Lx5mrgVT6bBzHzDXW6eFJuzdUN6s" class="fr-fic fr-fil fr-dib" width="973" style="width: 975px; height: 569.22px;" height="569"></p><p><strong><span style="font-size: 10pt;">Fig 8. Basic custom html for report with no styling</span></strong></p><p><br></p><p>Now, you can apply styling to the table to customise it's appearance. This can either be done by applying inline styling or by applying CSS to elements. </p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImRjMzZlNWI1LWVjMTAtNDY0Yi04MmMzLTJkZWU4NDc0NzA0NyJ9.Xw5zlP0T_wRffN73Df1caW7lR4bGZKK54kqnF55ADJM" class="fr-fic fr-fil fr-dib" width="1158" style="width: 1160px; height: 716.669px;" height="717"></p><p><strong><span style="font-size: 10pt;">Fig 9. Custom report html with styling</span></strong></p><p><br></p><p>Using the HTML shown in figure 9, apply styling shown in figure 10. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzYjBiMWY5LWRiNmUtNGQwNC04YTkyLTE0ZjhiY2JjNDQxNCJ9.Yni5t_zVafYpBuwRUdrp8KLBnUIYo6SP2FQ16m0PCH4" class="fr-fic fr-fil fr-dib" width="893" height="561"></p><p><strong><span style="font-size: 10pt;">Fig 10. Report with custom html and styling applied</span></strong></p><p><br></p><p><strong><span style="font-size: 14pt;">Pin Scrollbar to the bottom of the page</span></strong></p><p>When using custom HTML in your reports you can enable the option to have the horizonal scroll bar for the report data pinned to the bottom of the page as it is for standard reports. This is used when your report is likely to render content larger than the width of the page. If your report does not exceed the width of the page, you do not need to enable this option. When disabled the scrollbar will still be available but it will be at the very end of the report data. </p><p><br></p><p>This is found under the appearance tab against the report. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImJmOTE2NTExLTZmOTItNDg5OS1hODEzLWE4YmIxZmI1NzZlNiJ9.gricBM8ZTDI_Yn7baHSsys82urxaja2NxuMLfK5QtFA" class="fr-fic fr-fil fr-dib" width="968" style="width: 970px; height: 707.906px;" height="708"></p><p><strong><span style="font-size: 10pt;">Fig 11. Option to pin scrollbar to the bottom of the page </span></strong></p>
