Steg 4: Visa den nya egenskapen i komponenten

Efter det här avsnittet klarar du att ange ett värde för en ny egenskap i panelen Inställningar och se till att den anpassade komponenten ändras för att återspegla det nya värdet. Uppdateringar av egenskapen sparas också automatiskt åt dig tillsammans med sidan.

Redigera render.js och uppdatera komponenten SampleComponentViewModel för att inkludera den nya egenskapen. Ändra den här egenskapen:

self.showStoryLayout = ko.observable();

Använd den här istället:

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

Uppdatera SampleComponentViewModel för att hämta eventuella ändringar i värden. Ändra den här egenskapen:

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

Använd den här istället:

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

Ändra sampleComponentTemplate för att visa den nya egenskapen. Ändra den här egenskapen:

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

Använd den här istället:

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

Synkronisera eller ladda upp komponenten till Oracle Content Management-servern.

Du har nu ändrat komponenten så att den nya egenskapen visas. Till skillnad från panelen Inställningar, som är inbäddad i en iframe på sidan, fungerar det så att eftersom komponenten infogas direkt på sidan så ökar den yta som är tillgänglig för den automatiskt i takt med att den växer i storlek.