Local Component Implementation

The component instance is created by the Component Factory object.

The Component Factory object entry in the component registration file is initData.componentFactory. This is a reference to a JavaScript file that RequireJS uses to load the component factory. It must return a JavaScript object that implements the componentFactory interface

The Component Factory object must implement the API customComponentFactory.createComponent(args), which creates each instance of the component.

args contains these settings:

  • SitesSDK: The Oracle Content and Experience Sites SDK.

  • id: The unique ID (GUID) for the component added to the page.

  • viewMode: The current mode the page is rendering. When a page is being edited, it’s "Edit". When a page is previewed, it’s "Navigate". At runtime, which is when the site is published, the value is undefined. You can provide different implementations based on what functionality should be exposed for each mode. For example, links shouldn’t be active when the page is running in Edit mode.

Note:

It isn't a requirement to use JQuery or Knockout for your component, but if you want to leverage Oracle Content and Experience features such as nested components, you must use the version of Knockout provided by Oracle Content and Experience. This version of Knockout has extended component registration and handlers, which wouldn't be available to you otherwise.

For the component itself, the SDK is passed in when the component is instantiated so that the component can communicate with the page lifecycle. The page lifecycle functions must be implemented by the component and are called by Oracle Content and Experience to render the component on the page.

Mandatory and optional APIs are provided to implement a component.

Mandatory APIs

customComponent.render(container): Asks the component to insert itself into the provided DOM container element.

  • container: DOM container element for the custom component HTML.

Optional APIs

customComponent.dispose(): Called when the component is being removed from the page. Provides an opportunity for the component to remove any resources that are no longer required.