<table width="100%" cellspacing="0" cellpadding="5" border="0" class="sectionMacro">
	<tbody>
		<tr>
			<td valign="top">
				<h2 style="margin-top: 0px;">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 class="screenshot" src="http://www.tri-line.com/common/img/documentation/tim_plus/display_board_3.png" alt="Display board with Summary panels" />
			</td>
			<td width="1px" valign="top">
				<div style="border-width: 1px;" class="panel video">
					<div class="panelContent">
						<h4>Design a Summary panel</h4>
						<p><a rel="nofollow" class="external-link" href="http://www.tri-line.com/en/products/video.php?id=6">
						<img class="screenshot naked no_border" src="http://www.tri-line.com/common/img/documentation/tim_plus/summary_panel_video.png" alt="Design a Summary panel video" /></a></p>
					</div>
				</div>
			</td>
		</tr>
	</tbody>
</table>

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

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

<img class="screenshot naked" src="http://www.tri-line.com/common/img/documentation/tim_plus/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 class="screenshot naked" src="http://www.tri-line.com/common/img/documentation/tim_plus/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 class="icon" src="http://www.tri-line.com/common/img/documentation/tim_plus/pointer_button.png" /> button on the top left hand side of the screen. 
Then click on the <img class="icon" src="http://www.tri-line.com/common/img/documentation/tim_plus/nut_button.png" /> icon of the panel that you want to customise, as shown below:</p>

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

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

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

<h4>Title</h4>

<p>To provide a title for the summary panel, simply fill in the <span class="reference">Label</span> field. Choose the font size you would like to use by simply selecting from the drop-down list. 
Then choose the style of font you would like to use for your header.</p>

<p>To select the text colour, click on the drop-down arrow as shown below. This will show the colour palate available. 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 type in the RGB colour codes to add to your custom palette. You need to click on the <span class="button">Apply</span> button to apply the colour.</p> 

<img class="screenshot naked" src="http://www.tri-line.com/common/img/documentation/tim_plus/summary_panel_properties_2.png" alt="Summary panel properties" />

<p>If you would like the text to appear as bold, italic or underlined, simply click on the required box to highlight 
<img class="icon" src="http://www.tri-line.com/common/img/documentation/tim_plus/text_formatting_1.png" />.</p>

<p>To determine the placement of your title, simply click on <img class="icon" src="http://www.tri-line.com/common/img/documentation/tim_plus/text_formatting_2.png" />.</p>

<h4>Content</h4>

<p>To add content to the Summary panel, just click on the <span class="button">Content</span> tab.</p>

<p>The first thing you need to do is to select the Stats point you wish to use. To do this, simply click on the <span class="button">Find</span> button, as shown below:</p>

<img class="screenshot border" src="http://www.tri-line.com/common/img/documentation/tim_plus/summary_panel_properties_3.png" alt="Summary panel properties" />

<p>Then just drill-down until you find the stats point you want to use. Once you find it, click on the 
<img class="icon" src="http://www.tri-line.com/common/img/documentation/tim_plus/tick_button.png" alt="Tick" /> button alongside it to select it, as shown below:</p>

<img class="screenshot border" src="http://www.tri-line.com/common/img/documentation/tim_plus/summary_panel_properties_4.png" alt="Summary panel properties" />

<p>This will now appear as your chosen Stats point. Next, you will need to select the <span class="reference">Call type</span> and <span class="reference">Column</span> 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 Column as 'Maximum Duration', or to show the total number of inbound calls, select Call type as 'Answered' and Column as 'Count', as shown below:</p>

<img class="screenshot naked" src="http://www.tri-line.com/common/img/documentation/tim_plus/summary_panel_properties_5.png" alt="Summary panel properties" />

<p>You may then choose to show only the summary values for this Summary panel and configure its properties. Choose the style of font you would like to use. Then select the font size you would like to use, from the drop-down list.</p>

<p>To select the text colour, click on the drop-down arrow as shown below. This will show the colour palate available. 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 type in the RGB colour codes to add to your custom palette. You need to click on the <span class="button">Apply</span> button to apply the colour.</p>

<img class="screenshot naked" src="http://www.tri-line.com/common/img/documentation/tim_plus/summary_panel_properties_6.png" alt="Summary panel properties" />

<p>If you would like the text to appear as bold, italic or underlined, simply click on the required box to highlight 
<img class="icon" src="http://www.tri-line.com/common/img/documentation/tim_plus/text_formatting_1.png" />.</p>

<p>To determine the placement of your title, simply click on <img class="icon" src="http://www.tri-line.com/common/img/documentation/tim_plus/text_formatting_2.png" />.</p>

<p>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.</p>

<p>In the example below, we have selected to show the longest outbound call, so Call type is 'Outbound', and Column is 'Maximum Duration'. So by selecting the user responsible tickbox, you will get the name of the person that did this call as well, along with the duration of the call, in the same summary panel.</p>

<img class="screenshot border" src="http://www.tri-line.com/common/img/documentation/tim_plus/summary_panel_properties_7.png" alt="Summary panel properties" />

<p>The summary panel of this last example is as follows:</p>

<img class="screenshot naked" src="http://www.tri-line.com/common/img/documentation/tim_plus/summary_panel_example.png" alt="Summary panel with user responsible" />

<h4>Background</h4>

<p>Click on the <span class="button">Background</span> tab to configure the properties for the background of your summary panel.</p>

<p>If you would like to add an image source, simply type the details in the box as shown below. Otherwise leave blank. You can decide to repeat the image or centre it on the panel, by selecting from the drop-down list of the <span class="reference">Image style</span> field.</p>

<p>To select the background colour, click on the drop-down arrow as shown below. This will show the colour palette available. 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 type in the RGB colour codes to add to your custom palette. You can even pick a transparent background, if you like. You need to click on the <span class="button">Apply</span> button to apply the colour.</p>

<img class="screenshot border" src="http://www.tri-line.com/common/img/documentation/tim_plus/summary_panel_properties_8.png" alt="Summary panel properties" />

<p>If you would like to apply lighting effects to the summary panel, just tick the box as shown here:</p>

<img class="screenshot border" src="http://www.tri-line.com/common/img/documentation/tim_plus/summary_panel_properties_9.png" alt="Summary panel properties" />

<p>The two examples below show the difference between panels with and without lighting effects. The panel with the slight shine has a lighting effect applied, while the solid black panel has no lighting effects.</p>

<img class="screenshot naked" src="http://www.tri-line.com/common/img/documentation/tim_plus/summary_lighting_example.png" alt="Summary panel lighting example" />

<h4>Metrics</h4>

<p>To define the panel's metrics to suit your particular screen, simply type the required pixel sizes in the boxes as shown below. Then click on the <span class="button">Save</span> button to save any changes made.</p>

<img class="screenshot border" src="http://www.tri-line.com/common/img/documentation/tim_plus/summary_panel_properties_10.png" alt="Summary panel properties" />