<h2>What is a Leaderboard panel?</h2>
<p>A leader board panel is a panel that allows you to display several columns of information alongside each other so that you get a visual summary of any call information that interests you. Leader board panels are completely customisable and can show any combination of a number of types of columns. The font type, size, colour and placement are all customisable. The background colour is also customisable. Some examples are shown below:</p>
<p>This example shows total number of calls, inbound, outbound, lost calls, duration of inbound, duration of outbound, total duration of calls and is ordered by total number of calls per user:</p>
<img id="border" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/display_board_4.png" alt="Leaderboard panel" />
<h2>How do I add a Leaderboard panel?</h2>
<p>To add a leaderboard 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/leaderboard_panel.png" /> button, as shown below:</p>
<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/add_leaderboard_panel_1.png" alt="Add Leaderboard 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_leaderboard_panel_2.png" alt="Add Leaderboard panel" />
<h2>How do I customise my Leaderboard panel?</h2>
<p>To customize your leaderboard 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 shon below:</p>
<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/add_leaderboard_panel_3.png" alt="Add Leaderboard panel" />
<p>The following screen will appear:</p>
<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/leaderboard_panel_properties_1.png" alt="Leaderboard panel properties" />
<p>If you do not want a label to appear on this panel, click the 'Hide label' box as shown below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77536&w=300"><img onclick="screenshotOpen(this);" title="Hide label" alt="Hide label" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77536&w=300"></a>
<p>If the label panel on the top of the board is sufficient, you may not require a label on this panel.</p>
<p>If you do want to add a label panel, simply type the text you would like to appear on the label as shown here:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77537&w=300"><img onclick="screenshotOpen(this);" title="Label panel name" alt="Label panel name" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77537&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&i=84158&w=300"><img onclick="screenshotOpen(this);" title="Ent text style" alt="Ent text style" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=84158&w=300"></a>
<p>Then choose <h4>Title</h4>
<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/leaderboard_description.png" alt="Leaderboard description" />
<h6>Adding Panle title</h6>
<p>To provide a title for the leaderboard 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. as
shown here:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77237&w=300"><img onclick="screenshotOpen(this);" title="Font size" alt="Font size" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77237&w=300"></a>
Then choose the style of font you would like to use for your title.</p>
<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&i=77236&w=100"><img onclick="screenshotOpen(this);" title="colour arrow" alt="colour arrow" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77236&w=100"></a>. as shown below. This will show the colour palate available:</p>
<p>To. 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 addtype in the RGB colourscolour codes to add to your custom palette. You need to click on the <b>Apply</b><span class="button">Apply</span> button to apply the colour.</p> <a
onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77234&w=500"><img onclick="screenshotOpen(this);" title="font size" alt="font size" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77234&w=500"></a>
<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/leaderboard_panel_properties_2.png" alt="Leaderboard panel properties" />
<p>If you would like the 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&i=84158&w=300"><img onclick="screenshotOpen(this);" title="Ent text style" alt="Ent text style" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=84158&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&i=77248&w=300"><img onclick="screenshotOpen(this);" title="placement" alt="placement" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77248&w=300"></a>
<p><b>Adding Leaderboard headers</b></p>
<img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/text_formatting_1.png" />.</p>
<p>To determine the placement of your title, simply click on <img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/text_formatting_2.png" />.</p>
<p>If the label panel on the top of the board is sufficient, you may not require a label on this panel. If you do not want a label to appear on this panel, click the <span class="reference">Hide label</span> box as shown below:</p>
<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/leaderboard_panel_properties_3.png" alt="Leaderboard panel properties" />
<h6>Adding Leaderboard headers</h6>
<p>The default header for the columns in the leaderleaderboard board panel is Arial, 16 point in white.</p> <a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77538&w=300"><img onclick="screenshotOpen(this);" title="Default headers" alt="Default headers" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77538&w=300"></a>
<p>ClickHowever, you can change all the setting of the <span class="reference">Leaderboard headers</span>, that are similar to the <span class="reference">Panel title</span> ones. Click on the drop-down list alongside any of the properties to change.</p>
<p>The
example below shows a section of a leaderboard with headers in white:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77539&w=400"><img onclick="screenshotOpen(this);" title="leaderboard header" alt="leaderboard header" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77539&w=400"></a>
<p>To hide these headers, simply click on the 'Hide headers' box as shown below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77540&w=300"><img onclick="screenshotOpen(this);" title="Hide leaderboard headers" alt="Hide leaderboard headers" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77540&w=300"></a>
<p><b>Adding content to leader board</b></p>
<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/leaderboard_panel_properties_4.png" alt="Leaderboard panel properties" />
<h4>Content</h4>
<p>To add content to any leader board, select the content tab as shown below:</p>
<a onclick="return false;" <span class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=84149&w=450"><img onclick="screenshotOpen(this);" title="Ent LBCP" alt="Ent LBCP" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=84149&w=450"></a>
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 <a
onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=84150&w=50"><img onclick="screenshotOpen(this);" title="Select SP" alt="Select SP" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=84150&w=50"></a> button.</p>
<img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/add_button.png" alt="Select" /> button, as shown below:</p>
<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/leaderboard_panel_properties_5.png" alt="Leaderboard panel properties" />
<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&i=84151&w=300"><img onclick="screenshotOpen(this);" title="Select SP1" alt="Select SP1" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=84151&w=300"></a></p>
<p><a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=84152&w=300"><img onclick="screenshotOpen(this);" title="Select SP2" alt="Select SP2" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=84152&w=300"></a></p>
<p>This will now appear as your chosen Stats point . Once you find it, click on the
<img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/tick_button.png" alt="Tick" /> button alongside it to select it, as shown below:</p>
<a
onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=84153&w=300"><img onclick="screenshotOpen(this);" title="Select SP3" alt="Select SP3" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=84153&w=300"></a>
<p>Next<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/leaderboard_panel_properties_6.png" alt="Leaderboard panel properties" />
<p>This will now appear as your chosen Stats point. Next you will need to decide what you would like to show on the leader board. leaderboard. To do this simply, work through the drop-down lists shown below and select the Call
type <span class="reference">Call type</span> and relevant column <span class="reference">Column</span> and it will populate the panel.</p>
<p><a
onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=84154&w=300"><img onclick="screenshotOpen(this);" title="Ent Call type" alt="Ent Call type" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=84154&w=300"></a></p>
<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/leaderboard_panel_properties_7.png" alt="Leaderboard panel properties" />
<p>In the example below, we have selected the following settings for the <span class="reference">Call type</span> and its <span class="reference">Column</span> to form the columns that appear in the list:
<ul>
<li><span class="keyword">Pos</span>: select Call type as 'All' and Column as 'Position'</li>
<li><span class="reference">Name</span>: select Call type as 'All' and Column as 'Name'</li>
<li><span class="reference">Total</span>: select Call type as 'All' and Column as 'Count'</li>
<li><span class="reference">In</span>: select Call type as 'Answered' and Column as 'Count'</li>
<li><span class="reference">Out</span>: select Call type as 'Outbound' and Column as 'Count'</li>
<li><span class="reference">Lost</span>: select Call type as 'Missed' and Column as 'Count'</li>
<li><span class="reference">Duration In</span>: select Call type as 'Answered' and Column as 'Average Duration'</li>
</ul>
</p>
<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/leaderboard_panel_properties_8.png" alt="Leaderboard panel properties" />
<p><a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=84155&w=300"><img onclick="screenshotOpen(this);" title="Ent Column" alt="Ent Column" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=84155&w=300"></a></p>
<p>As you add your selection of call types and columns, they will appear in the list as shown below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=84156&w=400"><img onclick="screenshotOpen(this);" title="Ent LB create" alt="Ent LB create" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=84156&w=400"></a>
<p>If you would like to change the names of any column, simply click on the column name and overtype the current name currently highlighted in blue. Then press the <b>Enter</b> key to save.</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=84157&w=400"><img onclick="screenshotOpen(this);" title="Ent LB create2" alt="Ent LB create2" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=84157&w=400"></a>
<p>When displayed, this leader board panel will appear as shown below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77550&w=400"><img onclick="screenshotOpen(this);" title="Populate Leaderboard3" alt="Populate Leaderboard3" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77550&w=400"></a>
<p><b>Rearranging columns on leader board</b></p>
<p>If you would like the columns to appear in a different order, go back to the board designer and select the:</p>
<p> <a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77551&w=50"><img onclick="screenshotOpen(this);" title="Up arrow" alt="Up arrow" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77551&w=50"></a> to move a column left on the board</p>
<p><a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77552&w=20"><img onclick="screenshotOpen(this);" title="Down arrow" alt="Down arrow" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77552&w=20"></a> to move the column right on the board.</p>
<p><b>Hiding a column on leader board</b></p>
<p>These may be occasions when you do not want all columns to show e.g. you are running a particular campaign and you want to concentrate only on inbound or outbound calls. To hide a column, you simply click once on the eye and a red X will appear to confirm the column is temporarily hidden as shown below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77553&w=300"><img onclick="screenshotOpen(this);" title="Hide" alt="Hide" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77553&w=300"></a>
<p>To display again, simply untick as shown here</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77554&w=300"><img onclick="screenshotOpen(this);" title="Show" alt="Show" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77554&w=300"></a>
<p><b>Deleting a column on leader board</b></p>
<p>If you would like to permanently delete a column, then all you have to do is click on the delete icon as shown below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77555&w=300"><img onclick="screenshotOpen(this);" title="Delete" alt="Delete" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77555&w=300"></a>
<p>The following pop-up will appear, asking you to confirm deletion. Press OK to proceed.</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77556&w=200"><img onclick="screenshotOpen(this);" title="Confirm" alt="Confirm" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77556&w=200"></a>
<p><b>Changing the Stats Collection point</b></p>
<p>To change the Stats collection point, click on <a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=84150&w=50"><img onclick="screenshotOpen(this);" title="Select SP" alt="Select SP" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=84150&w=50"></a>. This will allow you to navigate up and down the directory or choose a different stats point at the same point e.g. weekly instead of daily stats.</p>
<p><a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=84152&w=300"><img onclick="screenshotOpen(this);" title="Select SP2" alt="Select SP2" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=84152&w=300"></a></p>
<p><b>Changing Font properties</b></p>
<p>To change the font properties for any column, click on the <a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77559&w=30"><img onclick="screenshotOpen(this);" title="Font icon" alt="Font icon" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77559&w=30"></a> icon. The following pop-up will appear:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=84158&w=300"><img onclick="screenshotOpen(this);" title="Ent Text style" alt="Ent Text style" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=84158&w=300"></a>
<p>To select the font family, click on the alongside the default font Arial. You can then select your new font from the list as shown below: </p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77238&w=300"><img onclick="screenshotOpen(this);" title="Font" alt="Font" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77238&w=300"></a>
<p>Then 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&i=77237&w=150"><img onclick="screenshotOpen(this);" title="Font size" alt="Font size" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77237&w=150"></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&i=77236&w=100"><img onclick="screenshotOpen(this);" title="select colour" alt="select colour" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77236&w=100"></a>. This will show the colour palate available:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77234&w=300"><img onclick="screenshotOpen(this);" title="Select colour" alt="Select colour" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77234&w=300"></a>
<p>To select a colour, you simply need to click on it. Alternatively, click on one of the blank boxes in the custom palette and enter the RGB code to add a custom colour.</p>
<p>If you would like text to appear as bold, italic or underlined, simply click on the required box to highlight your required option as shown below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77246&w=100"><img onclick="screenshotOpen(this);" title="Font style" alt="Font style" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77246&w=100"></a>
<p>Note that you can select more than one option if required e.g. bold and italic and underlined.</p>
<h4>Background</h4>
<p>Click on the <span class="button">Background</span> tab to configure the properties for the background of your label 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 src="http://www.tri-line.com/common/img/documentation/tim_enterprise/label_panel_properties_3.png" alt="Label panel properties" />
<p>If you would like to apply lighting effects to the label panel, just tick the box as shown here:</p>
<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/label_panel_properties_4.png" alt="Label 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 src="http://www.tri-line.com/common/img/documentation/tim_enterprise/label_panel_properties_5.png" alt="Label panel properties" />
<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 src="http://www.tri-line.com/common/img/documentation/tim_enterprise/label_panel_properties_6.png" alt="Label panel properties" /> |