Creating dashboard widgets

Brightspot comes with a set of standard dashboard widgets that you can assemble into custom dashboards. In addition, you can create your own widgets and add them to custom dashboards.

Step 1: Create a customized dashboard widget

You create a custom dashboard widget by extending the class DashboardWidget and overwriting the method writeHtml. The following example creates a dashboard widget that shows the current time in various time zones.

showLineNumbers {5,9,16,22,31}

1import com.psddev.cms.tool.Dashboard;
2import com.psddev.cms.tool.DashboardWidget;
3import com.psddev.cms.tool.ToolPageContext;
4
5public class CurrentTimesWidget extends DashboardWidget {
6
7    @Override
8    public void writeHtml(ToolPageContext page, Dashboard dashboard) throws IOException {
9        Map<String, String> timeZoneIdentifiers = new HashMap<>();
10        timeZoneIdentifiers.put("New York", "America/New_York");
11        timeZoneIdentifiers.put("Los Angeles", "America/Los_Angeles");
12        timeZoneIdentifiers.put("Mexico City", "America/Mexico_City");
13
14        page.writeStart("div", "class", "widget");
15
16            page.writeStart("h1");
17                page.writeHtml("Current Times");
18            page.writeEnd(); /* h1 */
19
20            page.writeStart("table");
21
22                page.writeStart("tr");
23                    page.writeStart("th");
24                        page.writeHtml("City");
25                    page.writeEnd(); /* th */
26                    page.writeStart("th");
27                        page.writeHtml("Time");
28                    page.writeEnd(); /* th */
29                page.writeEnd(); /* tr */
30
31                for (String myTimeZone : timeZoneIdentifiers.keySet()) {
32                    page.writeStart("tr");
33                        page.writeStart("td");
34                           page.writeHtml(myTimeZone);
35                        page.writeEnd(); /* td */
36                        page.writeStart("td");
37                            String localTime = displayTime(timeZoneIdentifiers.get(myTimeZone));
38                            page.writeHtml(localTime);
39                        page.writeEnd(); /* td */
40                    page.writeEnd(); /* tr */
41                 }
42
43            page.writeEnd(); /* table */
44        page.writeEnd(); /* div */
45    }
46
47    private String displayTime(String timeZoneIdentifier) {
48        Calendar localTime = new GregorianCalendar(TimeZone.getTimeZone(timeZoneIdentifier));
49        localTime.setTimeInMillis(localTime.getTimeInMillis());
50        int hour = localTime.get(Calendar.HOUR_OF_DAY);
51        int minute = localTime.get(Calendar.MINUTE);
52        return (hour + ":" + minute);
53    }
54
55}

5. Declares the class CurrentTimesWidget. Objects instantiated from this class appear as Current Times Widget in the Dashboard.
9. Instantiates a HashMap of time zones.
16. Writes the widget’s header Current Times.
22. Writes a table header in the widget’s body.
31. Loops through each time-zone record. For each record, call the method displayTime to retrieve and then print the time zone’s current time.

Step 2: Add customized widget to a dashboard

You can add the customized widget to one-off or shared dashboards.

Step 3: Display customized widget in dashboard

Brightspot displays the customized widget when displaying the dashboard that includes it.

Rendered custom dashboard