Schritt 4: Neue Eigenschaft in der Komponente anzeigen

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.

Aktualisieren Sie in der Datei 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:

  1. Aktualisieren Sie die Seite in der Site, damit Sitebuilder Änderungen an der Komponente abrufen kann.

  2. Öffnen Sie die Seite im Bearbeitungsmodus.

  3. Ziehen Sie die Komponente per Drag-and-Drop auf die Seite.

  4. Öffnen Sie den Einstellungsbereich für die Komponente.

  5. Klicken Sie auf die Schaltfläche Benutzerdefinierte Einstellungen.

  6. Ändern Sie Image Banner in Workspace.

    Nach der Komponentenaktualisierung wird auf der Seite Workspace über dem Bild angezeigt.

Weiter mit Schritt 5: Trigger registrieren.