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.

1
import com.psddev.cms.tool.Dashboard;
2
import com.psddev.cms.tool.DashboardWidget;
3
import com.psddev.cms.tool.ToolPageContext;
4

5
public 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
}

• ①Declares the class CurrentTimesWidget. Objects instantiated from this class appear as Current Times Widget in the Dashboard.
• ②Instantiates a HashMap of time zones.
• ③Writes the widget’s header Current Times.
• ④Writes a table header in the widget’s body.
• ⑤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.