Een instellingenpaneel toevoegen voor het wijzigen van koptekst

Werk het bestand settings.html bij om een instellingenpaneel op te geven waarmee de tekst van de component 'H1' kan worden ingesteld.

Ga als volgt te werk om een instellingenpaneel toe te voegen voor het wijzigen van koptekst:

Werk het bestand settings.html bij met de volgende inhoud:

<!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>

Selecteer uw component in de sitebuilder en klik op Instellingen.
Het instellingenpaneel is klein en is standaard zo ingesteld dat het bovenaan in het scherm van de component wordt ingesloten. Zoek naar de sectie "Koptekst".

Ga als volgt te werk om te controleren of u de koptekst kunt wijzigen (controlepunt 4):

Wanneer u koptekst wijzigt in het instellingenpaneel, wordt de component bijgewerkt en weergegeven met de nieuwe tekst.