Toolbar customization

Fully control your toolbar

                        //Hide Test Survey tab
var options = { showTestSurveyTab: false };
var editor = new SurveyEditor.SurveyEditor("editorElement", options);
//Add custom button in the toolbar
editor.toolbarItems.push({
        id: "custom-preview",
        visible: true,
        title: "Survey Preview",
        action: function() {
            var windowElement = document.getElementById("surveyContainerInPopup");
            var testSurveyModel = new Survey.Model(editor.getSurveyJSON());
            testSurveyModel.render("surveyContainerInPopup");
            $("#modalSurvey").modal("show");
        }
});

    
        SurveyEditor.StylesManager.applyTheme("bootstrap");
    


                    
<!DOCTYPE html>
<html>
<head>
    <title>Fully control your toolbar, Survey Builder Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://surveyjs.azureedge.net/1.0.69/survey.ko.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <!-- Uncomment to enable Select2
    <script src="https://unpkg.com/jquery"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    -->
    <link href="https://surveyjs.azureedge.net/1.0.69/surveyeditor.css" type="text/css" rel="stylesheet" />
    <script src="https://surveyjs.azureedge.net/1.0.69/surveyeditor.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">
<script src="https://unpkg.com/jquery"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="modal fade" id="modalSurvey" tabindex="-1" role="dialog" aria-labelledby="modalSurveyLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modalSurveyLabel">Test Survey</h4>
            </div>
            <div class="modal-body">
                <div id="surveyContainerInPopup"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
    <div id="surveyContainer">
        <div id="editorElement"></div>
    </div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>

Question Toolbar API

toolbarItems property: knockout observable array of boolbar items

Use toolbarItems for toolbar customizations. Only the given toolbar items will appear in the Toolbar

Question Toolbar Item properties

{
    id: string;
    visible: boolean | KnockoutObservable(boolean);
    title: string | KnockoutObservable(string);
    action: Function;
}
  • id - The required attribute. The unique toolbar item id.
  • visible - The required attribute. Controls visibility of the toolbar item.
  • title - The required attribute. Toolbar buuton title.
  • action - The required attribute. Function will be called on button click.