Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Summary_list
Task1What is a Summary summary panel?
Task2Adding a Summary summary panel
Task3Customising a Summary summary panel
Task4Summary panel - overview video

HTML
<a id="What is a Summarysummary panel?"></a>

What is a

...

summary panel?

Summary panels are normally used to display a summary of information (call statistics based on a particular call type or call property, e.g. the longest call, the most expensive call, the total number of inbound calls etc.) 

The display board in the screenshot below displays several summary panels, each of them showing call information grouped by different criteria

Screenshotmacro
Borderfalse
URL/download/attachments/4817212/display_board_3.png

HTML
<a id="Adding a Summarysummary panel"></a>

Adding a

...

summary panel

To add a Summary summary panel, click on the 

Inlineimage
URL/download/attachments/4817206/panel_type_button.png
 button and then select  toolbar button to expand the list of panel types and choose the
Inlineimage
URL/download/attachments/4817204/summary_panel.png
button, as shown below:

Screenshotmacro
Borderfalse
Shadowfalse
URL/download/attachments/4817212/add_summary_panel_1.png

The list of available panels types will disappear and the mouse pointer will transform in a white, cross-like pointer sign indicating where your panel will begin. Simply drag your mouse across the screen and you can size the panel, After selecting the summary panel button, the mouse pointer changes into a white crosshair pointer, indicating that the designer is ready to draw your panel. Click and hold your left mouse button, starting at the point defining the upper-left corner of your new panel. Whilst still holding down the left mouse button, drag the marquee that will appear to the point that will define the lower-right corner of your panel, as shown below:

Screenshotmacro
Borderfalse
Shadowfalse
URL/download/attachments/4817212/add_summary_panel_2.png

HTML
<a id="Customising a Leaderboardsummary panel"></a>

Customising a

...

summary panel

To customize your Leaderboard a summary panel, click on the toolbar button to switch to panel selection mode. Hover your mouse pointer over the label panel you want to customise and click on the Image Added icon, when it appears towards the top-left right corner of the screen, then select the Image Removed icon to customise the panel, as shown below:

Screenshotmacro
Borderfalse
Shadowfalse
URL/download/attachments/4817212/add_summary_panel_3.png

The following screen will appear Summary panel properties window will open, containing the following tabs:

Screenshotmacro
Borderfalse
URL/download/attachments/4817212/summary_panel_properties_1.png

To provide a title for the Summary panel, simply fill in the Label field. Choose the style of font and font size you would like to use, by selecting from the drop-down list provided.

...

Title

The

Tabmacro
LabelTitle
tab allows you to enter the name you want to appear on the summary panel and apply any styling properties, such as font size, font style, text colour, etc.

Screenshotmacro
Borderfalse
Shadowfalse
URL/download/attachments/4817212/summary_panel_properties_2.png

If you would like the text to appear as bold, italic or underlined, simply click on the required box to highlight 

Inlineimage
URL/download/attachments/4817210/text_formatting_1.png
.

To determine the placement of your title, simply click on 

Inlineimage
URL/download/attachments/4817210/text_formatting_2.png

Content

To add content to any Summary panel, select theContenttab.

...

FieldDescription
Hide labelTick this option if you don't want your panel to have a title
LabelEnter a title for your summary panel
Text styleSelect any styling properties for your panel title, e.g font size, font style or text colour etc.

Content

The Content tab allows you to select the type of call information you want to display in your summary panel.

Selecting a stats point
Info

To populate the summary panel with call logging information, you first need to create a stats point object in the Directory to collect data for the site, group or user that you want the summary panel to display.

To choose the entity whose calls you want to display in this panel, select a stats collection point, by clicking on the Find button.

Screenshotmacro
Borderfalse
URL/download/attachments/4817212/summary_panel_properties_3.png

NextA new window will open, allowing you need to drill-down until you find the to the site or group level in the Directory, where the stats point object you want to use, then add resides. To select the stats point, click on the Image Removed button alongside it to select it, as shown below:

Inlineimage
URL/download/attachments/4817211/tick_button.png
icon alongside it.

Screenshotmacro
Borderfalse
URL/download/attachments/4817211/leaderboard_panel_properties_6.png

