About Developing Components

Developing your own custom component enables you to develop compound elements that can be embedded within the site page, using any page technology of choice. This effectively enables you to extend the list of components provided with Oracle Content Management.

Entries for all registered components are stored in the Component Catalog, which is a folder in Oracle Content Management that contains the entries for all registered components.

Don’t use the following names for site templates, themes, components, sites, or site pages: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice , _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Although you can use the following names for site pages, don’t use them for site templates, themes, components, or sites: documents, sites.

Component Types

The Component Catalog supports these types of components:

Local component
Local component rendered in an inline frame
Remote component

The type of component is stored as an extension attribute, "xScsAppType", of the component folder. Valid values follow.

Type	Description
Local component	All dependencies are expected to be local.
Local component rendered in an inline frame	Component is served from the same domain as Oracle Content Management.
Remote component	Component is served from remote location.

Component File Structure

Each of the types of components has a different set of files when created in the Component Catalog, based on how they are implemented.

Local component:

/Components/component-name
    appinfo.json
    _folder_icon.jpg
    assets
        settings.html
        render.mjs

Local component using inline frame:

/Components/component-name
    appinfo.json
    _folder_icon.jpg
    assets
        settings.html
        render.js
        js
            sites.min.js
            knockout.min.js
            jquery.min.js

Remote component:

/Components/component-name
    appinfo.json
    _folder_icon.jpg
    keys.json

Folder Metadata

The component registration data is stored in the folder metadata. The following properties are used to uniquely identify the component and its type.

Property	Description
app name	Name of the folder which designates the name of the component.
app description	Description of the folder.
app guid	Every component is associated with a GUID and is stored as an extension attribute `xScsItemGUID`. The GUID is generated by the server when the component is created.
app type	Property designates the component type. It is stored as an extension attribute `xScsApType`.

Note:

The property iconUrl, which is stored as extension attribute xScsAppIconUrl, has been deprecated.

appinfo.json File

The appinfo.json registration file for each type of component contains only data that is not available in the folder metadata. Component properties that are defined in the folder metadata are not duplicated over to the appinfo.json file. Note that the appInfo.json file differs from the components.json file, which is used for themed components.

Local component:

{
        "settingsData":{
                "settingsHeight":80,
                "settingsRenderOption"; "dialog",
                "settingsWidth":300,
                "componentLayouts":[],
                "triggers":[],
                "actions":[]
        },
        "initialData":{
                "customSettingsData":[],
        }
}

Local component rendered in an inline frame:

{
        "endpoints": {
              "settings": {
                      "height": "300",
                      "width": "400"
              }
        }
        "initialData": {
                "customSettingsData": {}
        }
}

Remote component:

{
        "endpoints": {
              "widget": {
                     "url": "http://www.externaldomain.com/app/render.html"
              }
              "settings": {
                      "url": "http://www.externaldomain.com/app/settings.html",
                      "height": "300",
                      "width": "400"
              }
        }
        "initialData": {
              "customSettingsData": {}
        }
}

There are no registered "url" values for local components. They use certain files which can be edited for content, but you can’t change the location or name.

Local components use the files assets/render.mjs and assets/settings.html.
Local components rendered in an inline frame use the files assets/render.html and assets/settings.html.
Remote components use whatever "url" values are specified.