Custom global properties are meant to be shared across all sites on a given content management system. The recommended approach consists of creating a custom configuration element defined as follows:

• The presentation element name must be UI/Config/SiteConfigHtml.

• The element code must follow the pattern shown in About the Configuration Properties.

For example, you may want to:

• Override the value of maxTabCount for all sites.

• Override the default view for Page assets.

• And, define an additional custom property called foo.

To do this, create an element called CustomElements/UI/Config/SiteConfigHtml, containing the following code:

<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld" %> 
<cs:ftcs>
webcenter.sites['${param.namespace}'] = function (config) {
    // override existing properties
    config.maxTabCount = 60;
    config.defaultView.Page = "form";

    // add custom properties
    config.foo = "bar";

}
</cs:ftcs>

In some cases, the Contributor interface must be configured differently for each content management site. It is recommended that you override the core controller element called UI/Config/SiteConfig.

To override the UI/Config/SiteConfig core element, create an element as follows:

CustomElements/siteName/UI/Config/SiteConfigHtml

where siteName is the name of the content management site (for instance, avisports).

For example, the avisports demo site enforces web mode as the default mode for assets of type Page and AVIArticle. This is done by defining the JSP element CustomElements/avisports/UI/Config/SiteConfigHtml, and providing the following settings:

<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld" %>
<%@ taglib prefix="ics" uri="futuretense_cs/ics.tld" %>
<cs:ftcs>
webcenter.sites['${param.namespace}'] = function (config) {
    // default view modes for avisports
    config.defaultView.Page = "web";
    config.defaultView.AVIArticle = "web";
}
</cs:ftcs>

Loading of Configuration Elements

The global configuration element is always loaded first. Additional configuration elements are loaded in alphabetic order. For instance, using the examples above, configuration properties would be loaded in the following order:

Property Values

The value of some properties is, in some cases, an object. That is:

config.someProperty = {
  foo: "bar",
  x: 123
};

When partially overriding this property, it is important to distinguish between the following types of code:

config.someProperty = {
  x: 3456
};

vs.

config.someProperty.x = 3456;

In the first case, the property foo is overridden as "undefined", whereas in the second case, the original value of foo is preserved.

• Use the following configuration which determines the toolbar actions that are available in web mode for all asset types:

  config.toolbars = {
      ( …)
   
      "web": {
        "edit": ["form-mode", "inspect", "separator", "save", "preview",
                 "approve", "delete", "separator", "changelayout",
                 "separator", "checkincheckout", "refresh"],
        "view": ["form-mode", "edit", "separator", "preview", "approve",
                 "delete", "separator", "checkincheckout", "refresh"]
  
      ( …)
  
  }
  

The above configuration defines two lists of actions (edit and view), corresponding to the asset's views: Edit and Inspect.

Each toolbar configuration can be customized by asset type and subtype by adding a property named:

• viewAlias/assetType

• viewAlias/assetType/assetSubtype

For example, add the Bookmark/Unbookmark buttons for page assets in web mode.

• In a custom configuration element (such as CustomElements/avisports/UI/Config/SiteConfigHtml), add the following property:

  config.toolbars["web/Page/AVISection"] = {
      "edit": config.toolbars.web.edit, // reuse default for edit mode
      "view": ["form-mode", "edit", "separator", "preview", "approve", "delete",
                      "bookmark", "unbookmark", "separator",
                      "checkincheckout",  "refresh"]
  }
  

  Inspecting the Surfing Page asset now shows the toolbar.

  Figure 61-1 Surfing Page Asset Toolbar

  
  Description of "Figure 61-1 Surfing Page Asset Toolbar"

• To define custom actions add new entries to the config.toolbarButtons property, as follows:

  config.toolbarButtons.<customActionName> = {
    src: <path_to_icon>,
    onClick: <click_handler>
  }
  

• For example, let's define the following helloWorld custom action:

  config.toolbarButtons.helloWorld = {
        src: 'js/fw/images/ui/ui/toolbarButton/smartlist.png',
        onClick: function () {
            alert('Hello World!!');
        },
        buttonType: 'button'
  }

  The helloWorld action can now be referenced from a toolbar configuration as follows (we reuse our example from the previous section):

  config.toolbars["web/Page/AVISection"] = {
      "view":
            ["form-mode", "edit", "separator", "preview", "approve",
             "bookmark", "unbookmark", "separator",
             "checkincheckout", "separator", "helloWorld", "refresh"],
  
      "edit": config.toolbars.web.edit // reuse default web mode toolbar
  }

  Note:

  In this example, we have added a separator (a vertical line) and the custom button to the toolbar.

  Figure 61-2 Separator and Toolbar Button

  
  Description of "Figure 61-2 Separator and Toolbar Button"

A more elaborate example would involve, for instance, creating a CSElement which outputs an asset's id and type, and then creating a toolbar option that calls the element when clicked. For example:

When the custom helloAsset button is clicked, the CSElement (created in step 1) is called and a dialog box opens providing the asset's name, id, and type:

Figure 61-4 Dialog Box Showing Asset's Name, ID, and Type

Description of "Figure 61-4 Dialog Box Showing Asset's Name, ID, and Type"