Codeimport React from "react";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
import { localization, editorLocalization } from "survey-creator-core";
import "survey-core/survey.i18n.js";
import "survey-creator-core/survey-creator-core.i18n.js";
import "survey-core/defaultV2.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";
import { Serializer, ItemValue } from "survey-core";
import { settings } from "survey-creator-core";
settings.propertyGrid.maximumRateValues = 10;
settings.toolbox.defaultJSON.rating = {
displayMode: "buttons",
rateValues: [
{ value: 1, text: "Extremely poor" },
{ value: 2, text: "Poor" },
{ value: 3, text: "Good" },
{ value: 4, text: "Very good" },
{ value: 5, text: "Excellent" }
]
};
Serializer.getProperty("rating", "rateType").defaultValue = "none";
Serializer.getProperty("rating", "rateType").visible = true;
Serializer.getProperty("rating", "rateCount").visible = false;
Serializer.getProperty("rating", "autoGenerate").defaultValue = true;
Serializer.getProperty("rating", "autoGenerate").visible = false;
const twoRateValues = [
{ value: 1, text: "Extremely poor" },
{ value: 2, text: "Poor" }
];
const threeRateValues = [
{ value: 1, text: "Extremely poor" },
{ value: 2, text: "Poor" },
{ value: 3, text: "Good" }
];
const fourRateValues = [
{ value: 1, text: "Extremely poor" },
{ value: 2, text: "Poor" },
{ value: 3, text: "Good" },
{ value: 4, text: "Very good" }
];
const fiveRateValues = [
{ value: 1, text: "Extremely poor" },
{ value: 2, text: "Poor" },
{ value: 3, text: "Good" },
{ value: 4, text: "Very good" },
{ value: 5, text: "Excellent" }
];
const sixRateValues = [
{ value: 1, text: "Extremely poor" },
{ value: 2, text: "Poor" },
{ value: 3, text: "Fair" },
{ value: 4, text: "Good" },
{ value: 5, text: "Very good" },
{ value: 6, text: "Excellent" }
];
const sevenRateValues = [
{ value: 1, text: "Extremely poor" },
{ value: 2, text: "Poor" },
{ value: 3, text: "Below average" },
{ value: 4, text: "Average" },
{ value: 5, text: "Good" },
{ value: 6, text: "Very Good" },
{ value: 7, text: "Excellent" }
];
const eightRateValues = [
{ value: 1, text: "Extremely poor" },
{ value: 2, text: "Poor" },
{ value: 3, text: "Below average" },
{ value: 4, text: "Average" },
{ value: 5, text: "Good" },
{ value: 6, text: "Very Good" },
{ value: 7, text: "Excellent" },
{ value: 8, text: "Outstanding" }
];
const nineRateValues = [
{ value: 1, text: "Extremely poor" },
{ value: 2, text: "Poor" },
{ value: 3, text: "Below average" },
{ value: 4, text: "Average" },
{ value: 5, text: "Satisfactory" },
{ value: 6, text: "Good" },
{ value: 7, text: "Very Good" },
{ value: 8, text: "Excellent" },
{ value: 9, text: "Outstanding" }
];
const tenRateValues = [
{ value: 1, text: "Extremely poor" },
{ value: 2, text: "Very Poor" },
{ value: 3, text: "Very Poor" },
{ value: 4, text: "Below average" },
{ value: 5, text: "Average" },
{ value: 6, text: "Satisfactory" },
{ value: 7, text: "Good" },
{ value: 8, text: "Very Good" },
{ value: 9, text: "Excellent" },
{ value: 10, text: "Outstanding" }
];
function SurveyCreatorRenderComponent() {
const options = {
showLogicTab: false,
showJSONEditorTab: false,
showJsonEditor: false,
questionTypes: [
'boolean',
'text',
'multipletext',
// 'matrix',
// 'image',
'rating',
'signaturepad',
'tagbox',
'dropdown',
// 'imagepicker',
// 'ranking',
'comment',
'panel',
'paneldynamic',
// 'matrixdropdown',
// 'matrixdynamic',
'html',
'expression',
],
};
const creator = new SurveyCreator(options);
creator.pageEditMode = 'bypage';
creator.toolboxLocation = 'none';
creator.toolbox.forceCompact = true;
creator.showSidebar = false;
creator.toolbox.showSidebar = true;
creator.allowEditSurveyTitle = true;
creator.allowEditPageTitle = false;
const translation = localization.getLocale();
translation.pv.rateType.labels = "Semantic";
let expandSettingsAction = creator.toolbar.actions.indexOf(
creator.toolbar.actions.find((action) => action.id === 'svd-grid-expand')
);
creator.toolbar.actions.splice(expandSettingsAction, 1);
let settingsAction = creator.toolbar.actions.indexOf(
creator.toolbar.actions.find((action) => action.id === 'svd-settings')
);
creator.toolbar.actions.splice(settingsAction, 1);
creator.onDefineElementMenuItems.add((_, options) => {
const question = options.obj;
if (question.getType() === 'rating') {
var indexToRemove = options.items.findIndex((item) => item.id === 'settings');
if (indexToRemove !== -1) {
options.items.splice(indexToRemove, 1);
}
}
});
creator.onSurveyPropertyValueChanged.add((sender, options) => {
if (
options.propertyName === "rateValues" &&
options.oldValue.length != options.newValue.length
) {
const currentRateValueNumber = options.obj.rateValues.length;
let newRateValues = undefined;
switch (currentRateValueNumber) {
case 1:
newRateValues = oneRateValue;
break;
case 2:
newRateValues = twoRateValues;
break;
case 3:
newRateValues = threeRateValues;
break;
case 4:
newRateValues = fourRateValues;
break;
case 5:
newRateValues = fiveRateValues;
break;
case 6:
newRateValues = sixRateValues;
break;
case 7:
newRateValues = sevenRateValues;
break;
case 8:
newRateValues = eightRateValues;
break;
case 9:
newRateValues = nineRateValues;
break;
case 10:
newRateValues = tenRateValues;
break;
default:
newRateValues = [];
break;
}
const newItemaValues = newRateValues.map(
(newValue) => new ItemValue(newValue.value, newValue.text)
);
options.obj.rateValues = newItemaValues;
}
});
creator.onSetPropertyEditorOptions.add((sender, options) => {
// Disable the Fast Entry button
options.editorOptions.allowBatchEdit = false;
});
creator.onCollectionItemAllowOperations.add((sender, options) => {
if (options.obj.getType() === "rating") {
options.allowEdit = false;
}
});
return <SurveyCreatorComponent creator={creator} />;
}
export default SurveyCreatorRenderComponent;
So, here in my code I want to set default to preview mode right now default designer tab shows up but is there any way preview tab opens and than we can switch .