Etape 10 : utilisation de composants imbriqués avec la modification incorporée

Les composants Oracle Content Management sont implémentés à l'aide d'une architecture de composant KnockoutJS. Autrement dit, si vous implémentez vos composants à l'aide de KnockoutJS, vous pouvez inclure des composants intégrés Oracle Content Management directement dans votre modèle.

Remarque :

Etant donné que les composants intégrés Oracle Content Management peuvent uniquement être exécutés sur la page Oracle Content Management, vous ne pouvez pas utiliser de composants imbriqués si votre composant est affiché dans un cadre incorporé.

Pour exploiter des composants imbriqués, procédez comme suit :

  1. Implémentez votre composant à l'aide de KnockoutJS.

  2. Utilisez RequireJS pour inclure votre composant et employez la même variable d'instance Knockout "ko" que celle créée par Oracle Content Management.

    Vous devez suivre cette consigne car Oracle Content Management étend Knockout avec des composants qui ne seront pas disponibles si vous utilisez votre propre instance KnockoutJS.

Cette étape vous indique comment afficher les composants de titre, de paragraphe et d'image Oracle Content Management dans votre composant personnalisé. L'utilisateur pourra modifier le composant directement dans la page et accéder au panneau des paramètres du composant imbriqué.

Pour voir comment ces composants sont inclus dans votre modèle, modifiez le fichier render.js et observez l'objet sampleComponentTemplate. Voici la section par défaut qui est affichée :

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

Si vous examinez le composant imbriqué <scs-image>, vous verrez l'entrée suivante :

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +
Les données scsComponent transmises à la liaison de modèle params comprennent les éléments suivants :

  • renderMode : cet élément fait référence au mode dans lequel se trouve le générateur de site. Vous pouvez vous en servir pour activer et désactiver des fonctionnalités. Par exemple, si cet élément est utilisé par le composant <scs-title>, il ajoute l'éditeur de texte enrichi lors de l'exécution en mode edit.

  • parentId : cet élément est requis afin que le composant Oracle Content Management sache qu'il est affiché en tant que composant imbriqué. Toutes les modifications apportées au composant imbriqué seront enregistrées dans les données du composant personnalisé.

  • id : ID unique du composant imbriqué. Cet élément sera par la suite intégré à un espace de noms par l'ID du composant personnalisé.

  • data : données initiales du composant imbriqué. Si le composant n'est pas modifié, il sera affiché avec ces données initiales.

Les valeurs id et mode référencées sont transmises dans votre composant personnalisé dans l'objet SampleComponentViewModel, vous n'avez donc pas besoin de modifier l'objet pour obtenir ces valeurs :

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

La syntaxe de tous les autres composants imbriqués pris en charge suit le même modèle que <scs-paragraph>. Par exemple : <scs-image>, <scs-title>, <scs-button>.

Vérification des résultats de l'étape 10

  1. Actualisez la page de votre site pour que le générateur de site puisse récupérer les modifications apportées au composant.

  2. Passez la page en mode de modification.

  3. Faites glisser le composant vers la page.

  4. Cliquez sur le texte As a page author, you can edit. . . dans votre composant et mettez à jour la description à l'aide de l'éditeur de texte enrichi.

  5. Passez en mode d'aperçu pour voir votre mise à jour.

  6. Repassez en mode de modification.

  7. Affichez le panneau des paramètres pour votre composant.

  8. Cliquez sur le lien Composants qui apparaît désormais car il a trouvé votre composant imbriqué.

  9. Cliquez sur Paragraphe, qui est le composant imbriqué qu'il a trouvé.

Vous pouvez à présent mettre à jour les propriétés du composant de paragraphe dans votre composant.

Remarque :

Tant que le composant n'a pas été instancié, Oracle Content Management n'a pas connaissance de l'existence des composants imbriqués qui peuvent se trouver dans le modèle. Pour indiquer à Oracle Content Management la présence de composants imbriqués masqués, vous pouvez utiliser l'API SitesSDK.setProperty('visibleNestedComponents', []);. Pour que les composants imbriqués masqués soient affichés par défaut, vous devez mettre à jour le tableau "nestedComponents": [] dans l'inscription du composant.

Passez à Etape 11 : prise en charge de différentes présentations.