Am Ende dieses Abschnitts können Sie einen Wert für eine neue Eigenschaft im Einstellungsbereich eingeben, sodass die benutzerdefinierte Komponente mit diesem neuen Wert geändert wird. Aktualisierungen der Eigenschaft werden außerdem automatisch mit der Seite gespeichert.
render.js
zwei JavaScript-Objekte in der Komponente:
SampleComponentViewModel
sampleComponentTemplate
Bearbeiten Sie render.js
, und aktualisieren Sie die Komponente SampleComponentViewModel
, um die neue Eigenschaft aufzunehmen. Ändern Sie diese Eigenschaft:
self.showStoryLayout = ko.observable();
Verwenden Sie stattdessen:
self.showStoryLayout = ko.observable(); self.imageBannerText = ko.observable();
Aktualisieren Sie SampleComponentViewModel
, um Wertänderungen abzurufen. Ändern Sie diese Eigenschaft:
self.imageWidth(customData && customData.width);
Verwenden Sie stattdessen:
self.imageWidth(customData && customData.width); self.imageBannerText(customData && customData.imageBannerText);
Ändern Sie sampleComponentTemplate
, um die neue Eigenschaft anzuzeigen. Ändern Sie diese Eigenschaft:
'<div data-bind="text: \'image width is: \' + imageWidth()"></div>' +
Verwenden Sie stattdessen:
'<div data-bind="text: imageBannerText"></div>' +
Synchronisieren Sie die Komponente, oder laden Sie sie in den Oracle Content Management-Server hoch.
Sie haben die Komponente jetzt so geändert, dass die neue Eigenschaft angezeigt wird. Im Gegensatz zum Einstellungsbereich, der in einen Inlineframe auf der Seite eingebettet ist, wird die Komponente direkt in die Seite eingefügt. Daher wird der für sie verfügbare Bereich automatisch größer, wenn die Komponente vergrößert wird.
Ergebnisse für Schritt 4 prüfen
So zeigen Sie die neue Eigenschaft an:
Aktualisieren Sie die Seite in der Site, damit Sitebuilder Änderungen an der Komponente abrufen kann.
Öffnen Sie die Seite im Bearbeitungsmodus.
Ziehen Sie die Komponente per Drag-and-Drop auf die Seite.
Öffnen Sie den Einstellungsbereich für die Komponente.
Klicken Sie auf die Schaltfläche Benutzerdefinierte Einstellungen.
Ändern Sie Image Banner
in Workspace
.
Nach der Komponentenaktualisierung wird auf der Seite Workspace
über dem Bild angezeigt.
Weiter mit Schritt 5: Trigger registrieren.