Door de gebruiker opgegeven gegevens toevoegen aan de HTML-component

U kunt een paneel Aangepaste instellingen toevoegen waarin velden zijn opgenomen voor alle gegevenselementen die u in uw HTML-component definieert. Een gebruiker kan dan waarden voor de componentinstance invullen op de pagina in het paneel Aangepaste instellingen.

Ga als volgt te werk om door de gebruiker ingevoerde gegevens toe te voegen aan de HTML-component:
  1. Werk de HTML-sjabloon in uw render.html-bestand bij om alle gewenste gegevenselementen op te nemen. In het volgende voorbeeld wordt de Mustache JS-sjabloontaal gebruikt, dus moeten bij het toevoegen van de gegevenselementen de syntaxiselementen '{{' en '}}' als volgt worden gebruikt: 
    <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>
  2. Geef standaardwaarden voor de onderstaande gegevensvelden op door de inhoud van het bestand appinfo.json in uw HTML-component te wijzigen: 
    {
  "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": []
  }
}
  3. Voeg een paneel Aangepaste instellingen toe. Hiermee worden de gegevenswaarden in uw HTML-sjabloonbestandrender.html opgezocht met behulp waarvan de instellingen kunnen worden gemaakt die een gebruiker in een editor kan wijzigen. Wijzig de inhoud van het bestand settings.html in de volgende regels: 
    <!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>

    Opmerking:

    Omdat u het bestand appinfo.json hebt gewijzigd, moet u de browser vernieuwen en uw component opnieuw aan een pagina toevoegen om de wijzigingen op te halen.

Ga als volgt te werk om te controleren of uw component de standaardgegevens ophaalt uit het bestand appinfo.json en u de waarden kunt wijzigen in het paneel Aangepaste instellingen (controlepunt 2):

  1. Nadat u het bestand appinfo.json hebt gewijzigd, moet u niet vergeten de browser te vernieuwen en uw component opnieuw aan een pagina toe te voegen om de wijzigingen op te halen.

  2. Open het paneel Aangepaste instellingen in de HTML-component en voer gegevens in.


    Beschrijving van GUID-1E8B54B1-CA2D-463D-A424-E6F3E08A4934-default.png volgt hierna
    Beschrijving van de illustratie GUID-1E8B54B1-CA2D-463D-A424-E6F3E08A4934-default.png

  3. Controleer of in uw Oracle Content Management component gebruik wordt gemaakt van HTML en CSS in combinatie met Mustache JS-sjablonen voor weergave van de inhoud op basis van de gegevens die u hebt ingevoerd in het paneel Aangepaste instellingen.