Paso 10: Usar componentes anidados con edición directa

Los componentes de Oracle Content Management se implantan mediante la arquitectura de componente de KnockoutJS. Esto significa que si está usando KnockoutJS para implantar los componentes, puede incluir los componentes incorporados de Oracle Content Management directamente en la plantilla.

Nota:

No puede usar componentes anidados si el componente se representa en un marco en línea, puesto que los componentes incorporados de Oracle Content Management solo pueden ejecutarse en la página de Oracle Content Management.

Para utilizar los componentes anidados:

Implante el componente mediante el uso de KnockoutJS.
Use RequireJS para incluir el componente y use la misma variable de instancia "ko" de Knockout que crea Oracle Content Management.

Es necesario puesto que Oracle Content Management amplía Knockout con componentes, y estos no estarán disponibles si usa su propia instancia de KnockoutJS.

En este paso, revisará cómo se representan los componentes de imagen, párrafo y título de Oracle Content Management en el componente personalizado. Un usuario podrá editarlo directamente en la página y acceder al panel de configuración del componente anidado.

Para ver cómo se incluyen estos componentes en la plantilla, edite el archivo render.js y observe el objeto sampleComponentTemplate. Aquí se muestra la sección por defecto que se representa:

'<!-- ko if: alignImage() !== \'right\' -->' +
'<div style="display:flex;">' +
'<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +
'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData } }"></scs-image>' +
'</div>' +
'<div data-bind="attr: {style: paragraphStyle}">' +
'<scs-title params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'titleId\', \'data\': titleData } }"></scs-title>' +
'<scs-paragraph params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'paragraphId\', \'data\': paragraphData } }"></scs-paragraph>' +
'</div>' +
'</div>' +
'<!-- /ko -->' +

Cuando observe el componente anidado <scs-image>, verá la siguiente entrada:

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +

Los datos scsComponent que se transfieren al enlace de plantilla params incluyen lo siguiente:

renderMode: hace referencia al modo en el que está el creador de sitios. Puede utilizar esto para activar y desactivar funciones. Por ejemplo, si lo usa el componente <scs-title>, agrega el editor de texto enriquecido cuando se ejecuta en el modo edit.
parentId: es necesario para que el componente de Oracle Content Management sepa que se representa como un componente anidado. Todos los cambios del componente anidado se guardarán en los datos del componente personalizado.
id: ID único para el componente anidado. El ID determinará el espacio de nombres del componente personalizado.
data: datos iniciales del componente anidado. Si el componente no vuelve a modificarse, se representará con estos datos iniciales.

Los valores de id y mode a los que se hace referencia se transfieren al componente personalizado en el objeto SampleComponentViewModel, por lo que no tendrá que modificar el objeto para obtener estos valores:

// Store the args
self.mode = args.viewMode;
self.id = args.id;

La sintaxis para el resto de componentes anidados soportados sigue el mismo patrón que para <scs-paragraph>; por ejemplo: <scs-image>, <scs-title>, <scs-button>.

Compruebe los resultados del paso 10

Refresque la página del sitio para que el creador de sitios pueda seleccionar los cambios del componente.
Cambie la página al modo de edición.
Arrastre y suelte el componente en la página.
Haga clic en el texto As a page author, you can edit. . . del componente y actualice la descripción mediante el editor de texto enriquecido.
Cambie al modo de vista previa para ver la actualización.
Vuelva al modo de edición.
Abra el panel de configuración del componente.
Haga clic en el enlace Componentes que aparece, puesto que ha encontrado el componente anidado.
Haga clic en Párrafo, que es el componente anidado encontrado.

Ahora puede actualizar las propiedades del componente de párrafo en el componente.

Nota:

Hasta que se haya instanciado el componente, Oracle Content Management no conoce otros componentes anidados que existan en la plantilla. Para informar a Oracle Content Management sobre componentes anidados ocultos, puede usar la API SitesSDK.setProperty('visibleNestedComponents', []);. Para que se muestren por defecto los componentes anidados ocultos, debe actualizar la matriz "nestedComponents": [] en el registro del componente.

Continúe con Paso 11: Soportar diferentes diseños.