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):
設定パネル内の見出しテキストを変更すると、コンポーネントが更新されて新しいテキストが表示されます。