<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;"><strong>In this guide we will cover:</strong></p><p style="text-align: left;"><strong>- Using HTML to Customise Report Appearance</strong></p><p style="text-align: left;"><strong><span style="font-size: 11pt;">- </span></strong><span style="font-size: 11pt;"><strong>Example Report/Basic HTML Blocks</strong></span></p><p style="text-align: left;"><span style="font-size: 11pt;"><strong>- Advanced Edits</strong></span></p><p style="text-align: left;"><br></p><p style="text-align: left;"><br></p><p><strong id="isPasted"><span style="font-size: 14pt;">Using HTML to Customise Report Appearance</span></strong></p><p>In the reporting suite, click into the desired report and the "Appearances" tab. Check the checkbox, "Customize Table HTML" to get started.</p><p><br></p><p>From here you will notice four boxes/blocks where HTML can be pasted into to apply custom appearances.</p><p><br></p><p><strong><span style="font-size: 12pt;">Report Table HTML</span></strong></p><p>To configure the appearance of the table's column headers.</p><ul><li>Plain text should be used to name columns.</li><li>Use <em>$REPORTROWS</em> to print the next HTML block (the report table rows).</li></ul><p><br></p><p><strong><span style="font-size: 12pt;">Report Table Row HTML</span></strong></p><p>To configure the appearance of the table's column's values.</p><ul><li>You are able to use variables to print the column values on each row. Spaces in the column name should replaced with underscores ("_") in these variables.</li><li>e.g. A column with the name "Ticket ID" should be replaced with the text, "$Ticket_ID" to be used as a variable to generate the cell's value in this HTML block.</li></ul><p><br></p><p><strong><span style="font-size: 12pt;">Report Table Group HTML</span></strong></p><p>To configure the appearance of the grouping value(s) for the report. This HTML will only take effect if there are columns in the report which are set to be grouped by.</p><ul><li>Use <em>$GROUPHEADER</em> to print the grouped value.</li><li>Use <em>$GROUPCOUNT</em> to print the count of entries in each group.</li><li>If there are multiple groupings in your report, you can number the variables used like...<ul style="list-style-type: disc;"><li>$GROUP1HEADER, $GROUP2HEADER, etc. </li><li>$GROUP1COUNT, $GROUP2COUNT, etc.</li></ul></li></ul><p><br></p><p><strong><span style="font-size: 12pt;">Report Table Total Row HTML</span></strong></p><p>To configure the appearance of the totalling value(s) for the report. This HTML will only take effect if there are columns in the report which are set to be totaled.</p><ul style="font-weight: initial;"><li>The variable for this HTML block works exactly the same as the <em>Report Table Row HTML </em>block. </li><li>e.g. A column with the name "Hours Logged" should be replaced with the text, "$Hours_Logged" to be used as a variable to generate the cell's totalling value in this HTML block.</li></ul><p><br></p><p style="text-align: left;"><strong><span style="font-size: 14pt;">Example Report/Basic HTML Blocks</span></strong></p><p>Let's take a basic report like shown below and go through all of the HTML blocks.</p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEwMDMyNjEzLTIxOGEtNDBjZS04OTNlLTc2NmM2NGNiY2MyYiJ9.UITcmD2kDfGh2WhqFyPgJfA8IB13ecwhPUMzHgHRCs0" class="fr-fic fr-fil fr-dib" width="454" height="597"></p><p><strong><span style="font-size: 10pt;">Fig 1. Report showing Hours Logged by Agents within Teams</span></strong></p><p><br></p><p><strong><span style="font-size: 12pt;">Report Table HTML</span></strong></p><p><table></p><p> <tr></p><p> <td style="background-color: #2BD3C6; color: white;">Team</td></p><p> <td style="background-color: #2BD3C6; color: white;">Agent</td></p><p> <td style="background-color: #2BD3C6; color: white;">Hours Logged</td></p><p> </tr></p><p> $reportRows</p><p></table></p><p><br></p><p>Only adds column headers until the "Report Table Role HTML" is filled out.<img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImE0MjNjOWU4LTg2NjUtNGQ2Yy1hY2U3LTdlYjU5MGI5MmY4OSJ9.uavMWnKloXdUmsACdLaDZgsJE-VNvhLeCyhpUrnfJDw" class="fr-fic fr-fil fr-dib" width="397" height="87"></p><p><strong><span style="font-size: 10pt;">Fig 2. Report from Fig 1 after the above HTML.</span></strong></p><p><br></p><p><strong><span style="font-size: 12pt;">Report Table Row HTML</span></strong></p><p id="isPasted"><table></p><p> <tr></p><p> <td></td></p><p> <td>$Agent</td></p><p> <td>$Hours_Logged</td></p><p> </tr></p><p></table></p><p><br></p><p>Notice the blank row to give space for the grouping added later.</p><p>Adds column values.</p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImFmNjE5YmQ4LTgwNmQtNGZiNC1iMWQ4LTJkNDcwNmIxZWViMCJ9.2agdsp00Eh1vfCeo9mWEqbqbHu-tDPMbXvHh6SY9g1o" class="fr-fic fr-fil fr-dib" width="458" height="276"></p><p><strong><span style="font-size: 10pt;">Fig 3. Report from Fig 1 after the above HTML.</span></strong></p><p><br></p><p><strong><span style="font-size: 12pt;">Report Table Group HTML</span></strong></p><p id="isPasted"><table></p><p> <tr></p><p> <td style="background-color: #AAEDE8; color: black;" colspan="100%">$GROUPHEADER ($GROUPCOUNT)</td></p><p> </tr></p><p></table></p><p><br></p><p>Adds the grouping labels. <img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjQxMDE1YjJkLWVlMjYtNDZlYS05NzQyLTk4M2EzZWY2NThhMiJ9.E2psfsIul3RVQTDW52F4JLJz9mbKlaTup0OY7dZ2gZE" class="fr-fic fr-fil fr-dib" width="455" height="443"></p><p><span style="font-size: 10pt;"><strong>Fig 4. Report from Fig 1 after the above HTML</strong></span></p><p><br></p><p><strong><span style="font-size: 12pt;">Report Table Total Row HTML</span></strong></p><p id="isPasted"><table></p><p> <tr></p><p> <td style="background-color: #AAEDE8; color: black;"></td> </p><p> <td style="background-color: #AAEDE8; color: black;"></td> </p><p> <td style="background-color: #AAEDE8; color: black;">$Hours_Logged</td></p><p> </tr></p><p></table></p><p><br></p><p>Notice the two blank columns used in order to position the total under the correct column.</p><p>Adds the totals underneath each grouping.</p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjBkM2QzNGU5LTIwMDMtNDBjZC1hYTVlLWZkZDljYzEyNjc5NSJ9.IiaxysfvepYXfHoNJ8sFuNHiDs43cZpgMXdnoWnqd5E" class="fr-fic fr-fil fr-dib" width="454" height="604"></p><p><strong><span style="font-size: 10pt;">Fig 5. Report from Fig 1 after the above HTML.<br></span></strong></p><p><br></p><p style="text-align: left;"><strong><span style="font-size: 14pt;">Advanced Edits</span></strong></p><p><strong><span style="font-size: 12pt;">Hyperlinking</span></strong></p><p>The example shown above was quite basic in showing each of the HTML blocks. Let's go through an example of adding a link to the report as this is quite commonly requested for in custom reports. Let's say we want a link to the agent profile page of the agent shown in the report embedded into their name located in the <strong>Agent </strong>column.</p><p><br></p><p>Firstly, we need to be able to build the link to be dynamic to the agent we're clicking on. I know that the agent pages in configuration correlate with the ID of the agent we're viewing. Given this information, we must expose that information in the report as a column to then be used in the HTML to build the link.</p><p><br></p><p><strong><span style="font-size: 12pt;">Initial SQL query</span></strong></p><p id="isPasted">SELECT</p><p> sectio_ AS [Team],</p><p> uname AS [Agent],</p><p> ROUND(SUM(timetaken), 2) AS [Hours Logged]</p><p>FROM faults</p><p> JOIN actions ON actions.faultid = faults.faultid</p><p> JOIN uname ON unum = assignedtoint</p><p>WHERE </p><p> timetaken > 0</p><p>GROUP BY </p><p> sectio_,</p><p> uname,</p><p><br></p><p><strong><span style="font-size: 12pt;">Adjusted SQL query</span></strong></p><p id="isPasted">SELECT</p><p> sectio_ AS [Team],</p><p> uname AS [Agent],</p><p> ROUND(SUM(timetaken), 2) AS [Hours Logged],</p><p> unum AS [ID]</p><p>FROM faults</p><p> JOIN actions ON actions.faultid = faults.faultid</p><p> JOIN uname ON unum = assignedtoint</p><p>WHERE </p><p> timetaken > 0</p><p>GROUP BY </p><p> sectio_,</p><p> uname,</p><p> unum</p><p><br></p><p>Note that I don't have to actually show the column in the resulting report to be able to use the value in the HTML. However, please be sure to add the new field to the the list of fields exposed from the SQL query in the resulting report to the "Fields" tab. This allows the HTML variable for my new column ($ID) to be used.</p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImM4ZDNkMjk5LWIwYTEtNDRhYi04MjFjLTZmODhjNTY3MzBjYSJ9.SgfIq5rC4yjKk1ZIkvgh79LaXIiegsb7qMPodiOKW9M" class="fr-fic fr-fil fr-dib" width="983" style="width: 985px; height: 363.653px;" height="364"></p><p><strong><span style="font-size: 10pt;">Fig 6. Adding the new field into the report Fields area</span></strong></p><p><br></p><p>Now, all I have to do is use that new variable to code some new HTML for the agent name values.</p><p><br></p><p id="isPasted"><table></p><p> <tr></p><p> <td></td></p><p> <td><a href="<a href="https://sfitsm0301.haloitsm.com/config/agents/agents?agentid=$ID" id="isPasted">https://sfitsm0301.haloitsm.com/config/agents/agents?agentid=$ID</a>" target="_blank">$Agent</a></td></p><p> <td>$Hours_Logged</td></p><p> </tr></p><p></table></p><p><br></p><p>Notice how two variables are used here. $ID is used in the link embedded and $Agent in the label.</p><p>Adds links to the agent column values.</p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImYzYmM4OTIyLTcxYWYtNDJjMy05YTgyLWY2Zjk5MDcxZThhYiJ9.8yCHleZkg9-V_NvDjr5L6b8d9jvZxz5MlZ4Nyk7ru84" class="fr-fic fr-fil fr-dib" width="984" style="width: 986px; height: 633.27px;" height="633"></p><p><strong><span style="font-size: 10pt;">Fig 7. Links added to the report</span></strong></p><p><br></p><p><strong><span style="font-size: 12pt;">Text Align</span></strong></p><p id="isPasted">Another option is to centre text within the cells. For instance, using a report that shows ticket ID and date created, these variables can then be inserted into the below HTML. Use this in the "Report Table Row HTML" box.</p><p><br></p><p id="isPasted"><tr style="text-align: center;"></p><p> <td>$TICKET_ID</td></p><p> <td>$DATE_CREATED</td></p><p></tr></p><p><br></p><p>The report would then appear like this.</p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImM1NzE3NGVmLTUwZjktNGE4My1hZGVjLWFhMmE2YzA4NDVhMyJ9.g6HfF0Cn9I_6vaLFCutT7cqvPVGpGYhme2RYom06KX8" class="fr-fic fr-fil fr-dib" width="777" height="624"></p><p><strong><span style="font-size: 10pt;">Fig 8. Centring text in report cells.</span></strong></p><p><br></p><p><strong><span style="font-size: 12pt;">Changing Text Color</span></strong></p><p>The following HTML can be inserted within a header tag to change the styling and color.</p><p><br></p><p id="isPasted">style="color: #00a1df; vertical-align: middle"</p><p><br></p><p>For instance, like this:</p><p id="isPasted"> <h5 style="color: #00a1df; vertical-align: middle">$SYMPTOM</h5></p><p><br></p>
