Προσθήκη δεδομένων που παρέχονται από τον χρήστη στο συστατικό στοιχείο HTML

Μπορείτε να προσθέσετε έναν πίνακα Προσαρμοσμένες ρυθμίσεις που παρέχει πεδία για όλα τα στοιχεία δεδομένων που ορίζετε στο συστατικό στοιχείο HTML. Ένας χρήστης μπορεί, στη συνέχεια, να συμπληρώσει τιμές για το στιγμιότυπο συστατικού στοιχείου στη σελίδα στον πίνακα Προσαρμοσμένες ρυθμίσεις.

Για να προσθέσετε δεδομένα που παρέχονται από τον χρήστη στο συστατικό στοιχείο HTML:
  1. Ενημερώσε το πρότυπο HTML στο αρχείο σας render.html για να συμπεριλάβετε τυχόν στοιχεία δεδομένων που θέλετε. Το ακόλουθο παράδειγμα χρησιμοποιεί γλώσσα προτύπου Mustache JS, οπότε τα στοιχεία δεδομένων πρέπει να προστεθούν χρησιμοποιώντας τη σύνταξη {{ and }}, ως εξής:
    <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. Παρέχετε προεπιλεγμένες τιμές για τα ακόλουθα πεδία δεδομένων αλλάζοντας το περιεχόμενο του αρχείου appinfo.json στο συστατικό στοιχείο 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. Προσθέστε έναν πίνακα Προσαρμοσμένες ρυθμίσεις που θα αναζητά τις τιμές δεδομένων στο αρχείο του προτύπου σας HTML render.html για να δημιουργήσει τις ρυθμίσεις για να τις αλλάξει ένας χρήστης σε ένα πρόγραμμα επεξεργασίας. Αλλάξτε τα περιεχόμενα του αρχείου settings.html στις ακόλουθες γραμμές:
    <!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> 

    Σημείωση:

    Επειδή έχετε αλλάξει το αρχείο appinfo.json, πρέπει να κάνετε ανανέωση του προγράμματος περιήγησης και να προσθέσετε πάλι το συστατικό στοιχείο σας σε μια σελίδα για να επιλεγούν οι αλλαγές.

Για να επαληθεύσετε ότι το συστατικό στοιχείο σας θα επιλέξει τώρα τα προεπιλεγμένα δεδομένα του από το αρχείο appinfo.json και ότι μπορείτε να αλλάξετε τις τιμές στον πίνακα Προσαρμοσμένες ρυθμίσεις (Σημείου ελέγχου 2):

  1. Αφού έχετε αλλάξει το αρχείο appinfo.json, θυμηθείτε ότι πρέπει να κάνετε ανανέωση του προγράμματος περιήγησης και να προσθέσετε πάλι το συστατικό στοιχείο σας σε μια σελίδα για να επιλεγούν οι αλλαγές.

  2. Ανοίξτε τον πίνακα Προσαρμοσμένες ρυθμίσεις στο συστατικό στοιχείο HTML και εισαγάγετε δεδομένα.


    Ακολουθεί η περιγραφή για GUID-1E8B54B1-CA2D-463D-A424-E6F3E08A4934-default.png
    Περιγραφή της απεικόνισης ''GUID-1E8B54B1-CA2D-463D-A424-E6F3E08A4934-default.png''
  3. Επαληθεύστε ότι το συστατικό στοιχείο σας Oracle Content Management χρησιμοποιεί HTML και CSS με πρότυπα JS Mustache για την απόδοση του περιεχομένου του, με βάση τα δεδομένα που εισαγάγατε στον πίνακα Προσαρμοσμένες ρυθμίσεις.