Creating

You can create widgets that appear in the Content Edit Page by extending the abstract class ContentEditWidget. That abstract class includes three abstract methods that you must override, all of which support displaying read-only data. For information about creating content edit widgets that can update data, see Creating Updating Content Edit Widgets.

Step 1: Declare a Custom Content Edit Widget

package widgets;

import com.psddev.cms.tool.ContentEditWidget;

public class CurrentTimesWidget extends ContentEditWidget {

}

Step 2: Display the Widget’s Header

You display the custom widget’s header by implementing the method getHeading.

public String getHeading(ToolPageContext page, Object content) {
    /* Return string appearing in widget's title bar. */
}

Step 3: Display the Widget’s Body

You display the custom widget’s body by implementing the method display.

public void display(ToolPageContext page, Object content, ContentEditWidgetPlacement placement) throws IOException {
    /* Use page.write methods to display the widget's body. */
}

Step 4: Display Custom Widget in Content Edit Page

The following snippet shows an entire class for displaying the custom widget Current Time Zones in the content edit page. The custom widget lists several cities and their current time.

Implementing a Custom Widget in Content Edit Page
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
package widgets;

import com.psddev.cms.tool.*;

import java.io.IOException;

import java.util.*;

public class CurrentTimesWidget extends ContentEditWidget {

    @Override
    public void display(ToolPageContext page, Object content, ContentEditWidgetPlacement placement) 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("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 */
    }

    public ContentEditWidgetPlacement getPlacement(ToolPageContext page, Object content) {
        return ContentEditWidgetPlacement.BOTTOM;
    }

    public String getHeading(ToolPageContext page, Object content) {
        return "Current Times";
    }

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

In the previous snippet—

  • Line 9 declares the class CurrentTimesWidget. Objects instantiated from this class appear as Current Times Widget in the Dashboard.
  • Lines 13–16 instantiate a HashMap of time zones.
  • Lines 20–27 write a table header in the widget’s body.
  • Lines 29–39 loop through each time-zone record. For each record, call the method displayTime to retrieve and then print the time zone’s current time.
  • Line 44 positions the widget under the content edit form. For details about positioning a widget on the content edit form, see Position.
  • Line 48 displays the widget’s heading.

Based on the previous snippet, the custom widget Current Times appears at the bottom of the content edit page.

../../../_images/custom-widget-content-edit-form.png

By default, Brightspot displays custom widgets on the content edit page for all content types. You can suppress a custom widget for individual content types; for details, see Hiding.

See also: