Dashboard Templates User Guide

  • Published on
    13-Jan-2016

  • View
    215

  • Download
    0

DESCRIPTION

User Dashboard

Transcript

  • Dashboard Templates User Guide

    User Guide

  • Table of Contents What is a Dashboard Template ....................................................................................................... 3

    How to create a dashboard template ............................................................................................. 3

    What is a dashboard component placeholder ............................................................................ 3

    How to add a Dashboard component place holder .................................................................... 4

    Example of dashboard component place holder .................................................................... 4

    Restrictions .............................................................................................................................. 4

    Templates Location ......................................................................................................................... 5

    Integration into dashboard ............................................................................................................. 6

    Limitations ................................................................................................................................... 8

    Appendix ........................................................................................................................................ 10

    HTML template sample code: ................................................................................................... 10

    HTML Template Image: ............................................................................................................. 10

  • What is a Dashboard Template Until today, a dashboard page could contain components aligned in rows only, without an

    option to freely position elements on a page, set each component size regardless to other

    components or even set a background image to a page.

    Panorama Novaview 5.5 allows you to manually create your own dashboard pages outside of

    the dashboard application with any layout and design you wish and display it as any other page

    in your Novaview Dashboard application.

    Dashboard templates are a designer created pre defined simple html1 pages with specific

    placeholders to be replaced with real dashboard components, through Novaview Dashboard

    Template Reader Engine, (DTRE).

    A template page can be designed in any web designer application by anyone with any image

    background and layout the designer wants.

    In order to present the dashboard components, the template must hold the dashboards

    placeholders so the DTRE can replace them with real dashboard components. Once the designer

    has created his template file with all the placeholders, all he has to do is save it under the

    templates directory and thats it, the dashboard application does the rest.

    How to create a dashboard template A dashboard template can be created using any web page designer application and even a

    notepad. The page should be a valid HTML page with regular tags in order for it to be parsed by

    the DTRE.

    Dashboard Components are displayed in a template using the dashboards component

    placeholders. Once a placeholder is set, the DTRE parses the template html code and replace the

    placeholder with a real NovaView component. Once the template page is loaded into the

    dashboard, the dashboard page designer views the page in the page design mode, with the

    exact layout and design that was set by the template. All placeholders are now presented to him

    as Novaview dashboard components.

    A Dashboard Template html code should always start with a template tag,

    (), instead of the html and body tags

    (). This means that a valid template should look like this

    and will not have html and body tags (, ).

    What is a dashboard component placeholder Dashboard component place holders are a specific html tags written in the template html code

    that represents dashboard components. These html tags represent Novaview component types

    and will be replaced by the DTRE when the template html code is parsed.

    1 A dashboard template is an html file that can be displayed in Internet Explorer 5.5 or higher

  • Each placeholder represents a single component. The component type2 is determined by the

    placeholder type.

    The following table displays a list of placeholders for each dashboard components type

    Place Holder Toolbox Image Component Name Novaview component HTML component Web component Reporting Services component

    NV Visual component NV Tree Map component

    Table 1: Dashboard components placeholders tags

    Each type of place holder will be parsed by the DTRE and replaced with the corresponding

    component.

    How to add a Dashboard component place holder The dashboard component place holders are predefined html tags. These html tags must be

    added to the template html code when creating the dashboard template.

    By adding a place holder tag3 to the html code, the template designer is setting the type of

    component that will be displayed. The DTRE will parse the template html code replacing each

    dashboard component place holder with the corresponding Novaview component.

    In order to set the size and location of a dashboard component, each place holder must be

    wrapped in a valid html tag with size properties, (width & height). The place holder inherits its

    parent tag properties and therefore these must be determined.

    Example of dashboard component place holder

    The following is a sample code taken from a template file:

    The DTRE will parse this code and will replace all dashboard components place holders with the corresponding components:

    Restrictions

    A template page can display up to a certain number of components, this number is determined

    by the dashboard administrator in the settings section.

    2 Component types as appear in the dashboard page design toolbox:

    Novaview Component, HTML Component, Web Component, NV Visual Component) 3 One of the tags as shown in Table 1

  • The number of components will be applied on a template page. This means that if a template

    page has exceeded the number of components it can hold on a page according to the dashboard

    setting configuration, the DTRE will not replace the rest of the components and the admin will

    not have an option to display them.

    A template page must always start with a template tag . This means that the usual

    tags of html and body (, ) should not be in a template file!

    Due to the nature of the dashboard application, a dashboard template must not use absolute

    position in div tags. Using absolute position will cause the page to be displayed in an un desired

    matter. All objects will be messed up.

    Java script code is not allowed on a dashboard template page. Java script on a template page

    should be done using the dashboard html component. Adding a java script code to the page will

    cause the script to be executed even in the design mode in the admin screen.

    Images and Styles should be located in an absolute position and not relative.

    Templates Location All templates must be stored in the Novaview server under the dashboard directory in a folder

    called Templates in the file system, (../E-BI/Dashboard/Templates).

    Each template must be stored in a template named folder with all images, scripts and styling in

    this same folder (Sub folders can be created as the template designer wishes).

    The name of the template should be the name of the folder it is located in and is type of htm.

    For example: Template named Cockpit.htm is stored under a Cockpit folder in the Templates

    directory as shown in the next image:

    Figure 1: Each template is stored in a folder named after the template. The template file is located in the template folder.

  • The template can be any simple HTML file named in one word dot (.) htm, (The template file

    should be htm extension only). All images, Scripts and styles used by the template file must be

    stored in the designated templates folder or in sub folders under the template folder.

    Integration into dashboard A dashboard designer creates a new dashboard page using the dashboard task Add a new

    page / Folder. Once he clicks on the Add new page / Folder, a list of templates is being

    displayed to him in the templates dropdown list with Empty Page, Classic 2*2 and One

    Component. Added to that list, is the list of all the existing templates (under the Templates

    folder) for the designer to select.

    Once the designer selects a template, (a file template), the DTRE is parsing the template code and replaces any placeholder with the specific component as if the page designer was placing it as the old fashion design. The page designer then needs to select views/reports that the components will display using the interface the component expose.

    Once a template has been selected, the dashboard is presenting the template page in design mode at which the designer needs to start filling with the relevant components information4. If the designer wishes to switch to different template, he can do so by using the Template dropdown box located on the property pan under the layout tab. Page designer can switch templates only if he hasnt started working on the template page and no information has been assign to it. Once the designer provided components information or started working on a page, providing data/code to components, the template dropdown box is disabled and the page could only be removed.

    Once the designer clicks on a component in the template, the property pane displays the corresponding properties for this component with the ability to change them.

    Even after assigning a view/report to a placed component, the designer can change the view/report by using the interface the component expose, (Select view | Options).

    On OK click, the page information (placeholders value (Tags) and page id) are saved in the dashboard database and presented to the end user when requested to display.

    Template page settings A template page has additional settings to be applied ion it

    4 Components information is any view selection, JS/VB code adding, web page link, chart selection,

    reporting services report selection. Anything that is integrating between a component and its data.

  • Hide Component Titles

    By default, all components in a page are displaying a title in the design mode. In some cases, the

    place holder of a component can hold a thin component in which will prevent the designer to

    edit this component since it will display the tilt only without the option to use its features, as

    show in the next image:

    In this image, HTML 1 and HTML 4 cannot be edited since the title holds the entire place holder.

    Clicking on Hide Component Titles will remove the titles from all the components for design

  • mode:

    The Hide Component Titles is switched to Show Component Titles.

    Templates:

    Templates options allows designer to switch to different templates if he did not assign any logic

    to the page yet. The drop down list displays all the existing HTML templates on the dashboard

    server. I designer assigned any logic to the page, the template drop down is disabled.

    Edit:

    The edit link allows the designer to change the template HTML. Once a template was chosen

    and some logic was added, the code is saved in the dashboard database. In order to change the

    template layout, clicking on Edit opens an editor page with all the template code in it, allowing

    the designer to change it.

    Limitations Templates are designed using any web page designer application and therefore the following set

    of rules is applied on a dashboard page displaying a template in design mode:

    1. Designer cannot delete a component using the Delete this Component button. A component is being placed on the page using the DTRE by replacing the place holder location and type.

    2. Designer cannot add rows to the page using the add new line option. The Template layout is set by the template file and cannot be changed within Novaview dashboards application.

    3. Designer cannot add new components using the dashboard toolbox. The Template layout is set by the template file and cannot be changed within Novaview dashboards application.

    4. Designer cannot move components up/down using the move up/down buttons. 5. Designer cannot change a component setting: width & height. These settings are

    controlled by the template placeholder. 6. Designer can drag from the HTML toolbox any object he wishes in to HTML components

    only.

  • 7. Due to the nature of the dashboard application, a dashboard template must not use

    absolute position in div tags. Using absolute position will cause the page to be displayed

    in an un-desired matter. All objects will be messed up.

    8. Java script/VB scrip code are not allowed on a template html page. Java script on a

    template page should be done using the dashboard html component. Adding a java

    script code to the page will cause the script to be executed even in the design mode in

    the admin screen.

    9. Images and Styles should be located in an absolute position (http://server/dashbaord

    application/templates/template/Images/images.gif) and not relative (images/image1.gif).

    10. If the designer wishes to switch to different template, he can do so by using the

    Template dropdown box located on the property pan under the layout tab.

    Page designer can switch templates only if he hasnt started working on the template

    page and no information has been assign to it. Once the designer provided components

    information or started working on a page, providing data/code to components, the

    template dropdown box is disabled and the template page could only be removed.

  • Appendix

    HTML template sample code:

    HTML Template Image:

Recommended

View more >