Etape 3 : vérification de la structure des paramètres de composant local

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 :

1. 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.

2. 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 :

1. Mettez à jour l'interface utilisateur pour afficher la nouvelle valeur.

2. Initialisez la valeur avec la valeur actuelle stockée pour le composant.

3. 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 :

1. 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();

2. 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);

3. 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()

4. 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">

5. 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.

1. 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,

2. Synchronisez le fichier appinfo.json ou téléchargez-le vers le serveur.