Actualice el archivo settings.html
para proporcionar un panel de configuración que pueda utilizarse para definir el texto del componente H1.
Para agregar un panel de configuración para cambiar el texto de cabecera:
- Actualice el archivo
settings.html
para que tenga los siguientes contenidos:
<!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>
- Seleccione el componente en el creador de sitios y haga clic en Configuración.
El panel de configuración es pequeño y está definido para que se embeba en la parte superior del panel de configuración del componente. Busque la sección titulada "Texto de cabecera".
Para verificar que puede cambiar el texto de cabecera (punto de control 4):
Cuando se cambia el texto de cabecera en el panel de configuración, el componente se actualiza para mostrar el nuevo texto.