Custom Dashboards
Description: in the Forms web app, the Dashboard displayed in the main screen and Dashboard tab in each of the Template sections can be customized using Javacsript
Where to enter code: in the Options menu / Custom Dashboard tab for the Forms main screen; and in the Configuration / Templates menu / Dashboard tab for each template
Syntax: replace the Forms.viewDashboard and Report.writeDashboard functions in place. Draw charts with the
Chart object
Examples:
Replace the Dashboard in a Template section:
Report.writeDashboard = function(templateid) {
var template = Query.selectId("Forms.templates", templateid);
List.addItemTitle(template.name + " Dashboard");
}
Below is the code for the existing Forms.viewDashboard function, which you can customize:
Forms.viewDashboard = function (tab) {
var groupid = null;
Toolbar.addTab("Overview", "Forms.viewDashboard()");
Toolbar.addTab("By Staff", "Forms.viewDashboard(1)");
Toolbar.addTab("By Template", "Forms.viewDashboard(2)");
if (tab == null) {
var where = (groupid != null) ? "groupid={groupid}" : null;
showDateChart(where);
} else if (tab == 1) {
Forms.writeDashboardStaff();
} else if (tab == 2) {
Forms.writeTemplateChart();
}
List.show();
}
function showDateChart(where) {
var startdate = Date.addDays(Date.weekStart(), -8*7);
var map = new HashMap();
for (var i = 0; i < 8; i++) {
var date = Date.addDays(startdate, i*7);
map.set(date, 0);
}
var where2 = "date>={startdate}";
if (where != null) where2 += " AND " + where;
var forms = Query.select("Forms.forms", "id", where2);
for (var i = 0; i < forms.length; i++) {
var form = forms[i];
var date = Date.weekStart(form.date);
map.increment(date, 1);
}
Chart.init();
Chart.setTitle("Forms created by week");
Chart.addColumn('string');
Chart.addColumn('number');
for (var i = 0; i < map.keys.length; i++) {
var date = map.keys[i];
var count = map.get(date);
Chart.addRow(Format.week(date), count);
}
Chart.show("bar");
}