Customizing The Report & Tab HTML

Customizing the HTML Report

Customers like the HTML report, but often want to remove specific tests or sections. While you should not edit the HTML, you can often achieve the results you seek but hiding parts of the report. There are three major elements that you can work with: the tabs above the tab body display, the tab bodies and the trees within the tab bodies.

Tab HTML

The HTML elements for each of the tabs are shown below. When you hide a tab, set its style to “display:none;visibility:hidden” to insure that no space is allocated to the tab. This allows the tabs to the right of the hidden tab to move over and fill in the space.

  • <span id="tbcReport_tabSummary_tab">
  • <span id="tbcReport_tabEmailView_tab">
  • <span id="tbcReport_tabMobileView_tab">
  • <span id="tbcReport_tabInboxMonitor_tab">
  • <span id="tbcReport_tabContentAssessment_tab">
  • <span id="tbcReport_tabWhitelistAudit_tab">
  • <span id="tbcReport_tabReputationCheck_tab">
  • <span id="tbcReport_tabLinkChecker_tab">

Tab Body HTML

The tab bodies are usually hidden, except for the tab body matching the selected tab. It is usually sufficient to hide only the tab button to prevent the user form seeing this information, but in the event you need to insure the tab bodies are not displayed, here are the  root tags for all of the tab bodies. When you want to hide a tab body, set it’s style to “style="display:none;visibility:hidden;"” which will insure that it is not only hidden, but that no display space is allocated to it.

  • <div id="tbcReport_tabSummary" class="ajax__tab_panel">
  • <div id="tbcReport_tabEmailView" class="ajax__tab_panel" >
  • <div id="tbcReport_tabMobileView" class="ajax__tab_panel">
  • <div id="tbcReport_tabInboxMonitor" class="ajax__tab_panel">
  • <div id="tbcReport_tabContentAssessment" class="ajax__tab_panel">
  • <div id="tbcReport_tabWhitelistAudit" class="ajax__tab_panel">
  • <div id="tbcReport_tabReputationCheck" class="ajax__tab_panel">
  • <div id="tbcReport_tabLinkChecker" class="ajax__tab_panel" >

Tree HTML

The following HTML shows one node of the tree display in the Context Tab.
The root nodes for the trees are:

T_UltraWebTab1ctl3DeliveryTree

Inbox Monitor

T_UltraWebTab1ctl4ContextTree

Context Assessment

T_UltraWebTab1ctl5WhiteListTree2

Whitelist Audit

T_UltraWebTab1ctl6ReputationTree

Reputation Check

Each of the nodes shown in bold text below can be styled to modify the display if the tree. Each level of the tree adds another level to the ID for the nodes.

<div id='T_UltraWebTab1ctl4ContextTree' tabIndex=0 …>
<nobr>
<div align='left' id=M_UltraWebTab1ctl4ContextTree>
<div id='UltraWebTab1ctl4ContextTree_1'>
<span igl='1'>
<img style='vertical-align:middle;' src=…' imgType='exp'>
</span>
<span igtxt='1'>
<img src=…>&nbsp;
<a href="javascript:popUp(…)" >&nbsp;(View Email and Header)</a>
</span>
</div>
<div id='M_UltraWebTab1ctl4ContextTree_1'>
<div id='UltraWebTab1ctl4ContextTree_1_1'>
<span igl='1'>
<img align='absmiddle' src=…'>
<img style='vertical-align:middle;' src=… imgType='exp'>
</span>
<span igtxt='1' class="application">Primary Audits</span>
</div>
<div id='M_UltraWebTab1ctl4ContextTree_1_1'>
<div id='UltraWebTab1ctl4ContextTree_1_1_1'>
<span igl='1'>
<img align='absmiddle' src=’…’>
<img align='absmiddle' src=’…’>
<img style='vertical-align:middle;' src=’…’>
</span>
<span igtxt='1' class="application">
<img src=…>&nbsp;
<a href=#AppleMail><font size=2px>AppleMail Audit </font></a>&nbsp;
<img src=…>
</span>
</div>