Create a panel based custom question.

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

Question

What is the current behavior?

I have a custom question with my 'path' property. But it's a basic question not a panel based one. I tried to check in the documentation, so I found this page https://codesandbox.io/s/dtl93l?file=/src/SurveyCreatorComponent.jsx:200-277. I also tried to make my custom class to extends to ModelPanelBase instead of Question but this did'nt work too.

What is the expected behavior?

I want to add questions inside my custom component.

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

This is my SurveyCreator component inside my React App.

Test code

import React, {useEffect} from 'react';
import 'survey-core/modern.min.css';
import {localization, SurveyCreator, SurveyCreatorComponent} from "survey-creator-react";
import "survey-core/defaultV2.min.css";
import "survey-creator-core/survey-creator-core.min.css";
import { ElementFactory, Question, Serializer} from "survey-core";
import {ReactQuestionFactory, SurveyQuestionElementBase} from "survey-react-ui";

const CUSTOM_QUESTION_TYPE = "videoquestions";

// A model that extends the Question class and inherits all its properties and methods
export class VideoQuestionsModel extends Question {
    constructor(name: string) {
        super(name);
        // Create a `LocalizableString` object for the `caption` property
        //this.createLocalizableString("caption", this);
    }
    getType() {
        return CUSTOM_QUESTION_TYPE;
    }
    get path() {
        return this.getPropertyValue("path");
    }
    set path(val) {
        this.setPropertyValue("path", val);
    }
}

// A class that renders a Descriptive Text question
export class SurveyVideoQuestions extends SurveyQuestionElementBase {
    get question() {
        return this.questionBase;
    }
    renderElement() {
        return (
            <></>
        );

    }
}

const creatorOptions = {
    showLogicTab: true,
    isAutoSave: true
};

const CustomSurveyCreatorComponent: React.FC = () => {
    const creator = new SurveyCreator(creatorOptions);

    useEffect(() => {
        // Register `DescriptiveTextModel` as a constructor for the "descriptivetext" question type
        ElementFactory.Instance.registerElement(CUSTOM_QUESTION_TYPE, (name) => {
            return new VideoQuestionsModel(name);
        });

        // Configure JSON serialization and deserialization rules for the custom properties
        Serializer.addClass(
            CUSTOM_QUESTION_TYPE,
            [
                {
                    name: "path",
                    category: "general",
                    visibleIndex: 2,
                }
            ],
            function () {
                return new VideoQuestionsModel("");
            },
            "question"
        );

        // Change default values for inherited properties
        Serializer.getProperty(CUSTOM_QUESTION_TYPE, "hideNumber").defaultValue = true;
        Serializer.getProperty(CUSTOM_QUESTION_TYPE, "titleLocation").defaultValue = "hidden";

        // Register `SurveyQuestionDescriptiveText` as a class that renders the Descriptive Text question type
        ReactQuestionFactory.Instance.registerQuestion(
            CUSTOM_QUESTION_TYPE,
            (props) => {
                return React.createElement(SurveyVideoQuestions, props);
            }
        );

        // Specify captions to display on the design surface and in Property Grid
        const locale = localization.getLocale("");
        locale.qt[CUSTOM_QUESTION_TYPE] = "Video questions";
        locale.pe.path = "Path";
    }, [])

    return (
        <SurveyCreatorComponent creator={creator} />
    )
};

export default CustomSurveyCreatorComponent;

Specify your

browser: Chrome
browser version: latest
surveyjs platform : React TS

surveyjs version:

"survey-creator-react": "^1.9.95",
"survey-react": "^1.9.96",
"survey-react-ui": "^1.9.95"

Thanks you for any suggestions!

surveyjs / survey-library