Brightspot CMS Developer Guide

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.

import com.psddev.cms.tool.Dashboard;
import com.psddev.cms.tool.DashboardWidget;
import com.psddev.cms.tool.ToolPageContext;

public class CurrentTimesWidget extends DashboardWidget { 

    @Override
    public void writeHtml(ToolPageContext page, Dashboard dashboard) throws IOException {
        Map<String, String> timeZoneIdentifiers = new HashMap<>(); 
        timeZoneIdentifiers.put("New York", "America/New_York");
        timeZoneIdentifiers.put("Los Angeles", "America/Los_Angeles");
        timeZoneIdentifiers.put("Mexico City", "America/Mexico_City");

        page.writeStart("div", "class", "widget");

            page.writeStart("h1"); 
                page.writeHtml("Current Times");
            page.writeEnd(); /* h1 */

            page.writeStart("table");

                page.writeStart("tr"); 
                    page.writeStart("th");
                        page.writeHtml("City");
                    page.writeEnd(); /* th */
                    page.writeStart("th");
                        page.writeHtml("Time");
                    page.writeEnd(); /* th */
                page.writeEnd(); /* tr */

                for (String myTimeZone : timeZoneIdentifiers.keySet()) { 
                    page.writeStart("tr");
                        page.writeStart("td");
                           page.writeHtml(myTimeZone);
                        page.writeEnd(); /* td */
                        page.writeStart("td");
                            String localTime = displayTime(timeZoneIdentifiers.get(myTimeZone));
                            page.writeHtml(localTime);
                        page.writeEnd(); /* td */
                    page.writeEnd(); /* tr */
                 }

            page.writeEnd(); /* table */
        page.writeEnd(); /* div */
    }

    private String displayTime(String timeZoneIdentifier) {
        Calendar localTime = new GregorianCalendar(TimeZone.getTimeZone(timeZoneIdentifier));
        localTime.setTimeInMillis(localTime.getTimeInMillis());
        int hour = localTime.get(Calendar.HOUR_OF_DAY);
        int minute = localTime.get(Calendar.MINUTE);
        return (hour + ":" + minute);
    }

}
  • 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.

Add customized widget to dashboard

Step 3: Display customized widget in dashboard

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

Rendered custom dashboard

Previous Topic
Dashboard widgets
Next Topic
Configuring dashboard widgets
Was this topic helpful?
Thanks for your feedback.