<h2>What is a Summary panel?</h2>

<p>Summary panels are normally used to display a summary of information e.g. the longest call, The most expensive call, the total number of inbound calls etc.</p>

<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/display_board_3.png" alt="Display board with Summary panels" />


<h2>How do I add a Summary panel?</h2>

<p>To add a Summary panel, click on the <img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/panel_type_button.png" /> button and then select the <img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/summary_panel.png" /> button, as shown below:</p>

<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/add_summary_panel_1.png" alt="Add Summary panel" />

<p>The list of panels types available immediately disappears and a blank screen will appear with the white cross-like pointer sign indicating where the panel will begin on the screen.</p>

<p>Simply drag your mouse across the screen and you can size the panel as you can see in below:</p>

<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/add_summary_panel_2.png" alt="Add Summary panel" />


<h2>How do I customise my Summary panel?</h2>

<p>To customize your Summary panel, click on the <img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/pointer_button.png" /> button on the top left hand side of the screen. 
Then click on the <img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/nut_button.png" /> icon of the panel that you want to customise, as shown below:</p>

<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/add_summary_panel_3.png" alt="Add Summary panel" />

<p>The following screen will appear:</p>

<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/summary_panel_properties_1.png" alt="Summary panel properties" />



<p>To provide a title for the summary panel, simply overtype the default 'summary panel x' with your required text as shown below:</p>

<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=77730&amp;w=300"><img onclick="screenshotOpen(this);" title="Longest call" alt="Longest call" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=77730&amp;w=300"></a>

<p>Choose the font size you would like to use by simply selecting from the drop-down list as shown here:</p>

<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=77237&amp;w=300"><img onclick="screenshotOpen(this);" title="Font size" alt="Font size" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=77237&amp;w=300"></a>

<p>Then choose the style of font you would like to use for your header.</p>

<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=77238&amp;w=300"><img onclick="screenshotOpen(this);" title="Font" alt="Font" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=77238&amp;w=300"></a>

<p>To select the text colour, click on the drop-down arrow <a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=77853&amp;w=100"><img onclick="screenshotOpen(this);" title="colour arrow" alt="colour arrow" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=77853&amp;w=100"></a>. This will show the colour palate available.</p>

<p>To select a standard colour, all you need to do is click on it. To add a custom colour, click on one of the blank custom colour squares and add the RGB colours to add to your custom palette. You need to click on the 

<b>Apply</b> button to apply the colour.</p>

<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=77234&amp;w=500"><img onclick="screenshotOpen(this);" title="font size" alt="font size" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=77234&amp;w=500"></a>

<p>If you would like text to appear as bold, italic or underlined, simply click on the required box to highlight as shown below:</p>

<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=77246&amp;w=300"><img onclick="screenshotOpen(this);" title="font style" alt="font style" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=77246&amp;w=300"></a>

<p><b>Note</b> that you can select more than one option if required e.g. bold and italic and underlined.</p>

<p>If determine the placement, simply click on below:</p>

<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=77248&amp;w=300"><img onclick="screenshotOpen(this);" title="placement" alt="placement" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=77248&amp;w=300"></a>

 
<p><b>Adding content to Summary panel</b></p>
<p>To add content to the Summary panel, click on the content tab and the following pop-up will appear:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=84160&amp;w=400"><img onclick="screenshotOpen(this);" title="Sum pan cont" alt="Sum pan cont" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=84160&amp;w=400"></a>
<p>The first thing you need to do is to select the Stats point you wish to use. To do this, simply click on <a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=84150&amp;w=50"><img onclick="screenshotOpen(this);" title="Select SP" alt="Select SP" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=84150&amp;w=50"></a>.</p>
<p>Then just drill-down until you find the stats point you want to use:</p>
<p><a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=84151&amp;w=300"><img onclick="screenshotOpen(this);" title="Select SP1" alt="Select SP1" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=84151&amp;w=300"></a></p>
<p><a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=84152&amp;w=300"><img onclick="screenshotOpen(this);" title="Select SP2" alt="Select SP2" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=84152&amp;w=300"></a></p>
<p>This will now appear as your chosen Stats point as shown below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=84153&amp;w=300"><img onclick="screenshotOpen(this);" title="Select SP3" alt="Select SP3" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=84153&amp;w=300"></a>
<p>Next, you will need to select the call type and column that you want to display as the summary value. e.g. to show the maximum call duration for all calls, select call type as 'All', and Columns as 'Maximum Duration' as shown here:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=84162&amp;w=400"><img onclick="screenshotOpen(this);" title="Sum Pan prop2" alt="Sum Pan prop2" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=84162&amp;w=400"></a>
<p>You may then choose to show only the summary values for this Summary panel. If you want to show the user responsible tick the box to indicate that you would like this information to appear and then select size, type and properties for the font you would like to use to display. The completed Summary panel properties screen will look similar to the one shown below;</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=84161&amp;w=400"><img onclick="screenshotOpen(this);" title="Sum pan prop" alt="Sum pan prop" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=84161&amp;w=400"></a>
<p>This would be displayed as:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=77856&amp;w=200"><img onclick="screenshotOpen(this);" title="Show user responsible" alt="Show user responsible" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=77856&amp;w=200"></a>
<p><b>Changing Background properties:</b></p>
<p>To change the background properties for any panel, click on the 'Background' tab. We would normally recommend that the background panel is kept fairly clean and simple by using a plain background colour. </p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=84163&amp;w=400"><img onclick="screenshotOpen(this);" title="Sum pan back" alt="Sum pan back" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=84163&amp;w=400"></a>
<p>However you can add an image source as the background and either choose to have that image centered in the panel or repeated by typing in details as shown below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=77858&amp;w=400"><img onclick="screenshotOpen(this);" title="Summ background 2" alt="Summ background 2" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=77858&amp;w=400"></a>
<p><b>Selecting background colour</b></p>
<p>To select the background colour, click on the drop-down arrow <a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=77853&amp;w=50"><img onclick="screenshotOpen(this);" title="Colour" alt="Colour" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=77853&amp;w=50"></a> This will show the colour palette available: </p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=77234&amp;w=500"><img onclick="screenshotOpen(this);" title="colour pallette" alt="colour pallette" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=77234&amp;w=500"></a>
<p>To select a colour, you simply need to click on it and press <b>Apply</b>, then press <b>Save</b></p>
<p><b>Applying lighting effects</b></p>
<p>The lighting effects allow you to add a slight sheen to the panel to give a 3-d effect. Simply click on the 'Apply lighting effects to this panel' box to add it or click again to remove it.</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=77859&amp;w=200"><img onclick="screenshotOpen(this);" title="Light Eff panel" alt="Light Eff panel" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=77859&amp;w=200"></a>
<p>With lighting effect</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=77856&amp;w=200"><img onclick="screenshotOpen(this);" title="Show user Responsible" alt="Show user Responsible" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=77856&amp;w=200"></a>
<p>Without lighting effect</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&amp;i=77860&amp;w=200"><img onclick="screenshotOpen(this);" title="Light Eff Pan 2" alt="Light Eff Pan 2" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&amp;i=77860&amp;w=200"></a>