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 { 

    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.writeHtml("Current Times");
            page.writeEnd(); /* h1 */


                    page.writeEnd(); /* th */
                    page.writeEnd(); /* th */
                page.writeEnd(); /* tr */

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

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

    private String displayTime(String timeZoneIdentifier) {
        Calendar localTime = new GregorianCalendar(TimeZone.getTimeZone(timeZoneIdentifier));
        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 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 Rendered custom dashboard

Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

Asset types
Module types
Page types
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

Content types
Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

Admin configurations
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

Google Analytics
Apple News