Mettez à jour le fichier settings.html
pour fournir un panneau des paramètres permettant de définir le texte du composant H1.
Pour ajouter un panneau des paramètres permettant de modifier le texte d'en-tête, procédez comme suit :
- Mettez à jour le fichier
settings.html
pour obtenir le contenu suivant :
<!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>
- Sélectionnez votre composant dans le générateur de site, puis cliquez sur Paramètres.
Le panneau des paramètres est petit et défini pour être imbriqué en haut du panneau des paramètres du composant. Recherchez la section Texte d'en-tête de page.
Pour vérifier que vous pouvez modifier le texte d'en-tête (point de reprise 4), procédez comme suit :
Lorsque vous modifiez le texte d'en-tête dans le panneau des paramètres, le composant est mis à jour pour afficher le nouveau texte.