Lägg till data som anges av användaren i HTML-komponenten

Du kan lägga till panelen Anpassade inställningar, som tillhandahåller fält för alla dataelement du definierar i HTML-komponenten. En användare kan sedan fylla i värden för komponentinstansen på sidan i panelen Anpassade inställningar.

Så här lägger du till data som anges av användaren i HTML-komponenten:

Uppdatera HTML-mallen i filen render.html för att inkludera alla dataelement du vill ha med. I följande exempel används mallspråket Mustache JS, så dataelementen måste läggas till med syntaxen {{ och }}, på följande sätt:

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

Ange standardvärden för följande datafält genom att ändra innehållet i filen appinfo.json i HTML-komponenten:

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

Lägg till panelen Anpassade inställningar, som söker efter datavärdena i HTML-mallens render.html-fil för att skapa inställningarna som en användare kan ändra i en redigerare. Ändra innehållet i filen settings.html till följande rader:

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

Obs!:

Eftersom du har ändrat filen appinfo.json måste du förnya webbläsaren och lägga till komponenten igen på en sida för att hämta ändringarna.

Så här kontrollerar du att komponenten nu hämtar sina standarddata från filen appinfo.json och att du kan ändra värdena i panelen Anpassade inställningar (kontrollpunkt 2):

När du har ändrat filen appinfo.json måste du komma ihåg förnya webbläsaren och lägga till komponenten igen på en sida för att hämta ändringarna.
Öppna panelen Anpassade inställningar i HTML-komponenten och ange data.

Beskrivning av illustrationen GUID-1E8B54B1-CA2D-463D-A424-E6F3E08A4934-default.png
Kontrollera att komponenten för Oracle Content Management använder HTML och CSS med Mustache JS-mallar för att återge sitt innehåll baserat på data som du angav i panelen Anpassade inställningar.