Oracle Content Management componenten worden geïmplementeerd met behulp van de KnockoutJS-componentarchitectuur. Als u KnockoutJS gebruikt om componenten te implementeren, betekent dit dat u ingebouwde Oracle Content Management componenten rechtstreeks in uw sjabloon kunt opnemen.
Opmerking:
Omdat ingebouwde Oracle Content Management componenten alleen op de Oracle Content Management pagina kunnen worden uitgevoerd, kunt u geen geneste componenten gebruiken als de component in een inline-frame wordt weergegeven.Ga als volgt te werk om geneste componenten te gebruiken:
Implementeer de component met behulp van KnockoutJS.
Gebruik RequireJS om de component op te nemen en gebruik dezelfde Knockout-instancevariabele "ko" die door Oracle Content Management is gemaakt.
Dit is noodzakelijk, omdat Oracle Content Management componenten toevoegt aan Knockout en deze componenten niet beschikbaar zijn als u uw eigen KnockoutJS-instance gebruikt.
In deze stap ziet u hoe de afbeeldings-, alinea- en titelcomponenten van Oracle Content Management in uw aangepaste component worden weergegeven. Een gebruiker kan deze rechtstreeks op de pagina bewerken en het paneel 'Instellingen' openen voor de geneste component.
Als u wilt zien hoe deze componenten in uw sjabloon worden opgenomen, bewerkt u het bestand render.js en bekijk het object sampleComponentTemplate. Hier ziet u de standaardsectie die wordt weergegeven:
'<!-- 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 -->' +
Wanneer u de geneste component <scs-image> bekijkt, ziet u de volgende invoer:
'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +
scsComponent die aan de sjabloonbinding params worden doorgegeven, omvatten het volgende:
renderMode: dit verwijst naar de modus van de sitebuilder. Met deze optie kunt u functies activeren en deactiveren. Wanneer deze optie bijvoorbeeld door de component <scs-title> wordt gebruikt, wordt de opgemaakte-teksteditor toegevoegd wanneer de modus Bewerken actief is.
parentId: dit is vereist, zodat de Oracle Content Management component weet dat een geneste component wordt weergegeven. Alle wijzigingen in de geneste component worden opgeslagen in de gegevens voor de aangepaste component.
id: een unieke ID voor de geneste component. Deze komt in de naamruimte te staan die aan de ID van de aangepaste component is toegewezen.
data: initiële gegevens voor de geneste component. Als de component niet verder wordt aangepast, wordt deze met deze initiële gegevens weergegeven.
De waarden ID en Modus waarnaar wordt verwezen, worden doorgegeven aan uw aangepaste component in het object SampleComponentViewModel. U hoeft het object dus niet aan te passen om deze waarden op te halen:
// Store the args self.mode = args.viewMode; self.id = args.id;
De syntaxis van alle overige ondersteunde geneste componenten heeft hetzelfde patroon als die van <scs-paragraph>; bijvoorbeeld: <scs-image>, <scs-title>, <scs-button>.
Controleer de resultaten voor stap 10.
Vernieuw uw pagina op uw site, zodat wijzigingen in de component kunnen worden opgehaald met de sitebuilder.
Open de pagina in de bewerkmodus.
Sleep de component naar de pagina.
Klik op de tekst Als pagina-auteur kunt u bewerken. . . in uw component en werk de beschrijving bij met de opgemaakte-teksteditor.
Schakel over op de voorbeeldmodus om uw wijziging te bekijken.
Schakel terug naar de bewerkmodus.
Open het paneel 'Instellingen' voor uw component.
Klik op de koppeling Componenten die nu wordt weergegeven omdat uw geneste component is gevonden.
Klik op Alinea. Dit is de geneste component die is gevonden.
U kunt nu de eigenschappen bijwerken volgens de component 'Alinea' in uw component.
Opmerking:
Totdat de component is geïnstantieerd, is Oracle Content Management niet op de hoogte van eventuele geneste componenten in de sjabloon. Met de APISitesSDK.setProperty('visibleNestedComponents', []); kunt u verborgen geneste componenten aan Oracle Content Management doorgeven. Als u wilt dat verborgen geneste componenten standaard worden weergegeven, moet u de array "nestedComponents": [] in de componentregistratie bijwerken.Doorgaan naar Stap 11: Verschillende lay-outs ondersteunen.