Von Benutzern angegebene Daten der HTML-Komponente hinzufügen

Sie können einen Bereich für Benutzerdefinierte Einstellungen hinzufügen, der Felder für alle Datenelemente enthält, die Sie in Ihrer HTML-Komponente definieren. Ein Benutzer kann dann Werte für die Komponenteninstanz auf der Seite im Bereich Benutzerdefinierte Einstellungen eingeben.

So fügen Sie von Benutzern angegebene Daten einer HTML-Komponente hinzu:

Aktualisieren Sie die HTML-Vorlage in der Datei render.html so, dass sie alle gewünschten Datenelemente enthält. Im folgenden Beispiel wird die Mustache-JS-Vorlagensprache verwendet. Daher müssen die Datenelemente wie folgt mit {{- und }}-Syntax hinzugefügt werden:

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

Geben Sie Standardwerte für die folgenden Datenfelder an, indem Sie den Inhalt der Datei appinfo.json in der HTML-Komponente ändern:

{
  "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": []
  }
}

Fügen Sie einen Bereich für Benutzerdefinierte Einstellungen hinzu, der in der HTML-Vorlagendatei render.html nach den Datenwerten sucht, um die Einstellungen zu erstellen, die Benutzer in einem Editor ändern können. Ändern Sie den Inhalt der Datei settings.html in die folgenden Zeilen:

<!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>

Hinweis:

Da Sie die Datei appinfo.json geändert haben, müssen Sie den Browser aktualisieren und Ihre Komponente erneut einer Seite hinzufügen, damit die Änderungen in Kraft treten.

So stellen Sie sicher, dass die Komponente ihre Standarddaten jetzt von der Datei appinfo.json übernimmt und dass Sie die Werte im Bereich Benutzerdefinierte Einstellungen ändern können (Checkpoint 2):

Nachdem Sie die Datei appinfo.json geändert haben, müssen Sie den Browser aktualisieren und Ihre Komponente erneut einer Seite hinzufügen, damit die Änderungen in Kraft treten.
Öffnen Sie den Bereich Benutzerdefinierte Einstellungen in der HTML-Komponente, und geben Sie Daten ein.

Beschreibung der Abbildung GUID-1E8B54B1-CA2D-463D-A424-E6F3E08A4934-default.png
Stellen Sie sicher, dass die Oracle Content Management-Komponente HTML und CSS mit Mustache-JS-Vorlagen verwendet, um den jeweiligen Inhalt basierend auf den Daten zu rendern, die Sie im Bereich Benutzerdefinierte Einstellungen eingeben.