Skip Navigation LinksALVAO 10.1Extending modulesALVAO Dashboard Skip Navigation Links. Skip Navigation Links Skip Navigation Links.


ALVAO Dashboard

ALVAO Dashboard module is a set of pages for ALVAO WebApp application containing top overviews of currently solved requests in the services which can be displayed e.g. on the large screen at the Service Desk operators' site.

Computer Requirements

  • ALVAO Service Desk

Installation and Activation

On the server where ALVAO WebApp is installed, run the AlvaoDashboard.msi installation package and follow the instructions in the wizard.

Note:
ALVAO Dashboard module version must be the same as the Service Desk application version.

The module must be activated with the activation key which you can receive from your ALVAO system vendor. Activation key provides the system administrator in the ALVAO Admin application by the File – Activation command.

Page templates

The following page templates are a part of the module:

Name Description
Dashboard_TicketsBySolversAndSLA Displays the numbers of requests by solvers and SLA.
Dashboard_TicketsBySolversAndDeadline Displays the numbers of requests by solvers and due date.
Dashboard_TicketsBySectionsAndSLA Displays the numbers of requests by services and SLA.
Dashboard_TicketsBySectionsAndDeadline Displays the numbers of requests by services and due date.

The templates are saved in the Custom/Templates folder. Each template consists of 3 files: .cshtml, .cs, and .css.

In the pages templates there is the following automatic redirecting after 30 seconds between the pages set:

  • TicketsBySolversAndSLA <-> TicketsBySolversAndDeadline
  • TicketsBySectionsAndSLA <-> TicketsBySectionsAndDeadline

Dashboard creating

When creating a custom dashboard is always necessary to edit a pair of pages redirecting to each other or cancel/edit the redirecting in the settings (in the source code).

First select one of the templates being as closest as possible to your intention. Copy the selected template – .cshtml and .css files to the Custom/Dashboard/ folder and the .cs file to the Custom/Dashboard/Code/ folder. Rename the files to reflect the function of the form. All the files (.cshtml, .cs, and .css) need to have the same file name.

Next you will have to adapt the pages code to the new file names.

  • In the .cshtml file enter the @Styles.Render function as the input parameter for a path to the .css file.
  • In the .cs file in the beginning of the file next to the keyword class change the name to the new dashboard name and add the word Controller without any gap.

The data displayed on the page can be edited in .cs file using the prepared parameters. You can find the instructions in comments directly inside each .cs file.

Displaying the Dashboard

You can display the dashboard in a browser (television). The URL address is <adresa WebApp>/Custom/Dashboard/<název dashboardu>.

You can use the following parameters in the URL address:

  • DisplayMode - The parameter determines the View mode. The parameter can assume the values Normal or NoHeading. NoHeading will ensure that the WebApp pages header will not display.
  • LinesPerPage - The parameter determines how many items will be displayed on a single page. A value set using the URL has priority over the settings in the .cs file.
  • Example of parameter use: <adresa WebApp>/Custom/Dashboard/<název dashboardu>?DisplayMode=NoHeading&LinesPerPage=9

    Page style editing

    A link to the file with page style is in the .cshtml file (input parameter of function @Styles.Render).

    CSS class Displayed column name Description
    body   Page background color.
    dashboard   Dashboard background color.
    dashboard_title Dashboard name.
    dashboard_table   Dashboard table.
    td   Table cell.
    name First column in the cell containing solvers/services.
    opened Open Each cell has the class set according to the column.
    E.g.: All the cells in the Today column have the CSS class today set.
    overdue Expired due date
    hour < Hour
    today Today
    this_week This week
    next_week Next week
    other Different due date
    zero_cell Each cell with the 0 value has this class set.
    sla<id> <SLA name> Each SLA column has this class set. Id corresponds with the SLA Id in the database. SLA ID can be found directly from the HTML code of the resulting page in the browser.
    top_row This is the class of the first table row containing the names of due dates / SLA.
    even_row This class have all the even rows.
    odd_row This class have all the odd rows.

    Dashboard settings

    Using the parameters in the .cs files you can further specify what the page should display. Settings documentation can be found directly in those files.

    If necessary, insert the .cs file custom edits only into the labeled section.

     

    Did not find what you were looking for? Ask our technical support team.