In diesem Schritt prüfen Sie die Struktur der für eine lokale Komponente angegebenen Einstellungen.
Zusätzlich zur Datei render.js
im Verzeichnis /assets
enthält dasselbe Verzeichnis auch die vorab erstellte Datei settings.html
. Die Datei settings.html
rendert alle benutzerdefinierten Einstellungsdaten für die Komponente. In der Standardimplementierung gibt es die einzelne Eigenschaft imageWidth
in den benutzerdefinierten Einstellungsdaten.
So prüfen Sie die Struktur einer lokalen Komponente:
Suchen Sie mit dem Oracle Content Management-Desktopclient für die Synchronisierung Ihre Komponente, und synchronisieren Sie sie mit dem Dateisystem.
Wenn Sie nicht über den Desktopsynchronisierungsclient verfügen, können Sie die Komponente auf der Registerkarte Komponenten der Oracle Content Management-Weboberfläche auswählen und dann einen Drilldown ausführen, um die Dateien anzuzeigen.
In der Liste der Dateien unter der Komponente sehen Sie die folgenden Dateien:
assets render.js settings.html appinfo.json _folder_icon.jpg
Öffnen Sie im Verzeichnis /assets
die Datei settings.html
, und prüfen Sie den Inhalt. Im Gegensatz zur Datei render.js
verwendet die Datei settings.html
einen Inlineframe im Einstellungsbereich in Sitebuilder. Daher benötigt sie auch Zugriff auf die unterstützenden Dateien für das korrekte Rendering im Inlineframe. Sitebuilder ist zum Verwalten der Site erforderlich, damit etwaige Fehler im JavaScript-Code von Sitebuilder isoliert werden können. Daher verwendet die Datei settings.html
einen Inlineframe.
Hauptbereiche der Datei settings.html
:
Knockout-Vorlage zum Rendern des Einstellungsbereichs.
<!-- ko if: initialized() --> <div class="scs-component-settings"> <div> <!-- Width --> <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label> <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box"> </div> </div> <div data-bind="setSettingsHeight: true"></div> <!-- /ko -->
Benutzerdefinierter Binding Handler zum Anpassen der Höhe des Inlineframes, wenn der Einstellungsbereich gerendert wurde.
ko.bindingHandlers.scsCompComponentImpl
Ein Knockout-ViewModel, das auf die Knockout-Vorlage angewendet wird.
SettingsViewModel
Hauptelemente von SettingsViewModel
:
Abonnements des Komponentenlebenszyklus.
Komponenteninitialisierung:
Stellen Sie sicher, dass die Komponente erst gerendert wird, wenn alle Daten abgerufen wurden. Dies wird mit Knockout-Observables verarbeitet.
self.initialized = ko.observable(false);
Stellen Sie sicher, dass die Daten erst aktualisiert werden, wenn sie bereit sind.
self.saveData = false;
Rufen Sie die anfänglichen Werte für erforderliche Eigenschaften ab. Dies wird von Callbacks zum Abrufen der Daten verarbeitet.
SitesSDK.getProperty('customSettingsData', function (data) { //update observable self.width(data.width); // note that viewModel is initialized and can start saving data self.initialized(true); self.saveData = true; });
Speichern Sie eventuelle Eigenschaftsänderungen in den benutzerdefinierten Einstellungsdaten.
self.save = ko.computed(function () { var saveconfig = { 'width': isNaN(self.width()) ? self.width() : self.width() + 'px' }; // save data in page if (self.saveData) { SitesSDK.setProperty('customSettingsData', saveconfig); } }, self);
Um eine weitere zu erfassende Eigenschaft hinzuzufügen, müssen Sie mehrere Schritte ausführen:
Aktualisieren Sie die Benutzeroberfläche, um den neuen Wert anzuzeigen.
Initialisieren Sie den Wert auf den aktuellen für die Komponente gespeicherten Wert.
Speichern Sie Änderungen am Wert wieder in der Komponente.
Um eine weitere Eigenschaft zur benutzerdefinierten Komponente hinzuzufügen, nehmen Sie die folgenden Änderungen an der Datei settings.html
vor:
Fügen Sie ein weiteres Observable zum Verarbeiten der neuen Eigenschaft hinzu. Ändern Sie diesen Code:
self.width = ko.observable();
Verwenden Sie stattdessen diesen Code:
self.width = ko.observable(); self.imageBannerText = ko.observable();
Rufen Sie den aktuellen Wert für die neue Eigenschaft ab, wenn der Einstellungsbereich zum ersten Mal angezeigt wird. Ändern Sie diesen Code:
self.width(data.width);
Verwenden Sie stattdessen diesen Code:
self.width(data.width); self.imageBannerText(data.imageBannerText);
Speichern Sie Änderungen an dieser neuen Eigenschaft. Ändern Sie diesen Code:
'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
Verwenden Sie stattdessen diesen Code:
'width': isNaN(self.width()) ? self.width() : self.width() + 'px', 'imageBannerText': self.imageBannerText()
Fügen Sie eine Benutzeroberfläche hinzu, um das neue Feld anzuzeigen. Ändern Sie diesen Code:
<label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label> <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
Verwenden Sie stattdessen diesen Code:
<label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label> <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box"> <label id="imageBannerTextLabel" for="imageBannerText" class="settings-heading" data-bind="text: 'Image Banner'"></label> <input id="imageBannerText" data-bind="value: imageBannerText" placeholder="Text to display above an image" class="settings-text-box">
Synchronisieren Sie die Datei settings.html
, oder laden Sie sie hoch.
Bei einer Ausführung zu diesem Zeitpunkt würde das Feld angezeigt werden. Die Größe des Einstellungsbereichs wird allerdings nicht automatisch geändert. Da Sie den Bereich vergrößert haben, müssen Sie auch für den Registrierungseintrag components.json
die neue Größe angeben.
Laden Sie die Datei appinfo.json
herunter. Diese befindet sich auf derselben Ebene wie das Verzeichnis assets/
der Komponente. Aktualisieren Sie dann die Größe des Einstellungsbereichs. Ändern Sie diesen Code:
"settingsHeight": 90,
Verwenden Sie stattdessen diesen Code:
"settingsHeight": 160,
Synchronisieren Sie die Datei appinfo.json
, oder laden Sie sie hoch.
Ergebnisse für Schritt 3 prüfen
Sie sollten jetzt in der Lage sein, die neue Eigenschaft, die Sie dem Einstellungsbereich hinzugefügt haben, zu sehen und einzugeben.
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.
Für jede der Eigenschaften in der Datei settings.html
werden zwei Felder angezeigt.
Weiter mit Schritt 4: Neue Eigenschaft in der Komponente anzeigen.