Cart Licenses Contact Support Online Creator Login/Register
Try
Buy
v 1.9.38

Insert a custom tab into creator


                        



const options = {   };            
                var creator = new SurveyCreator.SurveyCreator(options);
            
const templatesPlugin = {
    activate: () => {},
    deactivate: () => {return true;}
};
//Add plug-in. We do nothing on activate/deactivate. Place it as first tab and set to "svc-tab-template" the component name
creator.addPluginTab("templates", templatesPlugin, "Survey Templates", "svc-tab-template", 0);

const templateBtnClick = (json) => {
    creator.makeNewViewActive("designer");
    creator.JSON = json;
};

class TabTemplateComponent extends React.Component
 {
    render() {
        var renderButton = (text, json) => {
            text = "Load " + text;
            var className = "sd-btn sd-btn--action";

            return (<button className={className} onClick={() => templateBtnClick(json)}>{text}</button>);
        };
        var templates = loadedSurveyTemplates();
        var list = [];
        for (var i = 0; i < templates.length; i++) {
            var template = templates[i];
            var btn = renderButton(template.name, template.json);
            list.push(<div key={i+1}><div>{btn}</div><br /></div>);
        }
        var mainDivStyle = {
            padding: "7px",
            width: "100%"
        };
        var titleClassName = "sd-title sd-page__title";
        return (<React.StrictMode>
            <div style={mainDivStyle}>
                <h3 className={titleClassName}>Templates list</h3>
                {list}
            </div>
        </React.StrictMode>);
    }
}

SurveyReact.ReactElementFactory.Instance.registerElement(
  "svc-tab-template",
  (props) => {
    return React.createElement(TabTemplateComponent, props);
  }
);                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );
                
function loadedSurveyTemplates() {
    return [
        {
            name: "NPS",
            json: getNPSJSON()
        },
        {
            name: "Dummy checkbox survey",
            json: getDummyCheckboxJSON()
        },
        {
            name: "Empty Survey",
            json: {}
        }
    ];
}

function getNPSJSON() {
    return {
 "completedHtml": `<h3>Thank you for your feedback.</h3>
<h5>Your thoughts and ideas will help us to create a great product!</h5>`,
 "completedHtmlOnCondition": [
  {
   "expression": "{nps_score} > 8",
   "html": `<h3>Thank you for your feedback.</h3>
<h5>We glad that you love our product. Your ideas and suggestions will help us to make our product even better!</h5>`
  },
  {
   "expression": "{nps_score} < 7",
   "html": `<h3>Thank you for your feedback.</h3>
<h5> We are glad that you share with us your ideas.We highly value all suggestions from our customers. We do our best to improve the product and reach your expectation.</h5>
<br />`
  }
 ],
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "rating",
     "name": "nps_score",
     "title": "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
     "isRequired": true,
     "rateMin": 0,
     "rateMax": 10,
     "minRateDescription": "(Most unlikely)",
     "maxRateDescription": "(Most likely)"
    },
    {
     "type": "checkbox",
     "name": "promoter_features",
     "visibleIf": "{nps_score} >= 9",
     "title": "Which features do you value the most?",
     "isRequired": true,
     "validators": [
      {
       "type": "answercount",
       "text": "Please select two features maximum.",
       "maxCount": 2
      }
     ],
     "hasOther": true,
     "choices": [
      "Performance",
      "Stability",
      "User Interface",
      "Complete Functionality"
     ],
     "otherText": "Other feature:",
     "colCount": 2
    },
    {
     "type": "comment",
     "name": "passive_experience",
     "visibleIf": "{nps_score} > 6  and {nps_score} < 9",
     "title": "What do you like about our product?"
    },
    {
     "type": "comment",
     "name": "disappointed_experience",
     "visibleIf": "{nps_score} notempty",
     "title": "What do you miss or find disappointing in your experience with our products?"
    }
   ]
  }
 ],
 "showQuestionNumbers": "off"
};
}

function getDummyCheckboxJSON() {
    return { elements: [
    { type: "checkbox", name: "car", title: "What car are you driving?", isRequired: true, hasNone:  true,
     choices: ["Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen"] }
    ]};
}
                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Insert a custom tab into creator, Survey Creator Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></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-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/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>
    -->
        <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-react/survey-creator-react.min.js"></script>
        <style>
            :root {
                --tab-min-height: 600px;
            }
        </style>
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>
</div>

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

</body>
</html>

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.

Start the Survey

Approximate time to complete: 2 min.