Steg 10: Använd kapslade komponenter med infogad redigering

Komponenter för Oracle Content Management implementeras med komponentarkitekturen KnockoutJS. Det innebär att om du använder KnockoutJS för att implementera komponenterna så kan du inkludera inbyggda komponenter från Oracle Content Management direkt i mallen.

Obs!:

Eftersom inbyggda komponenter från Oracle Content Management bara kan köras på sidan för Oracle Content Management kan du inte använda kapslade komponenter om komponenten återges i en iframe.

Så här drar du nytta av kapslade komponenter:

  1. Implementera komponenten med hjälp av KnockoutJS.

  2. Använd RequireJS för att inkludera komponenten och använd samma "ko"-instansvariabel för Knockout som skapas av Oracle Content Management.

    Detta krävs eftersom Oracle Content Management utökar Knockout med komponenter, och de här komponenterna blir inte tillgängliga om du använder din egen instans av KnockoutJS.

I det här steget granskar vi hur bildkomponenter, styckeskomponenter och titelkomponenter för Oracle Content Management återges i den anpassade komponenten. En användare kan redigera den direkt på sidan och öppna panelen Inställningar för den kapslade komponenten.

Om du vill se hur dessa komponenter inkluderas i mallen kan du redigera filen render.js och titta på objektet sampleComponentTemplate. Den standardsektion som återges visas här:

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

När du tittar på den kapslade komponenten <scs-image> ser du följande post:

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +
De scsComponent-data som överförs till params-mallbindningen inkluderar följande:

  • renderMode: Detta avser det läge som webbplatsverktyget är i. Du kan använda det för att aktivera och avaktivera funktioner. När det används av komponenten <scs-title> lägger det till exempel till RTF-redigeraren vid körning i läget edit.

  • parentId: Detta krävs för att komponenten i Oracle Content Management ska veta att den återges som en kapslad komponent. Alla ändringar i den kapslade komponenten sparas i data för den anpassade komponenten.

  • id: Ett unikt id för den kapslade komponenten. Detta associeras ytterligare med namnrymd av id:t för den anpassade komponenten.

  • data: Ursprungliga data för den kapslade komponenten. Om komponenten inte ändras ytterligare återges den med dessa ursprungliga data.

De värden för id och mode som det refereras till överförs till den anpassade komponenten i objektet SampleComponentViewModel, så du behöver inte ändra objektet för att hämta dessa värden:

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

Syntaxen för alla övriga kapslade komponenter som stöds följer samma mönster som det för <scs-paragraph>, till exempel: <scs-image>, <scs-title>, <scs-button>.

Kontrollera resultaten för steg 10

  1. Förnya sidan på webbplatsen så att webbplatsverktyget kan hämta ändringar av komponenten.

  2. Ta sidan till redigeringsläge.

  3. Dra och släpp komponenten på sidan.

  4. Klicka på texten As a page author, you can edit. . . i komponenten och uppdatera beskrivningen med hjälp av RTF-redigeraren.

  5. Växla till förhandsgranskningsläge för att se uppdateringen.

  6. Växla tillbaka till redigeringsläge.

  7. Öppna panelen Inställningar mot komponenten.

  8. Klicka på länken Komponenter som nu visas, eftersom den kapslade komponenten har hittats.

  9. Klicka på Stycke, som är den kapslade komponent som har hittats.

Du kan nu uppdatera egenskaperna mot styckeskomponenten i komponenten.

Obs!:

Innan komponenten har instansierats känner Oracle Content Management inte till några kapslade komponenter som kan finnas i mallen. För att berätta för Oracle Content Management om dolda kapslade komponenter kan du använda API-gränssnittet SitesSDK.setProperty('visibleNestedComponents', []);. Om du vill att dolda kapslade komponenter ska visas som standard måste du uppdatera uppställningen "nestedComponents": [] i komponentregistreringen.

Fortsätt till Steg 11: Stöd olika layouter.