Dashboard Templates User Guide

7/18/2019 Dashboard Templates User Guide

http://slidepdf.com/reader/full/dashboard-templates-user-guide 1/10

Dashboard Templates – User Guide

User Guide



Table of ContentsWhat 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 TemplateUntil 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 ofthe 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 dashboard’s

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 that’s it, the dashboard application does the rest.

How to create a dashboard templateA 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 dashboard’s componentplaceholders. 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,

(<template></template>), instead of the html and body tags

(<html><body></body></template>). This means that a valid template should look like this

<template><…….></template> and will not have html and body tags (<html>, <body>).

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

<pn:view/> Novaview component

<pn:html/> HTML component

<pn:web/> Web component

<pn:rs/> Reporting Services component

<pn:dundas/>

<pn:treemap/>

NV Visual component

NV Tree Map componentTable 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 holderThe 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:

<div style="width:100%;height:100%"><pn:view/></div>

<div style="width:100%;height:100%"><pn:view/></div>

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

corresponding components:

<div style="width:100%;height:100%"><id=”PlaceHolder1”/></div>

<div style="width:100%;height:100%"><id=”PlaceHolder2”/></div>

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 <template>. This means that the usualtags of html and body (<html></html>, <body></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 LocationAll 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 dashboardA 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 component’s 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 hasn’t started working on the template page and

no information has been assign to it. Once the designer provided component’s 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 thecorresponding 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 Component’s 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 Templatelayout 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 hasn’t started working on the template

page and no information has been assign to it. Once the designer provided component’s

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:<template>

<Center>

<table border="1" cellspacing="5" width="100%" height="97%">

<tr><td width="50%" height="100%" rowspan="2"><pn:view/> </td>

<td width="50%" height="50%"><pn:view/> </td>

</tr>

<tr>

<td width="50%" height="50%"><pn:html/> </td>

</tr>

</table>

<template>

HTML Template Image:

Documents

Dashboard Templates User Guide