Loading the Element API Element API Dependent Scripts

8 Custom Elements 8-1 8 Custom Elements This section covers the following topics: ■ Section 8.1, About Custom Elements ■ Section 8.2, Element API ■ Section 8.3, Custom Elements within Contributor ■ Section 8.4, Legacy Custom Element Compatibility

8.1 About Custom Elements

A custom element is a user-defined Site Studio element. In addition to the other productized Site Studio elements, the custom element provides a way to extend the Site Studio product to suit individual business needs. From a code perspective, custom elements are essentially full HTML type files for example, htm, hcsp, jsp, and so forth that reside within an IFRAME in the contributor form. A custom element uses an API and implements a hand-full of callbacks in order function correctly as a Site Studio element.

8.2 Element API

In order for a custom element to function properly in a contributor form, a custom element must utilize an API and implement a hand-full of callbacks. The ElementAPI object is a JavaScript object explicitly loaded into the custom element page that facilitates communication between the Contributor form and the custom element. The ElementAPI provides methods for custom elements to communicate to the Contributor form and a callback mechanism for the Contributor form to pass notifications to the custom element. This section contains the following topics: ■ Section 8.2.1, Loading the Element API ■ Section 8.2.2, Element API Dependent Scripts

8.2.1 Loading the Element API

Before the ElementAPI and its supporting libraries can be used; the ElementAPI must first be loaded into the Custom Element page. After the ElementAPI is loaded, the Custom Element should continue with page initialization and notify the Contributor form that the Custom Element is loaded. 8-2 Oracle Fusion Middleware Technical Reference Guide for Site Studio html head titleDefault Custom Element Formtitle script type=textjavascript function Initialize { =========================================================================== TODO: ElementAPI is loaded. Place Custom Element initialization code here. =========================================================================== Let the Contributor Form know that this Custom Element is loaded and ready. ElementAPI.Ready; } Load the ElementAPI and its supporting libraries - then call Initialize Parameter 1: The Custom Elements window object. This parameter uniquely identifies the Custom Element to the Contributor Form. Parameter 2: A function pointer. This function will be executed after the ElementAPI and its supporting libraries are loaded. try { window.top.WCM.InitializeCustomElementwindow, Initialize; } catche { } script head body h3Default Custom Element Formh3 body html

8.2.2 Element API Dependent Scripts

When the ElementAPI is loaded into the Custom Element page, so are the ElementAPI dependent scripts. These scripts contain most of the JavaScript WCM library and is also available to use in authoring custom elements. The following is a list of script files loaded into a custom element. ■ wcm.js ■ .basewcm.dhtml.js ■ .basewcm.get.js ■ .basewcm.http.js ■ .basewcm.popup.js ■ .sitestudiowcm.contentserver.popup.js ■ .formelementswcm.elementapi.js ■ .sitestudioelementswcm.sitestudio.elementapi.js ■ .sitestudiowcm.idc.js ■ .formelementselementwcm.element.js ■ .formelementscustomwcm.custom.js As with other custom scripts, you can modify any of these as you need and place the modified script in the custom directory. Custom Elements 8-3

8.3 Custom Elements within Contributor