Schritt 10: Verschachtelte Komponenten mit Inline-Bearbeitung verwenden

Oracle Content Management-Komponenten werden mit der KnockoutJS-Komponentenarchitektur implementiert. Wenn Sie Komponenten also mit KnockoutJS implementieren, können Sie integrierte Oracle Content Management-Komponenten direkt in die Vorlage aufnehmen.

Hinweis:

Da integrierte Oracle Content Management-Komponenten nur auf der Oracle Content Management-Seite ausgeführt werden können, können Sie keine verschachtelten Komponenten verwenden, wenn die Komponente in einem Inlineframe gerendert wird.

So nutzen Sie verschachtelte Komponenten:

  1. Implementieren Sie die Komponente mit KnockoutJS.

  2. Nehmen Sie die Komponente mit RequireJS auf, und verwenden Sie dieselbe Knockout-"ko"-Instanzvariable, die von Oracle Content Management erstellt wird.

    Das ist erforderlich, weil Oracle Content Management Knockout durch Komponenten erweitert, die nicht verfügbar sind, wenn Sie Ihre eigene KnockoutJS-Instanz verwenden.

In diesem Schritt prüfen Sie, wie die Bild-, Absatz- und Titelkomponenten von Oracle Content Management in einer benutzerdefinierten Komponente gerendert werden. Benutzer können diese direkt auf der Seite bearbeiten und auf den Einstellungsbereich für die verschachtelte Komponente zugreifen.

Um zu prüfen, wie diese Komponenten in die Vorlage aufgenommen wurden, bearbeiten Sie die Datei render.js, und prüfen Sie das Objekt sampleComponentTemplate. Der gerenderte Standardabschnitt wird hier gezeigt:

'<!-- ko if: alignImage() !== \'right\' -->' +
'<div style="display:flex;">' +
'<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +
'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData } }"></scs-image>' +
'</div>' +
'<div data-bind="attr: {style: paragraphStyle}">' +
'<scs-title params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'titleId\', \'data\': titleData } }"></scs-title>' +
'<scs-paragraph params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'paragraphId\', \'data\': paragraphData } }"></scs-paragraph>' +
'</div>' +
'</div>' +
'<!-- /ko -->' +

Unter der verschachtelten Komponente <scs-image> sehen Sie den folgenden Eintrag:

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +
Die an das params-Vorlagen-Binding übergebenen scsComponent-Daten umfassen Folgendes:

  • renderMode: Referenziert den Modus von Sitebuilder. Damit können Sie Features aktivieren und deaktivieren. Beispiel: Bei Verwendung durch die Komponente <scs-title> wird der Rich Text-Editor bei Ausführung im edit-Modus hinzugefügt.

  • parentId: Damit wird der Oracle Content Management-Komponente mitgeteilt, dass sie als verschachtelte Komponente gerendert wird. Alle Änderungen an der verschachtelten Komponente werden in den Daten für die benutzerdefinierte Komponente gespeichert.

  • id: Eine eindeutige ID für die verschachtelte Komponente. Diese wird durch die ID für die benutzerdefinierte Komponente einem weiteren Namespace zugeordnet.

  • data: Anfängliche Daten für die verschachtelte Komponente. Wenn die Komponente nicht weiter geändert wird, wird sie mit diesen anfänglichen Daten gerendert.

Die referenzierten Werte für id und mode werden im Objekt SampleComponentViewModel an die benutzerdefinierte Komponente übergeben. Sie müssen das Objekt also nicht ändern, um diese Werte abzurufen:

// Store the args
self.mode = args.viewMode;
self.id = args.id;

Die Syntax für alle anderen unterstützten verschachtelten Komponenten folgt demselben Muster wie für <scs-paragraph>. Beispiel: <scs-image>, <scs-title>, <scs-button>.

Ergebnisse für Schritt 10 prüfen

  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. Klicken Sie auf den Text As a page author, you can edit. . . in der Komponente, und aktualisieren Sie die Beschreibung mit dem Rich Text-Editor.

  5. Wechseln Sie in den Vorschaumodus, um die Aktualisierung anzuzeigen.

  6. Wechseln Sie zurück in den Bearbeitungsmodus.

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

  8. Klicken Sie auf den Link Komponenten, der jetzt angezeigt wird, weil die verschachtelte Komponente gefunden wurde.

  9. Klicken Sie auf die gefundene verschachtelte Komponente Absatz.

Jetzt können Sie die Eigenschaften für die Absatzkomponente in Ihrer Komponente aktualisieren.

Hinweis:

Bis zur Instanziierung der Komponente ist Oracle Content Management nicht über eventuell vorhandene verschachtelte Komponenten in der Vorlage informiert. Mit der SitesSDK.setProperty('visibleNestedComponents', []);-API können Sie Oracle Content Management auf ausgeblendete verschachtelte Komponenten hinweisen. Damit ausgeblendete verschachtelte Komponenten standardmäßig angezeigt werden, müssen Sie das Array "nestedComponents": [] in der Komponentenregistrierung aktualisieren.

Weiter mit Schritt 11: Verschiedene Layouts unterstützen.