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);
    }

}

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