Passo 4: Apresentar a Nova Propriedade no Componente

No fim desta secção, poderá introduzir um valor para uma nova propriedade no painel Definições e ver a alteração do componente customizado para refletir o novo valor. As atualizações à propriedade também serão automaticamente gravadas com a página.

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

self.showStoryLayout = ko.observable();

Utilize esta alternativa:

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);

Utilize esta alternativa:

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

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

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

Utilize esta alternativa:

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

Sincronize ou carregue o componente para o servidor do Oracle Content Management.

Acabou de alterar o componente para apresentar a nova propriedade. Ao contrário do painel Definições que é incorporado numa moldura inline na página, e porque o componente é inserido diretamente a página, à medida que cresce em tamanho, a área disponível para o mesmo aumentará automaticamente.