Dashboard Framework

Dashboard Framework
Advanced Development Guide
Dashboards/Wizards are great ways to guide console users. This guide will help get you
understand and get started building your own dashboards and wizards for the Console.
9/9/2013
by Daniel H. Moran ([email protected])
Table of Contents
Introduction .................................................................................................................................................. 3
The Basics ...................................................................................................................................................... 4
OJO Structure ............................................................................................................................................ 4
OJO Tag: Title ........................................................................................................................................ 4
OJO Tag: DefaultPage ........................................................................................................................... 4
OJO Tag: UIHooks ................................................................................................................................. 4
Wizard Page .......................................................................................................................................... 6
HTML, CSS and Javascript (Basics) ............................................................................................................ 8
Dashboard Framework.......................................................................................................................... 8
Development Environment........................................................................................................................... 9
Text Editor ................................................................................................................................................. 9
File Explorer .............................................................................................................................................. 9
Importing Dashboard Files ...................................................................................................................... 10
Manually ............................................................................................................................................. 10
Automatically via Dashboard Developer ............................................................................................ 11
Dashboard Framework ............................................................................................................................... 14
Including Libraries ................................................................................................................................... 14
Dashboard Developer Include Files .................................................................................................... 14
Including Libraries in your OJO ........................................................................................................... 15
Building the Starter Dashboard .............................................................................................................. 16
Basic Scripting ......................................................................................................................................... 17
Initialization......................................................................................................................................... 18
Adding Functionality to the Refresh Button ....................................................................................... 18
Dashboard Framework Functionality.......................................................................................................... 19
bigfix.ui .................................................................................................................................................... 19
ChangeTitle ......................................................................................................................................... 19
SignDashboard .................................................................................................................................... 19
TimeStamp .......................................................................................................................................... 19
ShowLoading ....................................................................................................................................... 19
HideLoading ........................................................................................................................................ 19
ShowInfo ............................................................................................................................................. 19
ShowWarning ...................................................................................................................................... 20
ShowError ........................................................................................................................................... 20
RequireAnalyses .................................................................................................................................. 20
bigfix ........................................................................................................................................................ 21
dashboardID ........................................................................................................................................ 21
siteName ............................................................................................................................................. 21
replaceAll ............................................................................................................................................ 21
GetShortDate ...................................................................................................................................... 21
GetLongDate ....................................................................................................................................... 21
DashboardData ................................................................................................................................... 21
Relevance ............................................................................................................................................ 22
Properties............................................................................................................................................ 22
Actions ................................................................................................................................................ 22
Analyses .............................................................................................................................................. 22
Fixlets .................................................................................................................................................. 23
Introduction
This guide assumes you have mastered the Console Navigation, Content Development and have an
understanding of Session Relevance. If you know each of these things, then please proceed, if not go
back and review before going any further.
There are two ways to develop dashboards for Endpoint Manager (BigFix): Adobe Flex or HTML
w/Javascript-Dojo-jQuery. This guide will focus on the later, since there are no licensing costs to
develop.
The Basics
OJO Structure
Dashboards/Wizards are specified in a single XML file (see the example below) with the OJO extension.
The basic structure of a wizard XML file is a few tags that define the attributes of the wizard, followed by
a list of wizard "Page" tags that define each page of the wizard. Each page has a name, and can link to
any other page by name, so order is not important. You must explicitly specify the name of the "first"
page of the wizard by using the "DefaultPage" tag.
<?xml version="1.0"?>
<BES>
<Wizard>
<Title>Hello World</Title>
<UIHooks Menu="Dashboards" NavBar="" LaunchType="Document"
RequiresAuthoring="false"></UIHooks>
<DefaultPage>Page1</DefaultPage>
<Page Name="Page1">
<Title>Hello World</Title>
<HTML>
<![CDATA[
<h1>Hello World</h1>
<p>This is an example of a very basic dashboard.</p>
]]>
</HTML>
</Page>
</Wizard>
</BES>
The tags that define the attributes of the wizard as a whole are the Title, DefaultPage, and UIHooks tags.
OJO Tag: Title
The Title tag contains the name of the wizard. This name is used as the text for the menu items and nav
bar links that launch this wizard. It is also the default title in the window bar, although it may be
overridden by a Title tag in each wizard page.
OJO Tag: DefaultPage
The DefaultPage tag contains the name of the first Wizard Page tag to display when the wizard is
launched.
OJO Tag: UIHooks
The UIHooks tag specifies where in the console UI the dashboard/wizard will appear, and whether to
launch the dashboard/wizard in a document or a dialog. The UIHooks tag has three attributes that you
can specify: Menu, NavBar, and LaunchType.
a. Menu - In order for the wizard to appear in a menu, you must include a Menu attribute
in the UIHooks tag. The Menu attribute specifies which Menu the wizard will appear in.
If the menu specified does not exist, it will be created. New menus are created in
alphabetical order immediately following the Dashboards/Wizards menu. Sub-menus
can be specified by using "/" to create a path to the sub-menu. Note that you must
consistently specify the letter to be used as the shortcut key by preceding that letter
with and & (actually "&amp;" because it must be XML-escaped). In the case of the
"Wizards" menu, which uses 'z' as the shortcut key, this means you must specify
"Wi&amp;zards", not "Wizards" as the value of the Menu attribute.
b. NavBar - In order for the dashboard/wizard to appear in the nav bar, you must include a
NavBar attribute in the UIHooks tag. The NavBar attribute specifies which section of the
nav bar the wizard will appear in. If the section specified does not exist it will be
created. New sections are created in alphabetical order at the top of the nav bar.
c. LaunchType - The LaunchType attribute can be set to "Dialog" or "Document". If no
launch type is specified, the dashboard/wizard will launch in a dialog. If LaunchType is
set to "Document" then the wizard will launch in an MDI document window.
d. RequiresAuthoring - The RequiresAuthoring attribute can be set to "true" or "false". If
no attribute is specified, the default is "true". If this attribute is true then the console
will only show this wizard in the UI if the current user has been granted the privilege to
author custom content/actions. If it is false, then the wizard will be visible in the UI
regardless of the current user's authoring privileges.
e. PostEvans - The PostEvans attribute can be set to "true" or "false". To show an OJO in
Evans and later that has an empty Menu value, add the PostEvans attribute to UIHooks
and set its value to true.
Some examples of what the UIHooks tag can look like:



