La sfârşitul acestei secţiuni, veţi putea introduce o valoare pentru o nouă proprietate în panoul Setări şi veţi vedea modificarea personalizată a componentei care reflectă noua valoare. Actualizările aduse proprietăţii vor fi, de asemenea, salvate automat pentru dvs. odată cu pagina respectivă.
render.js, trebuie să actualizaţi două obiecte JavaScript din componentă:
SampleComponentViewModel
sampleComponentTemplate
Editaţi render.js şi actualizaţi componenta SampleComponentViewModel pentru a include noua proprietate. Modificaţi această proprietate:
self.showStoryLayout = ko.observable();
Utilizaţi în schimb:
self.showStoryLayout = ko.observable(); self.imageBannerText = ko.observable();
Actualizaţi SampleComponentViewModel pentru a obţine orice modificare a valorilor. Modificaţi această proprietate:
self.imageWidth(customData && customData.width);
Utilizaţi în schimb:
self.imageWidth(customData && customData.width); self.imageBannerText(customData && customData.imageBannerText);
Modificaţi sampleComponentTemplate pentru a afişa noua proprietate. Modificaţi această proprietate:
'<div data-bind="text: \'image width is: \' + imageWidth()"></div>' +
Utilizaţi în schimb:
'<div data-bind="text: imageBannerText"></div>' +
Sincronizaţi sau încărcaţi componenta pe serverul Oracle Content Management.
Aţi modificat acum componenta pentru a afişa noua proprietate. Spre deosebire de panoul Setări care este înglobat într-un cadru inline pe pagină, deoarece componenta este inserată direct în pagină ea va creşte automat pe măsură ce creşte în dimensiune suprafaţa disponibilă.
Verificaţi rezultatele de la pasul 4
Pentru a vedea afişată noua proprietate:
Reîcărcaţi pagina din site-ul dvs. pentru ca generatorul de site-uri să poată preleva modificările aduse componentei.
Treceţi pagina în modul Editare.
Glisaţi şi plasaţi componenta dvs. pe pagină.
Aduceţi panoul Setări în dreptul componentei dvs.
Faceţi clic pe butonul Setări personalizate.
Modificaţi Image Banner la Worksapce.
Veţi vedea că actualizarea componentei pe pagină la Worksapce apare deasupra imaginii.
Continuaţi cu Pasul 5: Înregistrarea triggerelor.