Adăugaţi date furnizate de utilizator la componenta HTML

Puteţi adăuga un panou Setări personalizate, care oferă câmpuri pentru toate elementele de date pe care le definiţi în componenta HTML. Ulterior, un utilizator va putea completa în panoul Setări personalizate valorile pentru instanţa componentei din pagină.

Pentru a adăuga date furnizate de utilizatori la componenta HTML:
  1. Modificaţi şablonul HTML din fişierul dvs. render.html pentru a include orice elemente de date doriţi. În următorul exemplu se utilizează limbajul Mustache JS pentru crearea şabloanelor, astfel că elementele de date trebuie adăugate prin utilizarea sintaxei {{ şi }}, după cum urmează: 
    <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. Furnizaţi valori prestabilite pentru următoarele câmpuri de date prin modificarea conţinutului fişierului appinfo.json din cadrul componentei 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": []
  }
}
  3. Adăugaţi un panou Setări pesonalizate, care va căuta valorile datelor în cadrul fişierului render.html al şablonului dvs. HTML, pentru a crea setările pe care un utilizator le va putea modifica într-un editor. Modificaţi conţinutul fişierului settings.html cu următoarele linii: 
    <!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>

    Notă:

    Deoarece aţi modificat fişierul appinfo.json, trebuie să reîncărcaţi browserul şi să readăugaţi componenta într-o pagină pentru a reflecta modificările.

Pentru a vă asigura că respectiva componentă va prelua acum datele prestabilite din fişierul appinfo.json şi că puteţi modifica valorile din panoul Setări personalizate (punctul de verificare 2):

  1. După ce modificaţi fişierul appinfo.json, nu uitaţi să reîncărcaţi browserul şi să readăugaţi componenta într-o pagină pentru a reflecta modificările.

  2. Deschideţi panoul Setări personalizate din componenta HTML şi introduceţi datele.


    Urmează descrierea GUID-1E8B54B1-CA2D-463D-A424-E6F3E08A4934-default.png
    Descrierea ilustraţiei GUID-1E8B54B1-CA2D-463D-A424-E6F3E08A4934-default.png

  3. Componenta din Oracle Content Management trebuie să utilizeze HTML şi CSS, precum şi şabloane Mustache JS, astfel încât conţinutul acesteia să fie randat pe baza datelor pe care le-aţi introdus în panoul Setări personalizate.