Etape 4 : affichage de la nouvelle propriété dans le composant

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.

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.