Προσθήκη πίνακα ρυθμίσεων για να αλλάξετε το κείμενο επικεφαλίδας

Ενημερώστε το αρχείο settings.html για να παρέχετε έναν πίνακα ρυθμίσεων που μπορεί να χρησιμοποιηθεί για να ορίσετε το κείμενο του συστατικού στοιχείου H1.

Για να προσθέσετε έναν πίνακα ρυθμίσεων για να αλλάξετε το κείμενο επικεφαλίδας:

Ενημερώστε το αρχείο 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 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;"> 
  <div class="scs-component-settings"> 
    <div> 
      <!-- Heading Text --> 
      <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> 
  <script type="text/javascript"> 
  // define the viewModel object 
  var SettingsViewModel = function() { 
    var self = this; 

    // create the observables for passing data 
    self.headingText = ko.observable(); 
 
    // create rest of viewModel 
    self.saveData = false; 
 
    // Get custom settings 
    SitesSDK.getProperty('customSettingsData', function(data) { 
      // update observable 
      self.headingText(data.headingText); 

      // now that viewModel is initialized and can start saving data 
      self.saveData = true; 
    }); 

    // save whenever any updates occur, but don't save if data hasn't been loaded into the form yet 
    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>

Επιλέξτε το συστατικό στοιχείο σας στο Εργαλείο δημιουργίας τοποθεσιών και πατήστε "Ρυθμίσεις".
Ο πίνακας ρυθμίσεων είναι μικρός και έχει ρυθμιστεί να είναι ενσωματωμένος στο επάνω μέρος του πίνακα ρυθμίσεων συστατικού στοιχείου. Αναζητήστε την ενότητα με τίτλο "Κείμενο επικεφαλίδας".

Για να επαληθεύσετε ότι μπορείτε να αλλάξετε το κείμενο επικεφαλίδας (Σημείο ελέγχου 4):

Όταν αλλάζετε κείμενο επικεφαλίδας στον πίνακα ρυθμίσεων, το συστατικό στοιχείο ενημερώνεται ώστε να εμφανίζει το νέο κείμενο.