Dodawanie danych, dostarczanych przez użytkownika, do składnika HTML

Można dodać panel Ustawienia niestandardowe dostarczający pól dla wszystkich elementów danych definiowanych w składniku HTML. Użytkownik, korzystając z panelu Ustawienia niestandardowe, może wprowadzić wszystkie wartości dla instancji składnika na stronie.

Aby dodać dane, dostarczane przez użytkownika, do składnika HTML, należy:
  1. Zaktualizować szablon HTML w swoim pliku render.html, tak aby zawierał wszystkie oczekiwane elementy danych. W poniższym przykładzie jest używany język szablonów Mustache JS, tak że elementy danych muszą być dodawane przy użyciu składni {{ i }}, jak pokazano:
    <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. Określić wartości domyślne dla następujących pól danych, zmieniając w swoim składniku HTML zawartość pliku appinfo.json:
    {
      "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. Dodać panel Ustawienia niestandardowe wyszukujący wartości danych w pliku render.html szablonu HTML w celu utworzenia ustawień, które użytkownik będzie mógł zmienić w edytorze. Zmienić zawartość pliku settings.html, wprowadzając:
    <!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> 

    Uwaga:

    Ponieważ plik appinfo.json został zmieniony, trzeba odświeżyć zawartość wyświetlaną w przeglądarce, po czym — aby wychwycić zmianę — ponownie dodać składnik do strony.

Aby sprawdzić, czy składnik pobiera teraz swoje dane domyślne z pliku appinfo.json i czy można zmienić wartości w panelu Ustawienia niestandardowe (punkt kontrolny 2):

  1. Gdy plik appinfo.json zostanie zmieniony, należy pamiętać by odświeżyć zawartość wyświetlaną w przeglądarce, po czym — aby wychwycić zmianę — ponownie dodać składnik do strony.

  2. Otworzyć panel Ustawienia niestandardowe w składniku HTML, po czym wprowadzić dane.


    Opis "GUID-1E8B54B1-CA2D-463D-A424-E6F3E08A4934-default.png" znajduje się poniżej
    Opis rysunku "GUID-1E8B54B1-CA2D-463D-A424-E6F3E08A4934-default.png"
  3. Sprawdzić, czy składnik Oracle Content Management używa — do renderowania swojej zawartości na podstawie danych wprowadzanych w panelu Ustawienia niestandardowe — kodu HTML i CSS z szablonami Mustache JS.