4. lépés: Az új tulajdonság megjelenítése az összetevőben

A szakasz végén értéket adhat meg egy új tulajdonság számára a Beállítások panelen, és megtekintheti az egyéni összetevő ennek megfelelő változását. A tulajdonság módosításait is automatikusan menti a rendszer az oldallal.

Szerkessze a render.js fájlt, és módosítsa a SampleComponentViewModel objektumot, hogy tartalmazza az új tulajdonságot. Módosítsa a következő tulajdonságot:

self.showStoryLayout = ko.observable();

Ezt használja helyette:

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

Frissítse a SampleComponentViewModel objektumot az értékek változásának beolvasásához. Módosítsa a következő tulajdonságot:

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

Ezt használja helyette:

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

Módosítsa a sampleComponentTemplate objektumot úgy, hogy megjelenítse az új tulajdonságot. Módosítsa a következő tulajdonságot:

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

Ezt használja helyette:

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

Szinkronizálja vagy töltse fel az összetevőt az Oracle Content Management kiszolgálójára.

Ezzel úgy módosította az összetevőt, hogy megjelenítse az új tulajdonságot. Az oldalon beágyazott keretben elhelyezkedő Beállítások paneltől eltérően itt az összetevő közvetlenül az oldalra van beszúrva, így méretének növekedésekor a rendelkezésre álló terület automatikusan igazodni fog ehhez.