surveyjs / survey-creator

Scalable open-source survey software to generate dynamic JSON-driven forms within your JavaScript application. The form builder features a drag-and-drop UI, CSS Theme Editor, and GUI for conditional logic and form branching.
https://surveyjs.io/open-source
Other
897 stars 372 forks source link

Extending rating scale question #4661

Closed kmhigashioka closed 10 months ago

kmhigashioka commented 12 months ago

Are you requesting a feature, reporting a bug or ask a question?

Asking a question

What is the current behavior?

Hi! I would like to check if this is doable, I'm trying to create a new question type which is enps. In our use-case, the enps behaves the same as Rating scale question but there can only be one instance of enps question and the user should be able to select that question from "Add question" selection dropdown. I tried to create a custom widget and inherit the rating scale model and use the React UI. However, the display is different. image

What is the expected behavior?

Expecting to see the same UI as rating scale question.

How would you reproduce the current behavior (if this is a bug)?

Provide the test code and the tested page URL (if applicable)

Tested page URL: https://codesandbox.io/s/flamboyant-sun-jj8ctr?file=/src/SurveyCreatorComponent.jsx

Test code

export class EnpsQuestionModel extends QuestionRatingModel {
  getType() {
    return CUSTOM_TYPE;
  }
}

Serializer.addClass(
  CUSTOM_TYPE,
  [],
  function () {
    return new EnpsQuestionModel("");
  },
  "question"
);

ElementFactory.Instance.registerElement(CUSTOM_TYPE, (name) => {
  return new EnpsQuestionModel(name);
});

ReactQuestionFactory.Instance.registerQuestion(CUSTOM_TYPE, (props) => {
  return React.createElement(SurveyQuestionRating, props);
});

Specify your

JaneSjs commented 10 months ago

Hello @kmhigashioka, If you wish to create a copy of a Rating question but with some customized settings like name and title, you can use the creator.toolbox.addItem function. Consider this code:

creator.toolbox.addItem({
    name: "nps",
    title: "NPS",
    iconName: "icon-rating",
    isCopied: true,
    id: "npsQuestion",
    category: "General",
    json: {
      type: "rating",
      title: "How satisfied are you with your in-store experience today?",
      rateType: "stars"
    }
});

Please let me know if this option works for you.

P.S. Let me note that a SurveyJS Creator is available under a commercial developer license.