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 and Experience.

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

Don’t use the following names for 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 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 and Experience.

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.js

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.

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.js 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.