Pridanie panela nastavení na zmenu textu nadpisu

Aktualizovaním súboru settings.html môžete poskytnúť panel nastavení, pomocou ktorého možno nastaviť text komponentu H1.

Ako pridať panel nastavení na zmenu textu nadpisu:
  1. Aktualizujte súbor settings.html tak, aby obsahoval nasledujúce položky: 
    <!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>
  2. Vyberte komponent v generátore lokalít a kliknite na položku Nastavenia.
    Panel nastavení je malý a možno ho vnoriť do hornej časti panela nastavení komponentu. Vyhľadajte sekciu s názvom Text nadpisu.

Ako overiť, či môžete zmeniť text nadpisu (kontrolný bod 4):

Keď zmeníte text nadpisu na paneli nastavení, komponent sa aktualizuje a zobrazuje nový text.