Difference between revisions of "Dashboards"
Jump to navigation
Jump to search
| (42 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
| − | + | This document can now be found at its new location in the [https://docs.hornbill.com/esp-config/advanced-analytics/dashboards/ Hornbill Document Library]. | |
| − | |||
| + | [[file:hornbill-document-library.png|Dashboards|link=https://docs.hornbill.com/esp-config/advanced-analytics/dashboards/]] | ||
| + | |||
| + | <!-- | ||
| + | <div style="border:1px solid #90C0FF; background:#D0E0FF; width:99%; padding:4px; margin-bottom:10px;"> | ||
| + | __NOTOC__ | ||
| + | {| style="width:100%" | ||
| + | |[[Main Page|Home]] > [[Administration]] > [[Advanced Analytics]] > Dashboards | ||
| + | |style="text-align:right;"|[[:Category:Service Manager Administration|Index]] | ||
| + | |} | ||
| + | </div> | ||
| + | {|style="width: 100%" | ||
| + | |- valign="top" | ||
| + | |style="width:73%"| | ||
| + | == Introduction == | ||
Dashboards are used to display widget content. | Dashboards are used to display widget content. | ||
* Dashboards can be customised to include multiple rows and columns to which widgets can be added. | * Dashboards can be customised to include multiple rows and columns to which widgets can be added. | ||
| − | * Dashboards can be shared with specific users | + | * Dashboards can be shared with specific users and roles |
* Dashboards can be displayed on large screens or consumed into slides and displayed in Slideshows. | * Dashboards can be displayed on large screens or consumed into slides and displayed in Slideshows. | ||
| + | |||
| + | |style="width:5%"| | ||
| + | | | ||
| + | |style="width:22%; border-style: solid; border-width: 1px; border-color:#e6e6e6; background-color:#f2f2f2;"| | ||
| + | |||
| + | == Related Articles == | ||
| + | :* [[Widgets]] | ||
| + | :* [[Slideshows]] | ||
| + | :* [[Reporting]] | ||
| + | |||
| + | |} | ||
==Creating a Dashboard== | ==Creating a Dashboard== | ||
| Line 15: | Line 39: | ||
In order to access the configuration options for the Dashboard select the '''Edit Mode''' button in the top right of the Dashboard canvas | In order to access the configuration options for the Dashboard select the '''Edit Mode''' button in the top right of the Dashboard canvas | ||
| − | <div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width: | + | <div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:900px"> |
| − | ===Defining Dashboard | + | ====Defining Dashboard layouts==== |
| − | + | <div class="mw-collapsible-content"> | |
In order to create a Dashboard which contains multiple widgets, it is important to understand how to configure rows, columns, heights, widths and how to add multiple widgets to a single column. | In order to create a Dashboard which contains multiple widgets, it is important to understand how to configure rows, columns, heights, widths and how to add multiple widgets to a single column. | ||
| + | *'''Default Dashboard layout''' | ||
| − | + | :* The default Dashboard layout includes a single row, and a single column. The row is set to '''100%''' of the Dashboard Height, and the column is set to '''100%''' of the Dashboard width as shown below. | |
| − | |||
| − | |||
| − | + | [[File:Dashboard_Layout.png|1000px]] | |
| − | === | + | </div> |
| + | </div> | ||
| + | <div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:900px"> | ||
| + | ====Adding additional rows==== | ||
| + | <div class="mw-collapsible-content"> | ||
:* In order to add an additional row below the default row, select the '''+''' button in the top left hand corner of the default row. This will add a new row directly below. | :* In order to add an additional row below the default row, select the '''+''' button in the top left hand corner of the default row. This will add a new row directly below. | ||
:* In order for the rows to correctly display on the Dashboard ensure that each row is set to '''50% Height''' (next to the '''+''' and '''dustbin''' buttons on each row) | :* In order for the rows to correctly display on the Dashboard ensure that each row is set to '''50% Height''' (next to the '''+''' and '''dustbin''' buttons on each row) | ||
| − | :* To add additional row's, select the '''+''' button on the row to which you want the new row to appear below. If adding multiple rows, ensure that each row is allocated a '''% Height''' value and that the | + | :* To add additional row's, select the '''+''' button on the row to which you want the new row to appear below. If adding multiple rows, ensure that each row is allocated a '''% Height''' value and that the total of all the row height % equals 100. |
| − | + | </div> | |
| − | === | + | </div> |
| + | <div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:900px"> | ||
| + | ====Adding columns to rows==== | ||
| + | <div class="mw-collapsible-content"> | ||
:* In order to add additional columns to a row, select the [[File:Screen_Shot_2015-11-24_at_21.20.49.png]] button from the top right hand corner of the row. This will add a column to the row. | :* In order to add additional columns to a row, select the [[File:Screen_Shot_2015-11-24_at_21.20.49.png]] button from the top right hand corner of the row. This will add a column to the row. | ||
:* In order for the columns to correctly display on the Dashboard ensure each each column is set to '''50% Width''' (next to the '''Chart''' button in each column). | :* In order for the columns to correctly display on the Dashboard ensure each each column is set to '''50% Width''' (next to the '''Chart''' button in each column). | ||
:* To add additional columns to a row select the [[File:Screen_Shot_2015-11-24_at_21.20.49.png]] button from the top right hand corner of the row. additional columns will appear on the row. | :* To add additional columns to a row select the [[File:Screen_Shot_2015-11-24_at_21.20.49.png]] button from the top right hand corner of the row. additional columns will appear on the row. | ||
:* If adding multiple columns to a row, ensure that each column is allocated a '''% Width''' value and that the total % width of all columns on a single row equals 100. | :* If adding multiple columns to a row, ensure that each column is allocated a '''% Width''' value and that the total % width of all columns on a single row equals 100. | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:900px"> | ||
| − | ===Adding | + | ====Adding widgets to columns==== |
| − | + | <div class="mw-collapsible-content"> | |
:* In order to add a widget to a column on a row, there are two options which need to be configured. | :* In order to add a widget to a column on a row, there are two options which need to be configured. | ||
::* '''Type of Widget''' - This will be a drop down of all available Widget types (Chart, Scorecard, Target Counter, Itemised Count List, Custom), select the type of Widget you wish to add. | ::* '''Type of Widget''' - This will be a drop down of all available Widget types (Chart, Scorecard, Target Counter, Itemised Count List, Custom), select the type of Widget you wish to add. | ||
::* '''Widget''' - Based on the type of widget chosen above, a list of defined widgets of that type will be displayed and can be chosen from (Only widgets marked as ''''Available for Use'''' will appear in the list. | ::* '''Widget''' - Based on the type of widget chosen above, a list of defined widgets of that type will be displayed and can be chosen from (Only widgets marked as ''''Available for Use'''' will appear in the list. | ||
:* The chose widget will then appear in the column. If the wrong widget has been chosen, click on the 'Dustbin' button on the widget (not the Dustbin on the column header) to remove the widget and allow for another widget to be selected. | :* The chose widget will then appear in the column. If the wrong widget has been chosen, click on the 'Dustbin' button on the widget (not the Dustbin on the column header) to remove the widget and allow for another widget to be selected. | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:900px"> | ||
| − | ===Adding multiple widgets to a single column=== | + | ====Adding multiple widgets to a single column==== |
| − | + | <div class="mw-collapsible-content"> | |
:* In order to add multiple widgets to a single column on a row, click on the '''Charts''' button on the column, this will add an additional widget to the row. Multiple widgets can be added to a single column. | :* In order to add multiple widgets to a single column on a row, click on the '''Charts''' button on the column, this will add an additional widget to the row. Multiple widgets can be added to a single column. | ||
:* Configure the content of each widget in the row, as directed in the '''Adding Widgets to Column''' section above. | :* Configure the content of each widget in the row, as directed in the '''Adding Widgets to Column''' section above. | ||
::* Remove widgets from a column by selecting the '''Dustbin''' button in the top right hand corner of widgets you wish to remove. | ::* Remove widgets from a column by selecting the '''Dustbin''' button in the top right hand corner of widgets you wish to remove. | ||
| − | + | </div> | |
| − | ===Row and column heights and widths=== | + | </div> |
| − | + | <div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:900px"> | |
| + | ====Row and column heights and widths==== | ||
| + | <div class="mw-collapsible-content"> | ||
:* Ensure that the total of all row heights equals 100% in order to correctly display on the Dashboard. | :* Ensure that the total of all row heights equals 100% in order to correctly display on the Dashboard. | ||
:* Ensure that the total of all columns widths per row equals 100% in order to correctly display on the Dashboard. | :* Ensure that the total of all columns widths per row equals 100% in order to correctly display on the Dashboard. | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="mw-collapsible mw-collapsed" data-collapsetext="Show Less" data-expandtext="Read More" style="width:900px"> | ||
| + | ====Moving Columns between rows==== | ||
| + | <div class="mw-collapsible-content"> | ||
| + | It is possible to move columns of widgets between rows by dragging and dropping the columns as required | ||
| + | * Ensure when moving columns between rows, that the width of all the columns on each row equal 100% to display correctly. | ||
| + | </div> | ||
| + | </div> | ||
| − | == | + | ==Managing Dashboard Settings== |
| − | + | Once the Dashboard layout, and widget content is configured it is important to complete the Dashboard Settings . | |
| − | : | + | [[File:Dashboard_Configuration.png|900px]] |
| − | |||
| + | * '''Title''': Name of the Dashboard | ||
| + | * '''Description''': Dashboard purpose and or content | ||
| + | * '''Status''': By Default this is set to '''In development''', once the Dashboard is configured the status should be changed to '''Available for use'''. Only Dashboards marked as '''Available for use''' will appear when configuring the content of slides in slideshows. | ||
| + | * '''Access Granted To''': Determine who to make the Dashboard available to. It is possible to assign the dashboard to multiple '''Users''' and '''Roles'''. Add Additional '''Users''' and '''Roles''' by using the '''Add New''' option. Switch the context between '''User''' and '''Role''' by clicking on the '''User / Role''' header and then selecting the user or role accordingly | ||
| − | [[Category:Administration]] | + | * Save the Dashboard by selecting the '''Save''' (disc) icon. |
| + | * Create a copy of the Dashboard layout by selecting the '''Save As''' option from the drop down next to the '''Save''' (disc) icon, and giving the new Dashboard a name. | ||
| + | [[Category:Administration]][[Category:Videos]] | ||
| + | --> | ||
| + | [[Category:HDOC]] | ||
Latest revision as of 18:39, 11 April 2024
This document can now be found at its new location in the Hornbill Document Library.