<UIHooks Menu=”Foo/Bar” NavBar=”Foo” LaunchType=”Dialog”></UIHooks>
<UIHooks Menu=”Wi&amp;zards” NavBar=”Wizards” LaunchType=”Dialog”></UIHooks>
<UIHooks NavBar=”Foo” LaunchType=”Document” RequiresAuthoring=”false”></UIHooks>
The first case creates a menu “Foo” in the menu bar adjacent to the “Wizards” menu, and it creates a
sub-menu “Bar” in the “Foo” menu, and it inserts the name of the wizard into the “Bar” menu. It also
creates a NavBar section titled "Foo" at the top of the NavBar and inserts the name of the wizard in that
section. When the wizard is launched it is launched in a Dialog (this is the default launch type).
The second case behaves exactly like current wizards: launches in a dialog and appears in the Wizards
menu and in the Wizards section of the NavBar.
The third case does not insert a menu item at all, but does create a NavBar section named "Foo" and
insert the wizard into it. The wizard is launched in an MDI document window instead of in a dialog. The
wizard will be visible to all users, regardless of their authoring privileges.
Using Relevance
You can use relevance expressions to determine the values of the Menu and NavBar attributes. If the
value of the attribute begins and ends with ( and ), then the value will be evaluated as a relevance
expression. If the expression fails or returns 0 results, or returns a plural result, the attribute value will
be set to the empty string, which is equivalent to having omitted the attribute altogether. The
expression may also evaluate to the empty string, which is also equivalent to having omitted the
attribute. If it evaluates to any valid singular result which can be coerced to a string, then that is the
value of the attribute that will be used to place the wizard in the UI. For example:
<UIHooks
MenuPath='(if (exists bes site whose (name of it is "BES Support")) then "" else "Wi&amp;zards")'
NavBarName='(if (exists bes site whose (name of it is "BES Support")) then "" else "Wizards")'>
</UIHooks>
which means that if the BES Support site is present, then this wizard is not shown in the menu or navbar.
It is still loaded into the wizard store, so it may still be linked to via the link of bes wizard inspector.
Wizard Page
<Page name="Page1">
<Title>PageTitle</Title>
<HTML>
<![CDATA[
arbitrary unescaped HTML code and script
]]>
</HTML>
</Page>
The Page tag contains the Title and HTML tags that define a page of the wizard. The name of the page is
specified as an attribute. This name is used to refer to the page in the DefaultPage tag of the wizard and
in "linkpage:" links.
Page Title
Each wizard page can specify a different title using the <Title> tag. When a page is displayed, the title of
the window containing the page will be updated to the title of the page.
Page HTML
Each wizard page specifies its HTML code and script using the HTML tag. Because this is an XML tag, its
contents cannot contain < or > symbols. In order to avoid the messiness of escaping those tags, you can
use the CDATA tag. Inside a CDATA tag you may use < or > symbols so no escaping is necessary. The only
string that is restricted inside a CDATA tag is the sequence ]]>. This sequence indicates the end of the
CDATA tag, so if you want to use that sequence in your HTML or script code, you must escape it
somehow.
If your wizard generates a complex .bes document for import, you may want to encode the static
portion of the .bes XML as an XML Data Island. For example:
<Page name="Page1">
<Title>PageTitle</Title>
<HTML>
<![CDATA[
...arbitrary unescaped HTML code and script...
<xml>
<BES xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="BES.xsd">
...import data...
</BES>
</xml>
...arbitrary unescaped HTML code and script...
]]>
</HTML>
</Page>
However, this technique becomes cumbersome when you in turn need to use CDATA tags in the
embedded XML data island (for example, in the 'Description' element), because CDATA tags do not nest.
The solution is to close the other CDATA tag, write the inner CDATA tag using an escape sequence, and
reopen a CDATA tag:
<Page name="Page1">
<Title>PageTitle</Title>
<HTML>
<![CDATA[
...arbitrary unescaped HTML code and script for the wizard...
<xml>
<BES xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="BES.xsd">
<Analysis>
<Title>Usage of WINWORD.EXE</Title>
<Description>
]]>
&lt;![CDATA[
<![CDATA[
...arbitrary unescaped HTML code and script for the analysis description...
]]>
]]&gt;
<![CDATA[
</Description>
</Analysis>
</BES>
</xml>
...arbitrary unescaped HTML code and script for the wizard...
]]>
</HTML>
</Page>
The HTML and script code you specify can take advantage of all of the presentation features. See
Presentation Authoring Notes for details.
In addition, you can link from one page of the wizard to another by using a URL of the form:
linkpage:PageName
For example you can use script to link to the page named "FinalPage" as follows:
window.navigate("linkpage:FinalPage");
Or, you can use an anchor tag like this:
<A href="linkpage:FinalPage">FinalPage</A>
If you define a tag with id="TheDataStore", then the contents of that tag will be preserved when
navigating from page to page. In addition, there are some contexts in which a wizard can be re-launched
after it has been exited (for example, if the user edits a Fixlet that was created using a wizard). In these
contexts, the Console will launch the wizard with the contents of TheDataStore set to whatever they
were when the wizard was exited. There is one exception: if you define a DIV tag with id="finishClicked",
then that tag will have its contents set to "0".
HTML, CSS and Javascript (Basics)
The bigfix.me community has started an open-source collection of libraries that we all can use in our
dashboard developments. (Be cautious… just like IBM, your company may have approved libraries for use within your
applications.)
Dashboard Framework
The bigfix.me community Dashboard Framework project can be found at:
https://bitbucket.org/bigfixme/dashboard-framework
This project is broken down into several sections:





