Question T14877
Visible to All Users

Request for Enhancements in Custom Question Type

created a year ago (modified a year ago)

Hi There,

I am writing to request support for the following requirements in creating a new custom question type:

  1. Issue with setting with custom properties: Currently facing challenges in setting values for custom properties.
  2. Display Name vs Back-end Type: I would like the custom question type to display as Counter Data in frontend, while in JSON Object the type should be counter-data.
  3. Custom Icon for new question type using SvgRegistry
Code
import React from "react"; import { Question, Serializer, ElementFactory } from "survey-core"; import { ReactQuestionFactory, SurveyQuestionElementBase } from "survey-react-ui"; const CUSTOM_QUESTION_TYPE = "counterdata"; export class CounterModel extends Question { constructor(name) { super(name); this.dataType = "QueryString"; } getType() { return CUSTOM_QUESTION_TYPE; } } class SurveyQuestionCounter extends SurveyQuestionElementBase { get question() { return this.questionBase; } renderElement() { return <div>{this.question.value}</div>; } } function registerCounterQuestion() { ElementFactory.Instance.registerElement(CUSTOM_QUESTION_TYPE, (name) => { return new CounterModel(name); }); Serializer.addClass( CUSTOM_QUESTION_TYPE, [ { name: "dataType", category: "general", visibleIndex: 2, default: "Query String", readOnly: true }, { title: "Query String", name: "queryString", category: "general", visibleIndex: 3 } ], function () { return new CounterModel(""); }, "question" ); ReactQuestionFactory.Instance.registerQuestion( CUSTOM_QUESTION_TYPE, (props) => { return React.createElement(SurveyQuestionCounter, props); } ); } export { registerCounterQuestion };

For you reference, I have attached a screen shot illustrating the desire behavior, and you can access demo link here

Screenshot 2023-10-03 at 6.36.13 PM.pngScreenshot 2023-10-03 at 6.37.04 PM.png

Answers approved by surveyjs Support

created a year ago

Hello,
Thank you for the descriptive explanation and a demo.

  1. I see that you registered custom settings using the Serializer object. However, it is not sufficient. You need to register custom settings at the level of your custom question model (CounterModel). You can see how we register custom colorPickerType and disableAlfa settings for a custom Color question in the following guide: Integrate Third-Party React Components | Create a Model.
  2. To customize the display name for a custom question, register a custom entry under the qt key within a survey creator localization.
JavaScript
import { localization } from "survey-creator-core"; const CUSTOM_TYPE = "counter-data"; const locale = localization.getLocale(""); locale.qt[CUSTOM_TYPE] = "Counter Data";

Clipboard-File-1.png
For more information on this, refer to Specify Captions.
3. You can use built-in and custom icons for your question. Please follow these instructions to learn how to register a custom icon: Add an Icon.

I hope this information can help you. Should you have any further questions, please let me know.

Thanks,
Jane

P.S. We hope you enjoyed the level of service you received. If so, we would love if you could leave your feedback on SurveyJS page at g2.com. As we’re building our business, every review helps build credibility for future customers and your feedback would be greatly appreciated.