1. Building Sites with Oracle Content Management
  2. Developing for Sites
  3. Develop Components
  4. Local Component Implementation

Local Component Implementation

The component exports a default class export from the JavaScript module. The JavaScript module is dynamically imported into the page and then a new instance of the class is created.

For example, in render.mjs, the custom component class will be the default export from the module export.
export default class {
      constructor(args) {...}
      render(container) {...}
}

The following settings are contained in args:

  • SitesSDK: The Oracle Content Management 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 Management features such as nested components, you must use the version of Knockout provided by Oracle Content Management. 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 Management 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.