<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" /> <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. 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 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 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 <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 leaderboard panel is Arial, 16 point in white. However, 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> <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 <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 <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. 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> <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 leaderboard. To do this simply, work through the drop-down lists shown below and select the <span class="reference">Call type</span> and relevant <span class="reference">Column</span> and it will populate the panel.</p> <img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/leaderboard_panel_properties_7.png" alt="Leaderboard panel properties" /> <p>Once you select the <span class="reference">Call type</span> and relevant <span class="reference">Column</span> fields, press the <span class="button">Add column</span> button to add the column to the list, as shown below. Just repeat the same process to add as many columns as you like, according to your company's needs.</p> <img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/leaderboard_panel_properties_8.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="keyword">Name</span>: select Call type as 'All' and Column as 'Name'</li> <li><span class="keyword">Total</span>: select Call type as 'All' and Column as 'Count'</li> <li><span class="keyword">In</span>: select Call type as 'Answered' and Column as 'Count'</li> <li><span class="keyword">Out</span>: select Call type as 'Outbound' and Column as 'Count'</li> <li><span class="keyword">Lost</span>: select Call type as 'Missed' and Column as 'Count'</li> <li><span class="keyword">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_9.png" alt="Leaderboard panel properties" /> <h6>Changing column name</h6> <p>If you would like to change the name of any column, simply click on the column name and overtype the current name currently highlighted in blue. Then press the <span class="keyword">Enter</span> key to save.</p> <img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/leaderboard_panel_properties_10.png" alt="Leaderboard panel properties" /> <h6>Rearranging columns</h6> <p>If you would like the columns to appear in a different order, just click on the <img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/order_button.png" /> icon alongside its column. Moving a column up by clicking on the <img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/up_arrow_button.png" /> icon in the design mode, we basically move this column left on the board.</p> <p>In the example below, we rearrange the <span class="keyword">In</span> and <span class="keyword">Total</span> columns. By clicking on the <img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/up_arrow_button.png" /> icon next to the <span class="keyword">Total</span> column, we move it a alevel up.</p> <img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/leaderboard_panel_properties_11.png" alt="Leaderboard panel properties" /> <h6>Hiding a column</h6> <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" /> |