Føje brugerangivne data til HTML-komponenten

Du kan tilføje panelet Tilpassede indstillinger, der indeholder felter til alle dataelementer, som du definerer i din HTML-komponent. En bruger kan derefter udfylde værdier for komponentinstansen på siden i panelet Tilpassede indstillinger.

Sådan føjer du brugerangivne data til HTML-komponenten:
  1. Opdater HTML-skabelonen i filen render.html for at inkludere de ønskede dataelementer. Følgende eksempel bruger skabelonsproget Mustache JS, så dataelementerne skal tilføjes ved hjælp af syntaksen {{ og }} på følgende måde:
    <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. Angiv standardværdier for følgende datafelter ved at ændre indholdet af filen appinfo.json i din HTML-komponent:
    {
      "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. Tilføj panelet Tilpassede indstillinger, som søger efter dataværdierne i HTML-skabelonfilen render.html, for at oprette indstillingerne, som en bruger kan ændre i en editor. Ændr indholdet af filen settings.html til følgende linjer:
    <!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> 

    Bemærk:

    Da du har ændret filen appinfo.json, skal du opfriske browseren og igen føje din komponent til en side for at indlæse ændringerne.

Sådan verificerer du, at din komponent indlæser standarddata fra filen appinfo.json, og at du kan ændre værdierne i panelet Tilpassede indstillinger (tjekpunkt 2):

  1. Når du har ændret filen appinfo.json, skal du huske at opfriske browseren og igen føje din komponent til en side for at indlæse ændringerne.

  2. Åbn panelet Tilpassede indstillinger i HTML-komponenten, og indtast data.


    Beskrivelse af GUID-1E8B54B1-CA2D-463D-A424-E6F3E08A4934-default.png følger
    Beskrivelse af illustrationen GUID-1E8B54B1-CA2D-463D-A424-E6F3E08A4934-default.png
  3. Verificer, at din Oracle Content Management-komponent bruger HTML og CSS med Mustache JS-skabeloner til at gengive indhold på basis af de data, som du har indtastet i panelet Tilpassede indstillinger.