Aktualisieren Sie die Datei settings.html
, um einen Einstellungsbereich bereitzustellen, mit dem der Text der H1-Komponente festgelegt werden kann.
So fügen Sie einen Einstellungsbereich zum Ändern des Überschriftstexts hinzu:
- Aktualisieren Sie die Datei
settings.html
so, dass sie den folgenden Inhalt enthält:
<!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>
- Wählen Sie die Komponente in Sitebuilder aus, und klicken Sie auf Einstellungen.
Der Einstellungsbereich ist klein und wird oben im Komponenteneinstellungsbereich eingebettet. Suchen Sie nach dem Abschnitt "Heading Text".
So prüfen Sie, ob Sie den Überschriftstext ändern können (Checkpoint 4):
Wenn Sie den Überschriftstext im Einstellungsbereich ändern, wird die Komponente mit dem neuen Text aktualisiert.