Ajout des données fournies par l'utilisateur au composant HTML

Vous pouvez ajouter un panneau Paramètres personnalisés fournissant des champs pour tous les éléments de données que vous définissez dans votre composant HTML. Un utilisateur peut ensuite remplir les valeurs de l'instance de composant sur la page dans le panneau Paramètres personnalisés.

Pour ajouter des données fournies par l'utilisateur à un composant HTML, procédez comme suit :

Mettez à jour le modèle HTML dans votre fichier render.html pour inclure tous les éléments de données souhaités. L'exemple suivant emploie le langage d'écriture de modèle Mustache JS. Les éléments de données doivent donc être ajoutés à l'aide de la syntaxe {{ et }}, comme suit :

<ul class="wrapper"> 
  <li class="box"> 
     <h1 class="title">{{title1}}</h1> 
     <p class="text">{{text1}}</p> 
  </li> 
  <li class="box"> 
     <h1 class="title">{{title2}}</h1> 
     <p class="text">{{text2}}</p> 
  </li> 
  <li class="box"> 
     <h1 class="title">{{title3}}</h1> 
     <p class="text">{{text3}}</p> 
  </li> 
  <li class="box"> 
     <h1 class="title">{{title4}}</h1> 
     <p class="text">{{text4}}</p> 
  </li> 
</ul>

Fournissez les valeurs par défaut des champs de données suivants en modifiant le contenu du fichier appinfo.json dans votre composant HTML :

{
  "id": "html-component-id",

  "settingsData": {
    "settingsHeight":600,
    "settingsWidth": 300,
    "settingsRenderOption": "dialog",
    "componentLayouts": [],
    "triggers": [],
    "actions": []
  },
  "initialData": {
    "styleClassName": "html-component",
    "customSettingsData": {
      "title1":"One",
      "title2":"Two",
      "title3":"Three",
      "title4":"Four",
      "text1":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "text2":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "text3":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "text4":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    "nestedComponents": []
  }
}

Ajoutez un panneau Paramètres personnalisés qui recherchera les valeurs de données dans votre fichier de modèle HTML render.html pour créer les paramètres que l'utilisateur pourra modifier dans un éditeur. Remplacez le contenu du fichier settings.html par les lignes suivantes :

<!DOCTYPE html> 
<html lang="en"> 
<head>
   <!-- only allow embedding of this iFrame in SCS --> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

   <title>H1 Mustache Component</title> 

  <!-- include sample apps styling --> 
  <link href="/_sitescloud/renderer/app/sdk/css/app-styles.css" rel="stylesheet"> 

   <!-- include supporting files --> 
  <script type="text/javascript" src="/_sitescloud/renderer/app/apps/js/knockout.min.js"></script> 
  <script type="text/javascript" src="/_sitescloud/renderer/app/apps/js/jquery.min.js"></script> 

  <!-- include the Sites SDK --> 
  <script type="text/javascript" src="/_sitescloud/renderer/app/sdk/js/sites.min.js"></script> 
</head> 
<body data-bind="visible: true" style="display:none; margin:0px; padding:0px;background:transparent;background-
image:none;"> 
   <!-- ko if: initialized() --> 
   <div class="scs-component-settings"> 
             <div> 
                      <!-- Width --> 
                      <label id="headingTextLabel" for="headingText" class="settings-heading" data-bind="text: 
'Heading Text'"></label> 
                      <input id="headingText" data-bind="value: headingText" placeholder="Heading" class="settings-
text-box"> 
             </div> 
    </div>
    <div data-bind="setSettingsHeight: true"></div> 
    <!-- /ko --> 
    <!-- ko ifnot: initialized() --> 
    <div data-bind="text: 'waiting for initialization to complete'"></div> 
    <!-- /ko --> 
    <script type="text/javascript"> 

               // set the iFrame height when we've fully rendered 
               ko.bindingHandlers.scsCompComponentImpl = { 
                        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
                                   var body = document.body, 
                                            html = document.documentElement; 

                                   SitesSDK.setHeight(Math.max( 
                                            body.scrollHeight, 
                                            body.offsetHeight, 
                                            html.clientHeight, 
                                            html.scrollHeight, 
                                            html.offsetHeight)); 
                        }
               };
 
               // define the viewModel object 
               var SettingsViewModel = function () { 
                        var self = this;
 
                        // create the observables for passing data 
                        self.headingText = ko.observable('Heading 1'); 

                        // create rest of viewModel 
                        self.initialized = ko.observable(false); 
                        self.saveData = false; 

                        // Get custom settings 
                        SitesSDK.getProperty('customSettingsData', function (data) { 
                                 //update observable 
                                 self.headingText(data.headingText); 

                                 // note that viewModel is initialized and can start saving data   
                                 self.initialized(true); 
                                 self.saveData = true; 
                        }); 

                        // save whenever any updates occur 
                        self.save = ko.computed(function () { 
                                  var saveconfig = { 
                                           'headingText': self.headingText() 
                                  }; 

                                  // save data in page 
                                  if (self.saveData) { 
                                              SitesSDK.setProperty('customSettingsData', saveconfig); 
                                  }
                        }, self); 
            }; 


            // apply the bindings 
            ko.applyBindings(new SettingsViewModel()); 
   </script> 
</body>

Remarque :

Etant donné que vous avez modifié le fichier appinfo.json, vous devez actualiser le navigateur et ajouter de nouveau votre composant à une page pour récupérer les modifications.

Pour vérifier que votre composant récupère désormais ses données par défaut à partir du fichier appinfo.json et que vous pouvez modifier les valeurs dans le panneau Paramètres personnalisés (point de reprise 2), procédez comme suit :

Après avoir modifié le fichier appinfo.json, pensez à actualiser le navigateur et à ajouter de nouveau votre composant à une page pour récupérer les modifications.
Ouvrez le panneau Paramètres personnalisés du composant HTML et saisissez les données.

Description de l'illustration GUID-1E8B54B1-CA2D-463D-A424-E6F3E08A4934-default.png
Vérifiez que votre composant Oracle Content Management utilise du code HTML et CSS avec des modèles Mustache JS pour afficher son contenu en fonction des données que vous avez saisies dans le panneau Paramètres personnalisés.