Question T2910
Visible to All Users

Add a new property to survey creator not working

created 5 years ago

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

Answers approved by surveyjs Support

created 5 years ago

Hello,

In order to add property to a question popup editor, you can check the https://surveyjs.io/Examples/Survey-Creator/?id=questioneditor&theme=bootstrap sample:
Clipboard-File-1.png

Thanks, Serge
SurveyJS Team

    Show previous comments (2)

      Hello,

      The code you wrote above declares a new property and automatically adds this property to the advanced properties window on the right side of SurveyJS creator.
      In order for property to be shown in popup question editor you need to add this property to SurveyQuestionEditorDefinition as shown in the above mentioned sample:

      JavaScript
      //Add a tag property to all questions Survey .Serializer .addProperty("question", "tag"); // Change the order of name and title properties, remove the startWithNewLine property and add a tag property SurveyCreator .SurveyQuestionEditorDefinition .definition["question"] .properties = [ "title", "name", { name: "tag", title: "Tag" }, { name: "visible", category: "checks" }, { name: "isRequired", category: "checks" } ];

      Thanks, Serge
      SurveyJS Team

      M M
      MatthewBloemetje 5 years ago

        Oh i see. Now it works. Thank you very much. So if i wanted to create a new property that is a selection, how do i do that and add the options for the select property?

        Thanks again

          Hello,

          I've created a separate ticket on your behalf (T2913: How to create a new property that is a selection). It has been placed in our processing queue and will be answered shortly.

          Thanks, Serge
          SurveyJS Team