「設定」パネルの追加による見出しテキストの変更

settings.htmlファイルを更新して、H1コンポーネントのテキストを設定するために使用できる設定パネルを提供します。

「設定」パネルを追加して見出しテキストを変更するには:

settings.htmlファイルを更新して、次の内容にします:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
    <title>Sample Custom 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/mustache.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>
 
    <template id="settingsTemplate">
        <div>
            <!-- H1 heading Text -->
            <label id="headingTextLabel" for="headingText" class="settings-heading">Title Text</label>
            <input id="headingText" value="{{nls.headingText}}" placeholder="example: Template Component" class="settings-text-box" style="margin-bottom: 10px;">
        </div>
    </template>
</head>
 
<body style="display:none; margin:0px; padding-left:3px;background:transparent;background-image:none;">
 
    <!-- conatiner for the settings panel -->
    <div id="settingsContainer" class="scs-component-settings">
        <div data-bind="text: 'waiting for initialization to complete'" class="settings-heading"></div>
    </div>
 
    <script type="text/javascript">
        // get the Mustache template for the settings panel
        var template = $('#settingsTemplate').html();
 
        // define the viewModel object
        var model = {};
 
        // save whenever any updates occur
        var lastState = '';
        var saveUpdates = function () {
            var saveConfig = {
                    nls: {
                        headingText: $('#headingText').val(),
                    }
                },
                newState = JSON.stringify(saveConfig);
 
            // if model has changed, save it
            if (newState !== lastState) {
                // update the last saved state
                lastState = newState;
 
                SitesSDK.setProperty('customSettingsData', saveConfig);
            }
        };
 
        // Get custom settings and render the settings
        SitesSDK.getProperty('customSettingsData', function (data) {
            // update the model with the current values
            model.nls = data.nls || {};
            model.headingText = model.nls.headingText;
 
            // initialize the last saved state to the fetched model
            lastState = JSON.stringify(model);
 
            // apply the model to the template
            var html = Mustache.render(template, model);
 
            // add the rendered HTML to the page
            $('#settingsContainer').html(html);
 
            // save updates whenever something changes
            $('#headingText').on('blur', saveUpdates);
 
            // show the body
            $('body').show();
        });
    </script>
</body>
 
</html>

サイト・ビルダーでコンポーネントを選択し、「設定」をクリックします。
「設定」パネルは小さく、「コンポーネント設定」パネルの最上部に埋め込まれるよう設定されています。「見出しテキスト」というタイトルのセクションを探します。

見出しテキストを変更できることを確認するには (チェックポイント4):

「設定」パネル内の見出しテキストを変更すると、コンポーネントによって、新しいテキストが表示されるよう更新されます。