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:
- 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>
- 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.