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");
            modal.open();            
        }
});
var modal = new RModal(document.querySelector("#modalSurvey"),{
    closeTimeout: 100,
    dialogClass: "modal__dialog",
    dialogOpenClass: "modal__dialog--animated modal__dialog--fade-in-down",
    focus: false
});

    
        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.1.6/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.1.6/survey-creator.css" type="text/css" rel="stylesheet" />
    <script src="https://surveyjs.azureedge.net/1.1.6/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 type="text/javascript" src="https://unpkg.com/rmodal/dist/rmodal.js"></script>
</head>
<body>
    <div class="modal builder-page__modal" id="modalSurvey" tabindex="-1" role="dialog" aria-labelledby="modalSurveyLabel">
    <div class="modal__dialog" role="document">
        <div class="modal__content">
            <div class="modal__header">
                <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="modal__button modal__button--defaul" data-dismiss="modal" onclick="modal.close()">Close</button>
            </div>
        </div>
    </div>
</div>
    <div id="surveyContainer">
        <div id="creatorElement"></div>
    </div>

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

</body>
</html>

        
            .btn-green {
              background-color: #1ab394;
              color: #fff;
              border-radius: 3px;
            }
            .btn-green:hover, .btn-green:focus {
                background-color: #18a689;
                color: #fff;
            }
            .panel-footer {
                padding: 0 15px;
                border:none;
                text-align: right;
                background-color: #fff;
            }
        
.builder-page__modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal {
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    background: rgba(0, 0, 0, 0.3);
}
.modal__dialog {
      position: relative;
      max-width: 600px;
      margin: 30px auto;
}
.modal__content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}
.modal__header {
    font-size: 18px;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.modal__button{
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}        
.modal__button--default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.modal__body {
    font-size: 14px;
    padding: 15px;
}
.modal__footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}
.modal__dialog--animated {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
}
@keyframes fadeInDown {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
.modal__dialog--fade-in-down {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

Question Toolbar API

toolbarItems property: knockout observable array of toolbar 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.