Dashboard Templates User Guide
Content
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 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 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 dashboard’s 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,
(<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
<pn:view/>
<pn:html/>
<pn:web/>
<pn:rs/>
<pn:dundas/>
<pn:treemap/>
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:
<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:
3
One of the tags as shown in Table 1
Novaview Component,
HTML Component,
Web Component,
NV Visual Component)
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 usual
tags 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 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 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 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
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 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 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"
<tr>
<td width="50%"
<td width="50%"
</tr>
<tr>
<td width="50%"
</tr>
</table>
<template>
cellspacing="5" width="100%" height="97%">
height="100%" rowspan="2"><pn:view/> </td>
height="50%"><pn:view/> </td>
height="50%"><pn:html/> </td>
HTML Template Image:
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 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 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 dashboard’s 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,
(<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
<pn:view/>
<pn:html/>
<pn:web/>
<pn:rs/>
<pn:dundas/>
<pn:treemap/>
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:
<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:
3
One of the tags as shown in Table 1
Novaview Component,
HTML Component,
Web Component,
NV Visual Component)
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 usual
tags 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 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 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 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
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 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 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"
<tr>
<td width="50%"
<td width="50%"
</tr>
<tr>
<td width="50%"
</tr>
</table>
<template>
cellspacing="5" width="100%" height="97%">
height="100%" rowspan="2"><pn:view/> </td>
height="50%"><pn:view/> </td>
height="50%"><pn:html/> </td>
HTML Template Image:
