Aggiungere un pannello di impostazioni per modificare il testo dell'intestazione

Aggiornare il file settings.html per fornire un pannello di impostazioni che potrà essere utilizzato per impostare il testo del componente H1.

Per aggiungere un pannello di impostazioni per modificare il testo dell'intestazione, effettuare le operazioni riportate di seguito.

Aggiornare il file settings.html con il contenuto seguente:

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

Selezionare il componente in SiteBuilder e fare clic su Impostazioni.
Il pannello di impostazioni è di piccole dimensioni ed è impostato per essere incorporato nella parte superiore del pannello di impostazioni del componente. Cercare la sezione intitolata "Testo intestazione".

Per verificare che è possibile modificare il testo dell'intestazione (checkpoint 4):

Quando si modifica il testo dell'intestazione nel pannello delle impostazioni, il componente viene aggiornato per mostrare il nuovo testo.