Add a Settings Panel to Change Heading Text

Update the settings.html file to provide a settings panel that can be used to set the text of the H1 component.

To add a settings panel to change heading text:

Update the settings.html file to have the following contents:

<!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>

Select your component in Site Builder, and click Settings.
The settings panel is small, and is set to be embedded at the top of the component settings panel. Look for the section titled "Heading Text".

To verify that you can change heading text (Checkpoint 4):

When you change heading text in the settings panel, the component updates to show the new text.