Paso 4: Mostrar la propiedad nueva en el componente

Al final de esta sección, podrá introducir un valor para una propiedad nueva en el panel de configuración y ver cómo cambia el componente personalizado para reflejar el nuevo valor. Las actualizaciones de la propiedad también se guardarán automáticamente con la página.

Edite render.js y actualice el componente SampleComponentViewModel para incluir la propiedad nueva. Cambie esta propiedad:

self.showStoryLayout = ko.observable();

Use esto en su lugar:

self.showStoryLayout = ko.observable();
self.imageBannerText = ko.observable();

Actualice SampleComponentViewModel para obtener los cambios en los valores. Cambie esta propiedad:

self.imageWidth(customData && customData.width);

Use esto en su lugar:

self.imageWidth(customData && customData.width);
self.imageBannerText(customData && customData.imageBannerText);

Cambie sampleComponentTemplate para mostrar la nueva propiedad. Cambie esta propiedad:

'<div data-bind="text: \'image width is: \' + imageWidth()"></div>' +

Use esto en su lugar:

'<div data-bind="text: imageBannerText"></div>' +

Sincronice o actualice el componente en el servidor de In Oracle Content Management.

Ha modificado el componente para mostrar la propiedad nueva. Al contrario que el panel de configuración que está embebido en un marco en línea en la página, debido a que el componente se inserta directamente en la página, conforme incrementa su tamaño, el espacio disponible aumentará automáticamente.