Toolbar customization

Please read the license agreement if you want to use Survey Creator widget in your app(s). Visit our buy page to find out developer license(s) price.
Fully control your toolbar

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

    
        SurveyCreator.StylesManager.applyTheme("bootstrap");
    


                    
<!DOCTYPE html>
<html>
<head>
    <title>Fully control your toolbar, Survey Creator 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.82/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.82/survey-creator.css" type="text/css" rel="stylesheet" />
    <script src="https://surveyjs.azureedge.net/1.0.82/survey-creator.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="creatorElement"></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.