Tabs

The content edit form typically includes three tabs: Main, Overrides, and SEO. (Other tabs are available depending on the content type and Brightspot’s configuration.) You can add custom tabs to the content edit form.

The interface Tab specifies methods for displaying the tab, the tab’s contents, and a callback for an update event. The following sections describe how to implement these methods.

This interface is available for embedded objects displayed in the content edit form.

Displaying a Tab

The following snippet illustrates how to declare a class that displays a tab in the content edit form and how to populate the tab with a label and text.

 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
59
60
61
62
63
64
package tabs;

import com.psddev.cms.tool.Tab;
import com.psddev.cms.tool.ToolPageContext;

import java.io.IOException;
import java.util.*;

public class TimeZonesTab implements Tab {

    @Override
    public void onUpdate(ToolPageContext page, Object content) { }

    @Override
    public String getDisplayName() {
        return "Local Times";
    }

    @Override
    public boolean shouldDisplay(Object o) {
        return true;
    }

    @Override
    public void writeHtml(ToolPageContext page, Object o) 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 */
    }

    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 TimeZonesTab as an implementation of Tab. Any class implementing this interface appears as a tab in the content edit form.
  • Lines 14–17 specify the tab’s label text.
  • Lines 19–22 indicate the tab always appears in the content edit form. For an example of conditionally displaying the tab, see Conditionally Displaying a Tab.
  • Lines 24–63 contain two methods that generate a table of localized UTC times. For an explanation of these methods, see the snippet Implementing a Custom Widget in Content Edit Page.

The following illustration shows a tab’s label and custom text.

../../../_images/custom-tab.png

Conditionally Displaying a Tab

You can use the method Tab#shouldDisplay to show or hide a custom tab based on the passed object or any other object you can access.

1
2
3
4
@Override
public boolean shouldDisplay(Object content) {
    return (content instanceof Article);
}

In the previous snippet, line 3 tests if the current content object is of type article; if so, Brightspot displays the custom tab.

Handling Update Events in the Content Edit Form

Every change in the content edit form (even before clicking Publish) calls the method Tab#onUpdate. You can use this method to dynamically update the database without requiring the user to click Publish.

1
2
3
4
5
@Override
public void onUpdate(ToolPageContext page, Object content) {
    State state = State.getInstance(content);
    updateFields(page, state);
}

In the previous snippet—

  • Line 2 traps updates to the content edit form and receives an object representing the current page and another object representing the content.
  • Line 3 instantiates a State object corresponding to the current object.
  • Line 4 passes the content and state objects to a private method (not shown) that updates the database.