The options contain a lot of CSS class names. However when you stick to the defaults (also used in
the templates.html), you don't have to override these defaults.
In general, you just have add the json_data, addWidgetSettings and layouts option: look into the
source of
dashboard.html.
json_dataObject
Default: (empty)
Object which contains the widget data or the url to the json data, eg:
json_data : {
url: "jsonfeed/mywidgets.json"
}
layoutsObject
Default: (empty)
Object which contains the available layouts, eg:
layouts :
[
{ title: "Layout1",
id: "layout1",
image: "layouts/layout1.png",
html: '>div class="layout layout-a"><div class="column first column-first"></div></div>',
classname: 'layout-a'
}
]
Note that there are two options for the layout: based on classname (you have to define a layoutClass)
as an option of the dashboard, or as HTML. When both specified, the classname option is used.
debuglevelInteger
Default: 3
Debuglevel for logging in the console. Level 1 shows info messages, level 2 shows events, level 3 shows warnings and level 5 shows errors.
loadingHtmlString
Default: <div class="loading"><img alt="Loading, please wait" src="../themes/default/loading.gif" /><p>Loading...</p></div>
HTML which is shown while the dashboard is loading.
emptyColumnHtmlString
Default: Drag your widgets here
HTML shown when a visible column is empty. This counts also for when the last widget is dragged
outside the column.
widgetTemplateString
Default: widgettemplate
Id of the DOM element contaning the widget template.
columnPrefixString
Default: column-
Prefix used for column to identify a column. For example, the identifier of a column is "first", then
the column has the class column-first. The id attribute can not be used to support multiple
dashboards at one page.
opacityString
Default: 0.2
Opacity of the widget when the widget is dragged.
stateChangeUrlString
Default: (empty)
URL which will be called (via a POST request) when a stateChanged event is thrown.
deleteConfirmMessageString
Default: Are you sure you want to delete this widget?
Message, which is used in a alert, when a widget is deleted.
widgetNotFoundHtmlString
Default: The content of this widget is not available anymore. You may remove this widget.
HTML which is shown in the content of a widget, when the URL of the widget returns an error.
columnClassString
Default: column
CSS class to identify columns.
widgetClassString
Default: widget
CSS class to identify widgets.
menuClassString
Default: controls
CSS class to identify widget menu.
widgetContentClassString
Default: widgetcontent
CSS class to identify widget content.
widgetTitleClassString
Default: widgettitle
CSS class to identify widget title.
widgetHeaderClassString
Default: widgetheader
CSS class to identify widget header.
widgetFullScreenClassString
Default: widgetopenfullscreen
CSS class to identify widget full screen option.
iconsClassString
Default: icons
CSS class to identify icons in the widget header.
addWidgetSettings.widgetDirectoryUrlString
Default: (empty)
URL to retrive the widget directory information. For the JSON format: look into the examples.
addWidgetSettings.openDialogClassString
Default: openaddwidgetdialog
CSS class to identify link to open the addwidget dialog.
addWidgetSettings.addWidgetClassString
Default: addwidget
CSS class to identify link the addwidget button in the add widget dialog.
addWidgetSettings.selectCategoryClassString
Default: selectcategory
CSS class to identify the select category link in the add widget dialog.
addWidgetSettings.selectedCategoryClassString
Default: selected
CSS class to identify the selected category in the add widget dialog.
addWidgetSettings.categoryClassString
Default: categories
CSS class to identify categories in the add widget dialog.
addWidgetSettings.widgetClassString
Default: widgets
CSS class to identify widgets in the add widget dialog.
addWidgetSettings.dialogIdString
Default: addwidgetdialog
Id of the DOM element which contains the add widget dialog.
addWidgetSettings.categoryTemplateString
Default: categorytemplate
Id of the DOM element which contains the category template.
addWidgetSettings.widgetTemplateString
Default: addwidgettemplate
Id of the DOM element which contains the widget template used in the addwidget dialog.
editLayoutSettings.dialogIdString
Default: editLayout
Id of the DOM element which contains the change layout dialog.
editLayoutSettings.layoutClassString
Default: layoutselection
CSS class to identify container where the layout images are shown in the change layout dialog.
editLayoutSettings.selectLayoutClassString
Default: layoutchoice
CSS class to identify layouts in the change layout dialog.
editLayoutSettings.selectedLayoutClassString
Default: selected
CSS class to identify the selected layout in the change layout dialog.
editLayoutSettings.openDialogClassString
Default: editlayout
CSS class to identify link to open the change layout dialog.
editLayoutSettings.layoutTemplateString
Default: selectlayouttemplate
Id of the DOM element which contains the layout template.
Dashboard events
Events which are thrown at the dashboard DOM element.
dashboardLayoutLoaded
Event thrown when the HTML of the layout is added to the dashboard and the columns are made sortable.
dashboardStateChange
Event thrown when the configuration of the dashboard is changed by the enduser. This event can be
used to store the new configuration serverside. As an argument of the event, the concerning widget and
the stateChange itself is passed.
Possible values for the statChange:
widgetAdded, widgetOpened, widgetMoved, titleChanged, widgetClosed, metadataChanged, widgetRemoved
Example:
dashboard.element.trigger("dashboardStateChange",{"stateChange":"widgetAdded","widget":widget});
When the stateChangeUrl option is supplied, the URL will be called passing the serialized
dashboard configuration.
dashboardSaveFailed
Event thrown when the call to the stateChangeUrl has failed.
dashboardSuccessfulSaved
Event thrown when the call to the stateChangeUrl has succeeded.
dashboardLayoutChanged
Event thrown when a new layout has been selected.
dashboardAddWidget
Event thrown when a widget is added to the dashboard.
dashboardOpenLayoutDialog
Event thrown when opening the layout dialog is triggered.
dashboardCloseLayoutDialog
Event thrown when closing the layout dialog is triggered.
dashboardOpenWidgetDialog
Event thrown when opening the dialog, to add a widget to the dashboard, is triggered.
dashboardCloseWidgetDialog
Event thrown when closing the dialog, to add a widget to the dashboard, is triggered.
addWidgetDialogSelectCategory
Event thrown when in the add widget dialog a category is selected. This is when a user clicks on a
specific category and when the dialog is loaded: the first category is selected.
addWidgetDialogWidgetsLoaded
Event thrown when the widgets of the selected category in the add widget dialog are loaded.
addWidgetDialogCategoriesLoaded
Event thrown when the categories in the add widget dialog are loaded.
Widget events
The widgets event are triggered at the DOM element with the widget classname.
The events contain the javascript representation of the widget. For example:
$('.widget').live('widgetShow',function(event, obj){
log(obj.widget.title);
});
widgetLoaded
Event thrown when the content of the widget is loaded.
widgetInitialized
widgetAdded
Event thrown after a widget is added to the dashboard.
widgetDeleted
Event thrown after a widget is deleted from the dashboard.
widgetDropped
Event thrown when a widget is dropped in a column, also when it is the same column.
widgetOpen
Event thrown when clicked at the widget title and the widget needs to be opened.
widgetClose
Event thrown when clicked at the widget title and the widget needs to be closed.
widgetShow
Event thrown when the content of the widget is shown, triggered form the openContent function.
This is triggered from the openContent function
which is invoked when a widget is loaded (and the widget is open), when the widget is refreshed and
when the the widget is opened.
widgetHide
Event thrown in the closeContent function and triggering the widget to be closed.
widgetOpenMenu
Event thrown when the widget menu is triggered to be opened.
widgetCloseMenu
Event thrown when the widget menu is triggered to be closed.
widgetOpenFullScreen
Event thrown when the widget is triggered to be opened in full screen modus.
widgetCloseFullScreen
Event thrown when the widget is triggered to be closed in full screen modus and goes back to the
dashboard modus.