Etapa 4: Exibir a Nova Propriedade no Componente

Ao final desta seção, você poderá digitar o valor de uma nova propriedade no painel Definições e ver a alteração do componente personalizado refletir o novo valor. As atualizações na propriedade também serão salvas automaticamente para você com a página.

Edite render.js e atualize o componente SampleComponentViewModel para incluir a nova propriedade. Altere esta propriedade:

self.showStoryLayout = ko.observable();

Em seu lugar, use esta:

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

Atualize SampleComponentViewModel para obter qualquer alteração nos valores. Altere esta propriedade:

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

Em seu lugar, use esta:

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

Altere sampleComponentTemplate para exibir a nova propriedade. Altere esta propriedade:

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

Em seu lugar, use esta:

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

Sincronize ou faça upload do componente para o servidor do Oracle Content Management.

Agora você alterou o componente para exibir a nova propriedade. Ao contrário do painel Definições que é incorporado em um quadro em linha na página, porque o componente é inserido diretamente na página, à medida que ele aumenta de tamanho, a área disponível para ele aumentará automaticamente.