Cette étape consiste à vérifier la structure des paramètres indiqués pour un composant local.
Semblable au fichier render.js
dans le répertoire /assets
, un fichier settings.html
précréé se trouve dans le même répertoire. Le fichier settings.html
affiche toutes les données des paramètres personnalisés de votre composant. Dans l'implémentation par défaut, une propriété imageWidth
unique se trouve dans les données des paramètres personnalisés.
Pour vérifier la structure de votre composant local, procédez comme suit :
A l'aide du client de synchronisation de bureau Oracle Content Management, localisez votre composant et synchronisez-le avec le système de fichiers.
Si vous ne disposez pas du client de synchronisation de bureau, vous pouvez sélectionner le composant dans l'onglet Composants de l'interface Web Oracle Content Management, puis effectuer une analyse descendante pour voir les fichiers.
Si vous répertoriez les fichiers sous le composant, vous pouvez voir les fichiers suivants :
assets render.js settings.html appinfo.json _folder_icon.jpg
Ouvrez le fichier settings.html
sous le répertoire /assets
et passez en revue le contenu. Contrairement au fichier render.js
, le fichier settings.html
emploie un cadre incorporé dans le panneau des paramètres du générateur de site. Par conséquent, il a également besoin d'avoir accès aux fichiers de support pour garantir un affichage correct dans le cadre incorporé. Le générateur de site doit gérer votre site afin de pouvoir isoler les éventuelles erreurs dans le code JavaScript. C'est pourquoi le fichier settings.html
emploie un cadre incorporé.
Les principales zones du fichier settings.html
sont les suivantes :
Modèle Knockout pour afficher le panneau des paramètres.
<!-- ko if: initialized() --> <div class="scs-component-settings"> <div> <!-- Width --> <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label> <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box"> </div> </div> <div data-bind="setSettingsHeight: true"></div> <!-- /ko -->
Gestionnaire de liaisons personnalisées pour ajuster la hauteur du cadre incorporé lorsque le panneau des paramètres est affiché.
ko.bindingHandlers.scsCompComponentImpl
ViewModel Knockout pour appliquer le modèle Knockout.
SettingsViewModel
Les trois principaux éléments de SettingsViewModel
sont les suivants :
Abonnements au cycle de vie du composant.
Initialisation du composant :
Assurez-vous que le composant n'est pas affiché tant que toutes les données n'ont pas été extraites. Cette opération est gérée par des éléments observables Knockout.
self.initialized = ko.observable(false);
Assurez-vous qu'aucune mise à jour des données n'est tentée tant que les données ne sont pas prêtes.
self.saveData = false;
Obtenez les valeurs initiales des propriétés requises. Cette opération est gérée par des callbacks qui extraient les données.
SitesSDK.getProperty('customSettingsData', function (data) { //update observable self.width(data.width); // note that viewModel is initialized and can start saving data self.initialized(true); self.saveData = true; });
Enregistrez les modifications de propriété apportées aux données des paramètres personnalisés.
self.save = ko.computed(function () { var saveconfig = { 'width': isNaN(self.width()) ? self.width() : self.width() + 'px' }; // save data in page if (self.saveData) { SitesSDK.setProperty('customSettingsData', saveconfig); } }, self);
Pour ajouter une autre propriété à capturer, vous devez suivre les étapes ci-après :
Mettez à jour l'interface utilisateur pour afficher la nouvelle valeur.
Initialisez la valeur avec la valeur actuelle stockée pour le composant.
Enregistrez les éventuelles modifications apportées à la valeur dans le composant.
Pour ajouter une autre propriété à votre composant personnalisé, effectuez les modifications suivantes dans le fichier settings.html
:
Ajoutez un autre élément observable pour gérer la nouvelle propriété. Remplacez ce code :
self.width = ko.observable();
Par celui-ci :
self.width = ko.observable(); self.imageBannerText = ko.observable();
Obtenez les valeurs actuelles de la nouvelle propriété lorsque le panneau des paramètres est affiché pour la première fois. Remplacez ce code :
self.width(data.width);
Par celui-ci :
self.width(data.width); self.imageBannerText(data.imageBannerText);
Enregistrez les éventuelles modifications apportées à cette nouvelle propriété. Remplacez ce code :
'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
Par celui-ci :
'width': isNaN(self.width()) ? self.width() : self.width() + 'px', 'imageBannerText': self.imageBannerText()
Ajoutez une interface utilisateur pour afficher le nouveau champ. Remplacez ce code :
<label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label> <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
Par celui-ci :
<label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label> <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box"> <label id="imageBannerTextLabel" for="imageBannerText" class="settings-heading" data-bind="text: 'Image Banner'"></label> <input id="imageBannerText" data-bind="value: imageBannerText" placeholder="Text to display above an image" class="settings-text-box">
Synchronisez le fichier settings.html
ou téléchargez-le vers le serveur.
Si vous lanciez l'exécution maintenant, le champ s'afficherait. Toutefois, la taille du panneau des paramètres ne change pas automatiquement. Comme vous avez augmenté la taille du panneau, vous devez également mettre à jour l'entrée d'inscription components.json
avec la nouvelle taille.
Téléchargez en local le fichier appinfo.json
, qui se trouve au même niveau que le répertoire assets/
de votre composant, puis mettez à jour la taille du panneau des paramètres. Remplacez ce code :
"settingsHeight": 90,
Par celui-ci :
"settingsHeight": 160,
Synchronisez le fichier appinfo.json
ou téléchargez-le vers le serveur.
Vérification des résultats de l'étape 3
Vous devriez à présent pouvoir afficher et saisir la nouvelle propriété que vous avez ajoutée au panneau des paramètres.
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.
Deux champs sont affichés pour chacune des propriétés du fichier settings.html
.
Passez à Etape 4 : affichage de la nouvelle propriété dans le composant.