[Ticket cloned from T12489: Survey form not Rendering Custom Added Questions]
Also I want to know why my custom questions type become same as of the the name. I want to make the type dynamically as per my requirement as following.
JavaScriptComponentCollection.Instance.add(
name: defaultFieldName,
title: defaultFieldName,
questionJSON: {
type: this.surveyFieldType,
},
});
Hello Aqib,
The
questionJSON
property of a custom component allows you to configure a survey question which will be used as a custom component (Create Specialized Question Types). At this point, it is unclear what you want to achieve by dynamically specify thetype
of a question inside a custom component. Would you please elaborate on it?For example when in the below custom component I have decalred its type as text.
ComponentCollection.Instance.add( name: customfield, title: customTitle, questionJSON: { type:text, }, });
But in the result json below it will show its type same as of the name. Is it kept so intentionally or the type in result json is different then the declared one in questionJSON.
{ "type": "customfield", "name": "question1" }
Hello,
The idea is to hide the real JSON from the user. Later you can modify your component JSON and it will apply to all your surveys where this component is used without updating survey JSONs.
Your example doesn't have a lot of sense, since you setup question type only. It makes perfect sense in our examples, for example country question and others examples in the same category.
Thank you,
Andrew
SurveyJS Team
Andrew I got your point. Thank You.
I have another issue while adding custom component in the survey creator. In the below code I am creating custom components on the basis of dynamic fields. Everything works fine except the title of custom component. As per documentation tool box items should show the title of newly added components but in my case it is showing the name of custom component. Can you please help me resolving this issue.
createDefaultFields(defaultfieldsdata){ ComponentCollection.Instance.clear() for (let i = 0; i < defaultfieldsdata.length; i++) { this.defaultFieldName = defaultfieldsdata[i].default_fields_name; this.defaultFieldTitle = defaultfieldsdata[i].default_fields_title; this.surveytitle = defaultfieldsdata[i].surveytitle; this.surveyFieldType = defaultfieldsdata[i].default_fields_type; this.json_names.push(this.defaultFieldName); //To add custom component on the basis of default field from database. if (!Serializer.findClass(this.defaultFieldName)) { ComponentCollection.Instance.add({ //Unique component name. It becomes a new question type. Please note, it should be written in lowercase. name: this.defaultFieldName, //The text that shows on toolbox title: this.defaultFieldTitle, //The actual question that will do the job questionJSON: { type: this.surveyFieldType, }, }); //To make the name property of each default field readonly Serializer.getProperty(this.defaultFieldName, "name").visible = false; Serializer.getProperty(this.defaultFieldName, "isRequired").visible = false; Serializer.getProperty(this.defaultFieldName, "description").visible = false; Serializer.getProperty(this.defaultFieldName, "title").visible = false; } } //New objcet for survey creator const creator = new SurveyCreatorModel(creatorOptions); //TO show previous stored json data of form in survey designer creator.text = this.questionnaireAddEdit.json_data; //TO chnage the title of form in survey creator creator.survey.title = this.questionnaireAddEdit.name + ' ' + this.surveytitle; //TO change the name of created json for each custom added question in survey creator creator.onQuestionAdded.add((sender, options) => { var q = options.question; var t = q.getType(); if (this.json_names.includes(t)) { q.name=t; } }); creator.onElementAllowOperations.add(function (_, options) { if (options.obj.customQuestion) { options.allowCopy = false; options.allowChangeType = false; options.allowEdit= false; } }); //To save or update survey creator json data creator.saveSurveyFunc = (saveNo: number, callback: Function) => { this.questionnaireAddEdit.json_data = JSON.stringify(creator.JSON) this.saveSurvey(this.questionnaireAddEdit) }; //To categories tool box items and show default fields in last category const categories = creator.toolbox.categories; const othersIndex = categories.findIndex((category) => category.name === "Default Fields"); const othersCategory = categories.splice(othersIndex, 1)[0]; categories.push(othersCategory); //To expand and collapse the tool items categories creator.toolbox.showCategoryTitles = true creator.toolbox.allowExpandMultipleCategories = true; creator.showSidebar = false; creator.toolbox.forceCompact = false; creator.selectedElement = creator.survey.getAllQuestions()[0]; creator.rightContainerActiveItem("property-grid"); this.surveyCreatorModel = creator; }
Could you please create plunker or CodeSandbox project to let us see the issue? I do not understand what could go wrong, since everything works fine in our examples and tests.
Thank you,
Andrew
SurveyJS Team
Hi Andrew,
Above issue arises when I give the name of custom component like name: "dbo.read.class.classname"
ComponentCollection.Instance.add({ name: "dbo.read.class.classname", title: "Class", questionJSON: { "type": "text", } });
In creator it shows dbo the name of component in the toolbox items instead of the title I provided. Attached is the screen shot of result.
I think this issue is because of dot in name: "dbo.read.class.classname". I am creating the components dynamically and I don't want to remove the dot from the names of these components. Can you please help out in this regard.
Hello,
The component name should not include ".". Please write a function that will replace dots with spaces or any other symbol. For example you can convert it to "dbo-read-class-classname".
Thank you,
Andrew
SurveyJS Team
Thank You