Cart Licenses Contact Support Online Creator Login/Register
v 1.9.37

Toolbar customization


const options = { showTestSurveyTab: false };            
                var creator = new SurveyCreator.SurveyCreator(options);
//Add custom button in the toolbar
creator.toolbarItems.push(new Survey.Action({
        id: "custom-preview",
        visible: true,
        title: "Survey Preview",
        action: function() {
        var testSurveyModel = new SurveyKnockout.Model(creator.getSurveyJSON());
window.modal = new RModal(document.querySelector("#modalSurvey"),{
    closeTimeout: 100,
    dialogClass: "modal__dialog",
    dialogOpenClass: "modal__dialog--animated modal__dialog--fade-in-down",
    focus: false

<!DOCTYPE html>
<html lang="en">
    <title>Toolbar customization, Survey Creator Example</title>
<meta name="viewport" content="width=device-width" />
    <script src=""></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-knockout-ui/survey-knockout-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <script src="" type="text/javascript" charset="utf-8"></script>
    <script src="" type="text/javascript" charset="utf-8"></script>
    <!-- Uncomment to enable Select2
    <script src=""></script>
    <link href="" rel="stylesheet" />
    <script src=""></script>
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.min.js"></script>
        <link href="/DevBuilds/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet" />
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.i18n.min.js"></script>
        <script src="/DevBuilds/survey-creator-knockout/survey-creator-knockout.min.js"></script>
            :root {
                --tab-min-height: 600px;
    <link rel="stylesheet" href="./index.css">
<script type="text/javascript" src=""></script>
<body style="margin: 0">
<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 class="modal__body">
                <div id="surveyContainerInPopup"></div>
            <div class="modal__footer">
                <button type="button" class="modal__button modal__button--defaul" data-dismiss="modal" onclick="modal.close()">Close</button>
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>

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


.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;
    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;
    margin-right: 10px;
.modal__body {
    font-size: 14px;
    padding: 15px;
    max-height: 70vh;
.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.

Tell us what you think

Help us serve you better by taking this brief
survey. We are interested to learn more about
your experience of using our libraries.

We'd really appreciate your feedback.

Approximate time to complete: 2 min.

Start the survey