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() {
Survey.StylesManager.applyTheme("defaultV2");
var testSurveyModel = new SurveyReact.Model(creator.getSurveyJSON());
ReactDOM.render(
<SurveyReact.Survey model={testSurveyModel} />, document.getElementById("surveyContainerInPopup"));
modal.open();
}
}));
window.modal = new RModal(document.querySelector("#modalSurvey"),{
closeTimeout: 100,
dialogClass: "modal__dialog",
dialogOpenClass: "modal__dialog--animated modal__dialog--fade-in-down",
focus: false
});
ReactDOM.render(
<React.StrictMode>
<SurveyCreator.SurveyCreatorComponent creator={creator} />
</React.StrictMode>,
document.getElementById("creatorElement")
);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Toolbar customization, 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">
<script type="text/javascript" src="https://unpkg.com/rmodal/dist/rmodal.js"></script>
</head>
<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>
<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" style="height: 100vh;"></div>
</div>
<script type="text/babel" src="./index.js"></script>
</body>
</html>
.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;
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;
}{
id: string;
visible: boolean | KnockoutObservable(boolean);
title: string | KnockoutObservable(string);
action: Function;
}
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 SurveyApproximate time to complete: 2 min.