<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 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> <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>. 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&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> <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&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> <p>The default header for the columns in the leader 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>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> <p>To add content to any leader board, select the content tab as shown below:</p> <a onclick="return false;" 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> <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> <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 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 you will need to decide what you would like to show on the leader board. To do this simply, work through the drop-down lists shown below and select the Call type and relevant column 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> <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> |