This will now appear as your chosen Stats stats point.Next, you will need to

Selecting the call type

To select the Call 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 

Referencemacro
LabelCall type
as 
Keywordmacro
LabelAll
and in this column, click on the Call type drop-down list and choose from the available options, as shown below:

Screenshotmacro
Borderfalse
URL/download/attachments/4817212/summary_panel_properties_4.png

Selecting the information type

To select the type of call information you want to display in the summary panel, such as total duration, response time, etc., click on the 

Referencemacro
LabelColumn
as
Keywordmacro
LabelMaximum Duration
) drop-down list and choose from the available options, as shown below:

Screenshotmacro
Borderfalse
URL/download/attachments/4817212/summary_panel_properties_5.png
You may then choose to show

Show summary values

To see only the summary values for the information displayed in this Summary panel and configure its properties. To choose the style of font or the font size, select from the drop-down list provided. To select the text colour, you need to click on the drop-down arrow. 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 add the RGB colours to add to your custom palette. You need to click on theApplybutton to set the chosen colour., without the textual element, tick the available option and apply any styling properties, if preferred.

Screenshotmacro
Borderfalse
Shadowfalse
URL/download/attachments/4817212/summary_panel_properties_6.png

If you would like the text to appear as bold, italic or underlined, simply click on the required box to highlight Image Removed.  To determine the placement of your title, simply click on Image Removed. At the end, click on theSavebutton to save any changes made.

...

Show the name of the user

To see the name of the user that meets the criteria set above, tick the box to allow this information to be displayed, then select the size, the type and the properties for the font you would like to usewhose call information is displayed in this panel, tick the available option and apply any styling properties, if preferred.

In the example below, we have selected to show the longest outbound call, so in the 

Referencemacro
LabelCall type
is field we have selected 
Keywordmacro
LabelOutbound
, and in the
Referencemacro
LabelColumn
is field we have selected
Keywordmacro
LabelMaximum Duration
. Ticking the box to display the name of the user meeting that meets the criteria above, the summary panel will dispaly display the outbound call with the max duration and the name of the person that reach who achieved this threshold.

Screenshotmacro
Borderfalse
URL/download/attachments/4817212/summary_panel_properties_7.png

The summary panel of this last example will show display as followsshown below:

Screenshotmacro
Borderfalse
URL/download/attachments/4817212/summary_panel_example.png

Background

Click on theBackgroundtab The

Tabmacro
LabelBackground
tab allows you to configure the background properties for the background of your label summary panel.

If you would like to add an image source, simply type the details in the box provided, as shown in the sceenshot 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 Image style field.

To select the background colour, click on the drop-down arrow; 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 also pick a transparent background, if you prefer. You will need to click on theApplybutton to set the chosen colour.

Screenshotmacro
Borderfalse
URL/download/attachments/4817212/summary_panel_properties_8.png

If you would like to apply lighting effects to the summary panel, tick the box provided, as shown below:

Screenshotmacro
Borderfalse
URL/download/attachments/4817212/summary_panel_properties_9.png

Screenshotmacro
Borderfalse
URL/download/attachments/4817212/summary_panel_properties_8.png

FieldDescription
Image sourceIf you want your panel to display an image, type its source here. Remember, the path is relative to the folder on disk from which the web content is served, and is different for each class of web user
Image styleChoose how the image should be displayed
ColourChoose the background colour of the panel; if you are adding an image, you may want to select Transparent so that this does not interfere with your image
Apply lighting effects to this panelTick this option to apply a shine effect to the entire panel; if you are using the panel to display an image, this may adversely affect how it appears

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 green panel hasn't:

Screenshotmacro
Borderfalse
Shadowfalse
URL/download/attachments/4817212/summary_lighting_example.png

 

 

HTML
<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>
HTML
<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" />

Metrics

The Metrics tab allows you to define the shape of the panel, by entering values for its position and size.

Screenshotmacro
Borderfalse
URL/download/attachments/4817212/summary_panel_properties_10.png

HTML
<a id="Summary panel - overview video"></a>

Summary panel - overview video

For a live demonstration of how to design and customise a summary panel, watch the video below:

Vimeovideomacro
VimeoId79520058