DashboardDeveloper – is a utility for pulling all of your dashboard files into a single custom site.
We’ll explain further later in this guide. Like so many of the bigfix.me projects, it is open-source,
so feel free to browse around the code to see how it works under the covers.
Documentation – This is the raw document and the pdf you’re reading now.
Libraries – This is the cleaned up collection of jQuery and Javascript libraries which you can
include in your projects. Each library in a separate folder and has been cleaned up and tested to
work properly within the BigFix Console context. Plus since custom sites do not support folders,
we’ve “flattened” these libraries for easy inclusion.
Maintenance Windows – This is the dashboard built for the express purpose of teaching
dashboard development it is also a rather advanced example of what can be accomplished using
dashboards. Take special note of the “DashboardDeveloper.include” file which can be used to
include the various libraries and we’ll explain more about later in this guide.
Raw Libraries – This is a collection of URL links and raw downloaded libraries. If we had to
modify the library to “flatten” it, then the raw un-“flattened” version exists within this folder.
For the remainder of this guide and the Dashboard Development classes, we’ll assume you are using this
framework to help build your dashboard project.
Development Environment
To get started, there are a few things you need to setup in your development workstation. A good text
editor and how you intend to test your new creations…
Text Editor
To develop dashboards, you need to choose your favorite HTML/CSS/Javascript IDE editor. There are
literally hundreds of them for download or online. By far the most popular for our purpose is also one
of the simplest. Notepad++ from http://notepad-plus-plus.org/ is a great editor which will also colorize
code for dozens of different languages.
Download and install the Notepad++ editor.
Notepad++ does have project management capabilities, but we won’t delve into that for this guide.
File Explorer
Managing files is very simple since you’re just using the operating systems explorer or finder app.
Files within a site are all stored in a single flat directory… If you plan to have more than one dashboard
within a single custom site, then all the files for each of the dashboards must be within the same flat
directory. The screen shot on the left is our file system while the one to the right is from the console:
Fig 1. Dashboard Files within a single folder
Fig 2. Dashboard Files with a custom site
Note: If you intend to use the Dashboard Developer tool to synchronize the source files with the
Custom site … be sure the file system folder name matches the name of the Custom Site as shown in red
in the figures above.
Importing Dashboard Files
Every good development environment requires a simple process to test code between changes. There
are two ways to get your dashboard source files into a BigFix Custom Site for testing.
Manually
The most common way to do this is manually. It involves performing the following process every time
the source files change:
1. Go to your Custom site within the Console and Right Click on “Files”:
2. Choose Browse and select the one or more files that are required for your dashboard:
3. Once your files are updated, which may include overwriting existing files… your dashboard
should show up under the Dashboards sub-folder:
Note: You cannot simply overwrite *.OJO files. You will have to remove them then re-add them to the
site in order for the console to reload the dashboard itself. To do this, find the OJO file you are updating
in the files list, right click and remove. Then use the process above to re-add it.
Automatically via Dashboard Developer
In order to make things as easy as possible, I’ve developed a little REST API utility which will create a
custom site within the BigFix Console and import/update the dashboard files. This utility can be run in
one of two ways… (you can find this utility under the Dashboard Framework project…
DashboardDeveloper/ DashboardDeveloper/bin/Release/DashboardDeveloper.exe)
Manually from a Cmd Prompt
Running this tool manually is very easy:
DashboardDeveloper.exe “[full path to source directory]” [resturl] [username] [password]
The parameters must be in this order and must all be included. Here is an example of calling it once
you’ve CD’d into the directory with the executable:
DashboardDeveloper.exe “c:\dashboards\Dashboard” http://lab.bigfix.me:52311/api Daniel password
All of the source files will be imported into a custom site called “Dashboard”. The site will be created if
it doesn’t already exist.
NOTE: This utility will delete any existing site files that are not within the file systems source directory.
In other words, this utility will synchronize files and make the custom site’s files match exactly what the
file system contains.
Automatically via a Notepad++ Run Command
If you’d like to make things extremely easy… setup your Notepad++ to run the DashboardDeveloper.exe
from the Run menu. The following describes how to set that up:
1. Choose Run->Run from within Notepad++
2. Type in the following command into the Run Dialog:
[full path to Dashboard Developer]\DashboardDeveloper.exe "$(CURRENT_DIRECTORY)"
3. Click the “Save” button and configure the Save Dialog as follows:
4. Lastly Press “OK” then “Run”. The first time you run the utility you will be asked for your
console credentials. You can save those credentials if you choose; they are encrypted and
saved in a settings.xml file in the same directory as the DashboardDeveloper.exe
Note: If you choose to save your credentials, you will not see this dialog again unless you delete
the settings.xml file.
Now anytime you change any of the source files… simply choose Crtl-Alt-F5 and the
DashboardDeveloper.exe will synchronize your source files directory with your custom site.
Dashboard Framework
Now we’ll delve into the dashboard framework.
Including Libraries
Within the Libraries directory of the Dashboard Framework project is a list of subfolders which each
contain a different library. The question is how you can include those in your project.
Dashboard Developer Include Files
To get the libraries within your custom site, simply include a single “DashboardDeveloper.include” file in
your project directory. This file will not be imported into the custom site however it will be processed.
Each line of this file indicates a folder or file that should be imported into the custom site. Here is an
example:
//Dashboard Developer Include file
//You can specify relative or full paths to folders or files to be included in your project.
//The following files/folders are included in this project.
//include jQuery Library
..\Libraries\jquery\jquery-1.7.1.js
..\Libraries\jquery\jquery-ui-1.8.17.custom.js
..\Libraries\jquery\jquery-ui-1.8.18.custom.css
//include bigfixme Dashboard Framework Library
..\Libraries\bigfixme
//include jquery.datatables Library - for displaying maintenance windows in a grid layout
..\Libraries\jquery.datatables
//include jqplot Library - so we can add some attractive graphs and pie charts
//only including a few of their files...
..\Libraries\jquery.jqplot\excanvas.js
..\Libraries\jquery.jqplot\jquery.jqplot.js
..\Libraries\jquery.jqplot\jqplot.canvasTextRenderer.js
..\Libraries\jquery.jqplot\jqplot.canvasAxisLabelRenderer.js
..\Libraries\jquery.jqplot\jqplot.pieRenderer.js
..\Libraries\jquery.jqplot\jqplot.barRenderer.js
..\Libraries\jquery.jqplot\jqplot.categoryAxisRenderer.js
..\Libraries\jquery.jqplot\jqplot.pointLabels.js
//include reveal Library - This allows us to have modal pop-in dialog boxes.
..\Libraries\jquery.reveal
//include json library - for formating our variables stored in the datastore
..\Libraries\json3
//include moment Library - for formating and manipulating dates and times.
..\Libraries\moment
This is just an example and you may or may not need these exact libraries for your project. That will
depend on the functionality and UI elements you want to add on your dashboard.
Including Libraries in your OJO
Including the files in your custom site is one thing… in order to utilize these libraries on your dashboard
they must be included in your code. Here is an example of including the previously detailed Include file:
<!-- //Attach jquery Library -->
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.18.custom.css" />
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.js"></script>
<!-- //Attach jquery.reveal Library -->
<link rel="stylesheet" type="text/css" href="reveal.css">
<script type="text/javascript" src="jquery.reveal.js"></script>
<!-- //Attach jquery.dataTables Library -->
<link rel="stylesheet" type="text/css" href="jquery.dataTables.css">
<script type="text/javascript" src="jquery.dataTables.js"></script>
<!-- //Attach json3 Library -->
<script type="text/javascript" src="json3.js"></script>
<!-- //Attach moment Library -->
<script type="text/javascript" src="moment.js"></script>
<!-- Attach jquery.jqplot Library -->
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css">
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jquery.jqplot.js"></script>
<script type="text/javascript" src="jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="jqplot.canvasAxisLabelRenderer.js"></script>
<script type="text/javascript" src="jqplot.pieRenderer.js"></script>
<script type="text/javascript" src="jqplot.barRenderer.js"></script>
<script type="text/javascript" src="jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="jqplot.pointLabels.js"></script>
<!-- Attach bigfixme Dashboard Framework Library -->
<link rel="stylesheet" type="text/css" href="bigfixme-ui.0.0.1.css" />
<script type="text/javascript" src="bigfixme.0.0.1.js"></script>
<script type="text/javascript" src="bigfixme-api.0.0.1.js"></script>
<script type="text/javascript" src="bigfixme-ui.0.0.1.js"></script>
Building the Starter Dashboard
Now that you have a brief overview of including files… let us begin with the Starter Dashboard. The
dashboard framework will automatically initialize several graphical components which allow you to
immediately start building dashboards. Here is an example of a “starter” dashboard and what it looks
like in the console.
<?xml version="1.0"?>
<BES>
<Wizard>
<Title>Starter Dashboard</Title>
<UIHooks LaunchType="Document" RequiresAuthoring="false" Menu="Dashboards"></UIHooks>
<DefaultPage>Page1</DefaultPage>
<Page Name="Page1" DocType="HTML 4.01 Transitional" >
<Title>Starter Dashboard</Title>
<HTML>
<![CDATA[
<!-- //Attach jquery Library -->
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.18.custom.css" />
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.js"></script>
<!-- Attach bigfixme Dashboard Framework Library -->
<link rel="stylesheet" type="text/css" href="bigfixme-ui.0.0.1.css" />
<script type="text/javascript" src="bigfixme.0.0.1.js"></script>
<script type="text/javascript" src="bigfixme-api.0.0.1.js"></script>
<script type="text/javascript" src="bigfixme-ui.0.0.1.js"></script>
<link rel="stylesheet" type="text/css" href="StarterDashboard.css">
<script language=”javascript”>
//Add Scripting Functionality Here
</script>
<div>This is a starter dashboard... you can begin any dashboard project at this point.<br /></div>
]]>
</HTML>
</Page>
</Wizard>
</BES>
In the console, this is what you’d see…
* Notice the <Title>Starter Dashboard</Title> is being pulled in by our framework and displayed.
There are basically three files in the project folder for this Starter Dashboard:
Let’s examine the include file that makes this very basic dashboard possible:
//Dashboard Developer Include file
//You can specify relative or full paths to folders or files to be included in your project.
//The following files/folders are included in this project.
//include jQuery Library
..\..\Libraries\jquery\jquery-1.7.1.js
..\..\Libraries\jquery\jquery-ui-1.8.17.custom.js
..\..\Libraries\jquery\jquery-ui-1.8.18.custom.css
//include bigfixme Dashboard Framework Library
..\..\Libraries\bigfixme
The folder for this project is called “Starter Dashboard” so the
custom site that will be created by the DashboardDeveloper utility
will also be called “Starter Dashboard”.
The DashboardDeveloper will also gather together all the Library
files into this same custom site so your Dashboard functions
properly.
Basic Scripting
In order to make your dashboard “DO” something we need to take advantage of Javascript. Each library
you add gives you functionality as well as graphical elements you can include on your dashboard. In our
Starter Dashboard we included both the bigfixme Dashboard Framework library as well as jQuery. Each
library offers functionality, some of which you are already utilizing.
For example, the bigfixme Dashboard Framework triggers several UI elements that are common across
all dashboards. It automatically adds a header and footer to your dashboard making one less thing you
have to worry about when developing your new dashboard. This guide will outline some of the basic
functionality available in both the bigfixme Dashboard Framework and jQuery. For additional
information, options and functionality please refer to their related websites.
Initialization
To trigger functionality immediately we need to add the initialition function which is relatively easy!
Notice the <script></script> section in the above example… well add the following:
<script language="javascript">
$(function(){
//now do something here
bigfix.ui.ChangeTitle(‘Starter Dashboard (‘ + (new Date()) + ‘)’);
});
</script>
What we’ve just done was when the dashboard loads, the title will immediately change to look like the
following:
Adding Functionality to the Refresh Button
Our framework automatically gives you a refresh button. When pushed, the default functionality is to
update the timestamp. However what if you want the data in your dashboard to be refreshed from the
database. Here is an example of making that happen:
<script language="javascript">
$(function(){
setupButtons();
});
function setupButtons() {
$(“*[bigfixRole=’refreshButton’]”).click(function() {
bigfix.ui.ChangeTitle(‘Starter Dashboard (‘ + (new Date()) + ‘)’);
});
}
</script>
Now if the user clicks the refresh button in the upper right, not only will the timestamp update so too
will the title.
At this point I hope you have the basic understanding of how to build a dashboard and how to add
functionality. I will now talk about the various extension functions available specifically from the
Dashboard Framework.
Dashboard Framework Functionality
bigfix.ui
The User Interface is extremely important. As a result we have spent a lot of time designing and adding
functionality which is responsive and pleasant to look at.
ChangeTitle
This allows you to change the title of your dashboard.
bigfix.ui.ChangeTitle( ‘New Title String’ );
SignDashboard
We wanted the ability to know who wrote a particular dashboard… so we’ve added a very simple UI
element in the bottom left. It is mostly hidden until the user moves the mouse over the bottom left
corner. Then the following will appear:

