Hello,
I have tried every possible way to add a new property to the survey creator forms as explained in the documentation. I have been able to successfully remove any property but when it comes to adding there has been no luck. I even see that the example here: https://surveyjs.io/Examples/Survey-Creator/?id=addproperties does not show the added "tag" field like it shows in the javaScript. Is there any problems with the add property and if so, what are the solutions?
Here is a copy of my code. I have printed out the properties before the change and after. It successfully shows me that the properties are changed the way I want but there is still no "branches" input in the question form. It also successfully changes the position for "title" and "name" which shows me there is some effect to the code but there is no effect with new changes such as adding a property.
import React, { Component } from "react";
import * as SurveyJSCreator from "survey-creator";
import * as Survey from "survey-knockout";
import "survey-creator/survey-creator.css";
// import "jquery-ui/themes/base/all.css";
// import "nouislider/distribute/nouislider.css";
// import "select2/dist/css/select2.css";
// import "bootstrap-slider/dist/css/bootstrap-slider.css";
//
// import "jquery-bar-rating/dist/themes/css-stars.css";
// import "jquery-bar-rating/dist/themes/fontawesome-stars.css";
//
// import $ from "jquery";
// import "jquery-ui/ui/widgets/datepicker.js";
// import "select2/dist/js/select2.js";
// import "jquery-bar-rating";
//
// import "icheck/skins/square/blue.css";
//import * as widgets from "surveyjs-widgets";
// widgets.icheck(SurveyKo, $);
// widgets.select2(SurveyKo, $);
// widgets.inputmask(SurveyKo);
// widgets.jquerybarrating(SurveyKo, $);
// widgets.jqueryuidatepicker(SurveyKo, $);
// widgets.nouislider(SurveyKo);
// widgets.select2tagbox(SurveyKo, $);
// widgets.signaturepad(SurveyKo);
// widgets.sortablejs(SurveyKo);
// widgets.ckeditor(SurveyKo);
// widgets.autocomplete(SurveyKo, $);
// widgets.bootstrapslider(SurveyKo);
Survey.Serializer.addProperty("survey", "tag");
class SurveyCreator extends Component {
surveyCreator;
componentDidMount() {
let options = {
showJSONEditorTab: false,
showTranslationTab: false,
showLogicTab: false,
showEmbededSurveyTab: false,
showPropertyGrid: false,
useTabsInElementEditor: true,
showState: true,
designerHeight: "700px",
questionTypes: ["text", "checkbox", "radiogroup", "dropdown", "file"]
};
console.log(SurveyJSCreator
.SurveyQuestionEditorDefinition
.definition["question"]
.properties)
let oldProps = SurveyJSCreator
.SurveyQuestionEditorDefinition
.definition["question"]
.properties
SurveyJSCreator
.SurveyQuestionEditorDefinition
.definition["question"]
.properties = [
"title",
"name",
{
name: "branches",
category: "checks"
}
];
console.log(SurveyJSCreator
.SurveyQuestionEditorDefinition
.definition["question"]
.properties)
// SurveyJSCreator.StylesManager.applyTheme("bootstrap");
this.surveyCreator = new SurveyJSCreator.SurveyCreator(
"surveyCreatorContainer",
options
);
if (this.props.location.state != undefined) {
this.surveyCreator.text = this.props.location.state.surveyToEdit;
}
this.surveyCreator.saveSurveyFunc = this.saveMySurvey;
}
render() {
return <div id="surveyCreatorContainer" />;
}
saveMySurvey = () => {
console.log(JSON.stringify(JSON.parse(this.surveyCreator.text)));
if (this.props.location.state != undefined) {
fetch('/updateSurvey', {
method: 'POST',
body: JSON.stringify(JSON.parse(this.surveyCreator.text)),
headers: {
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.status === 200) {
console.log("Survey saved successfully")
alert("Survey saved successfully")
this.props.history.push("/survey")
} else {
const error = new Error(res.error);
throw error;
}
})
.catch(err => {
console.error(err);
alert('Error saving survey please try again');
});
}
else {
fetch('/saveSurvey', {
method: 'POST',
body: JSON.stringify(JSON.parse(this.surveyCreator.text)),
headers: {
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.status === 200) {
console.log("Survey saved successfully")
alert("Survey saved successfully")
this.props.history.push("/survey")
} else {
const error = new Error(res.error);
throw error;
}
})
.catch(err => {
console.error(err);
alert('Error saving survey please try again');
});
}
};
}
export default SurveyCreator;
Big thanks in advance