Krok 10: Používání vnořených komponent s přímými úpravami

Komponenty služby Oracle Content Management jsou implementovány pomocí architektury komponent knihovny KnockoutJS. To znamená, že pokud používáte knihovnu KnockoutJS k implementaci svých komponent, můžete zahrnout vestavěné komponenty služby Oracle Content Management přímo do své šablony.

Poznámka:

Vzhledem vestavěné komponenty služby Oracle Content Management lze spustit pouze na stránce Oracle Content Management, nelze použít vnořené komponenty, pokud je vaše komponenta generována ve vloženém rámci.

Chcete-li využívat vnořené komponenty:

Implementujte svou komponentu pomocí knihovny KnockoutJS.
K zahrnutí své komponenty použijte zavaděč RequireJS, přičemž použijte stejnou proměnnou instance "ko" knihovny Knockout vytvořenou službou Oracle Content Management.

Tento krok je vyžadován, protože služba Oracle Content Management rozšiřuje knihovnu Knockout o komponenty a tyto komponenty nebudou dostupné, pokud použijete svou vlastní instanci knihovny KnockoutJS.

V tomto kroku se seznámíte s tím, jak jsou ve vaší vlastní komponentě generovány komponenty obrázek, odstavec a název služby Oracle Content Management. Uživatel bude moci provést úpravy přímo na stránce a zpřístupnit panel Nastavení pro vnořenou komponentu.

Chcete-li zjistit, jak jsou tyto komponenty zahrnuty do vaší šablony, upravte soubor render.js a podívejte se na objekt sampleComponentTemplate. Zde je uvedena výchozí část, která je generována:

'<!-- 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 -->' +

Když se podíváte na vnořenou komponentu <scs-image>, uvidíte následující položku:

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +

Mezi data scsComponent předaná do vazby šablony params patří:

renderMode: Odkazuje na režim, ve kterém se nachází nástroj Site Builder. Ten můžete použít k aktivaci a deaktivaci funkcí. Například při použití komponentou <scs-title> přidá editor formátovaného textu, když je spuštěn v režimu edit.
parentId: Tento parametr informuje komponentu služby Oracle Content Management, že je generována jako vnořená komponenta. Všechny změny provedené pro vnořenou komponentu se uloží do dat vaší vlastní komponenty.
id: Jedinečný identifikátor pro vnořenou komponentu. Tento identifikátor bude dále přiřazen do prostoru názvů podle identifikátoru vlastní komponenty.
data: Počáteční data pro vnořenou komponentu. Pokud nebude komponenta dále upravena, bude generována s těmito počátečními daty.

Odkazované hodnoty id a mode jsou předány do vaší vlastní komponenty v objektu SampleComponentViewModel, takže k získání těchto hodnot není nutné objekt upravovat:

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

Syntaxe pro všechny ostatní podporované vnořené komponenty dodržuje stejný vzor jako pro komponentu <scs-paragraph>, například: <scs-image>, <scs-title>, <scs-button>.

Kontrola výsledků pro krok 10

Aktualizujte svou stránku na webu, aby nástroj Site Builder mohl provést změny komponenty.
Uveďte stránku do režimu úprav.
Přetáhněte svou komponentu na stránku.
Klikněte na text As a page author, you can edit. . . v komponentě a aktualizujte popis pomocí editoru formátovaného textu.
Chcete-li si prohlédnout provedenou aktualizaci, přepněte do režimu náhledu.
Přepněte se zpět do režimu úprav.
Vyvolejte panel Nastavení pro svou komponentu.
Klikněte na odkaz Komponenty, který se nyní zobrazí, protože byla nalezena vaše vnořená komponenta.
Klikněte na volbu Odstavec, což je nalezená vnořená komponenta.

Nyní můžete aktualizovat vlastnosti týkající se komponenty Odstavec v rámci vaší komponenty.

Poznámka:

Dokud nebude vytvořena instance komponenty, služba Oracle Content Management nebude mít informace o žádných vnořených komponentách, které mohou v šabloně existovat. Pokud chcete službu Oracle Content Management informovat o skrytých vnořených komponentách, můžete použít rozhraní API SitesSDK.setProperty('visibleNestedComponents', []);. Pokud chcete, aby se skryté vnořené komponenty ve výchozím nastavení zobrazovaly, je nutné aktualizovat pole "nestedComponents": [] v registraci komponenty.

Pokračujte částí Krok 11: Podpora různých rozvržení.