A la fin de cette section, vous serez capable de saisir une valeur pour une nouvelle propriété dans le panneau des paramètres et vous verrez la modification du composant personnalisé reflétant la nouvelle valeur. Les mises à jour de la propriété seront automatiquement enregistrées avec la page.
render.js
, vous devez mettre à jour deux objets JavaScript du composant :
SampleComponentViewModel
sampleComponentTemplate
Modifiez render.js
et mettez à jour le composant SampleComponentViewModel
afin d'inclure la nouvelle propriété. Remplacez cette propriété :
self.showStoryLayout = ko.observable();
Par :
self.showStoryLayout = ko.observable(); self.imageBannerText = ko.observable();
Mettez à jour SampleComponentViewModel
pour obtenir toutes les modifications de valeur. Remplacez cette propriété :
self.imageWidth(customData && customData.width);
Par :
self.imageWidth(customData && customData.width); self.imageBannerText(customData && customData.imageBannerText);
Modifiez sampleComponentTemplate
pour afficher la nouvelle propriété. Remplacez cette propriété :
'<div data-bind="text: \'image width is: \' + imageWidth()"></div>' +
Par :
'<div data-bind="text: imageBannerText"></div>' +
Synchronisez le composant ou téléchargez-le vers le serveur Oracle Content Management.
Vous avez modifié le composant pour afficher la nouvelle propriété. Contrairement au panneau des paramètres qui est imbriqué dans un cadre incorporé sur la page, le composant est directement inséré sur la page. Par conséquent, lorsque sa taille augmente, la zone à sa disposition augmente automatiquement.
Vérification des résultats de l'étape 4
Pour afficher la nouvelle propriété, procédez comme suit :
Actualisez la page de votre site pour que le générateur de site puisse récupérer les modifications apportées au composant.
Passez la page en mode de modification.
Faites glisser le composant vers la page.
Affichez le panneau des paramètres pour votre composant.
Cliquez sur le bouton Paramètres personnalisés.
Remplacez Image Banner
par Workspace
.
Vous verrez la mise à jour du composant sur la page et Workspace
apparaître au-dessus de l'image.
Passez à Etape 5 : inscription des déclencheurs.