bigfix.ui.SignDashboard(‘name’, ‘name-link’, ‘bigfix.me Profile Url’, ‘LinkedIn Url’, ‘Twitter Url’);
TimeStamp
You can manually update the timestamp displayed in the header without having to trigger a refresh bu
using this function
bigfix.ui.TimeStamp( new Date() );
ShowLoading
The Loading dialog is a modal UI Dialog which displays a wait circle. It lets the user know that you are
working in the background and they can not use the UI until you are finished.
bigfix.ui.ShowLoading();
HideLoading
This function will hide the modal UI Dialog that is currently being displayed.
bigfix.ui.HideLoading();
ShowInfo
One of the more recognized elements of a BigFix dashboard is the notification boxes. We’ve added this
functionality to our framework and this is the “Information” notification box:
bigfix.ui.ShowInfo( ‘title’, ‘description’ ); //the description is optional and can be left out.
ShowWarning
One of the more recognized elements of a BigFix dashboard is the notification boxes. We’ve added this
functionality to our framework and this is the “Warning” notification box:
bigfix.ui.ShowWarning( ‘title’, ‘description’ ); //the description is optional and can be left out.
ShowError
One of the more recognized elements of a BigFix dashboard is the notification boxes. We’ve added this
functionality to our framework and this is the “Error” notification box:
bigfix.ui.ShowWarning( ‘title’, ‘description’ ); //the description is optional and can be left out.
RequireAnalyses
Another very recognizable UI element is the required list of analyses. This function will take a specially
formatted input and perform various checks on the activation status of those analyses and even provide
a button to the user for activating all of them with one click.
bigfix.ui.RequireAnalyses( { analysesInfo:[ {ids:idArray, siteName:’site name’} ] } );
//the siteName can be left out if you’re going to be checking analyses that exist in the same site as your dashboard.
Example: bigfix.ui.RequireAnalyses ( { analysesInfo:[ {ids:[596, 840], siteName:'BES Support'} ] } );
bigfix
This is the primary namespace for all of our frameworks added functionality. Below is an index of those
functions in which you can use within your dashboard.
dashboardID
This is a global variable which we automatically trigger a simple relevance statement to determine the ID
of the currently executing dashboard.
bigfix.dashboardID
siteName
This is another global variable which triggers a relevance statement, but this time we’re trying to get the
name of the site your dashboard is sitting in.
bigfix.siteName
replaceAll
This is a simple javascript function for replacing all instances of a substring within a primary string.
var newString = bigfix.replaceAll( find, replace, str );
GetShortDate
This function will return the current date in YYYY-MM-DD format for use in BigFix content.
var shortDate = bigfix.GetShortDate();
GetLongDate
This function will return the current date in “ddd, DD MMM YYYY hh:mm:ss +XXXX” format for use in
BigFix content.
var longDate = bigfix.GetLongDate();
DashboardData
Dashboard variables are one of those objects that you will find extremely helpful. We’ve setup two
functions that are particularly helpful.
add
This function will add a dashboard variable with the specified value. This function will add a new
“shared” variable to the datastore.
bigfix.dashboarddata.add( variableName, variableValue );
remove
This function will remove a dashboard variable with the specified value. This function will add a new
“shared” variable to the datastore.
bigfix.dashboarddata.remove( variableName );
Relevance
evaluate
This function will take a session relevance statement and evaluate it, then return the results.
bigfix.relevance.evaluate( SessionRelevanceStatement );
Properties
add
This function will create a new global property.
bigfix.properties.add( propName, propRelevance );
remove
This function will delete a new global property.
bigfix.properties.remove( propName );
xml
This function will generate a complete and properly formated BES Property xml string.
bigfix.properties.xml( propName, propRelevance );
id
This function will discover the correct ID number for the given property name.
bigfix.properties.id( propName );
Actions
Start
This function take an action XML and import it into the infrastructure, thus activating it.
bigfix.actions.start( actionXml );
Analyses
isAnalysisActive
Returns a Boolean if a particular analysis is active.
bigfix.analyses.isAnalysisActive( analysisID, siteName );
activateAnalyses
Activates the analyses for the IDs listed in the arguments array.
bigfix.analyses.ActivateAnalyses( analysisIDs );
deactivateAnalyses
Deactivates the analyses for the IDs listed in the arguments array.
bigfix.analyses.deactivateAnalyses( analysisIDs );
add
Adds the analysis indicated within the xml variable into the site specified.
bigfix.analyses.add( analysisXml, siteName );
remove
Removes the analysis indicated within the xml variable into the site specified.
bigfix.analyses.remove( analysisName, siteName );
applicabilityCount
Determines the number of computers that are relevant for a particular analysis.
bigfix.analyses.applicabilityCount( analysisName, siteName );
id
Returns the ID for the specified analysis name and site.
bigfix.analyses.id( analysisName, siteName );
Fixlets
add
Adds the fixlet indicated within the xml variable into the site specified.
bigfix.fixlets.add( fixletXml, siteName );
remove
Removes the analysis indicated within the xml variable into the site specified.
bigfix.fixlets.remove( fixletName, siteName );
applicabilityCount
Determines the number of computers that are relevant for a particular fixlet.
bigfix.fixlets.applicabilityCount( fixletName, siteName );
id
Returns the ID for the specified fixlet name and site.
bigfix.fixlets.id( fixletName, siteName );