Question T2458
Visible to All Users

Advice regarding creating a composite question

created 5 years ago

Hi,

We have a need to create a new question type that is actually composed of other question types.

Specifically what we need is a question that:

  1. Renders one of two other custom question types as a child based on an editor property value and this type will be of single or multi select type
  2. Renders a dynamic panel inside it with all the panels having a fixed first item of type single input, with as many panels as the number of items selected in the first field

I am aware we can create such a composition using a panel in the editor and add it to the toolbox, however we do need some additional level of control that I don't believe can be accomplished without creating an entirely new question. Allow me to illustrate our problem with an example.

The basic JSON for such a composition would look like this:

JSON
{ "pages": [ { "name": "page1", "elements": [ { "type": "panel", "name": "panel1", "elements": [ { "type": "checkbox", "name": "question1", "choices": [ "item1", "item2", "item3" ] }, { "type": "panel", "name": "panel2", "elements": [ { "type": "text", "name": "question2", "width": "300px" } ] } ], "title": "New Question Type" } ] } ] }

So in this survey we have a panel with a checkbox and a dynamic panel which contains a single input. Now with this we need to ensure:

  1. The first field (which is of type checkbox in this example) would have to be one of two types defined as a property on panel1 (let us assume for this example it can be either a checkbox or a radiogroup)
  2. The second field (dynamic panel), will have to render as many panels as items are selected in the checkbox at runtime
  3. The fields in the dynamic panel can be modified in design time, but the first field must always be a single input text
  4. panel1 will also need another property to specify a list of questions in the current survey (I imagine this should be relatively easy)

Finally we need this whole composition as a single question that can be dragged and dropped from the toolbox at design time.

This is a new rather complex requirement we have received, any advice in implementing this would be appreciated.

To start off with, I am creating a question that extends panel. But how do I ensure it always inserts the above mentioned elements automatically?

Answers approved by surveyjs Support

created 5 years ago

Hello,

We made live sample in plunker for you. Further details of a possible implementation. Add new custom question to toolbox based in panel with paneldynamic element with single input setted in JSON. Add isComposite custom property to panel question and set it true only for newly custom question to get ability to filter our custom question in callbacks. In onPanelAdded add to our question checkbox or radiogoup question on top based on First Field Type property which we also added. To change checkbox to radiogroup and vice versa use onPropertyValueChanging callback. To change panelCount property use onValueChanged callback of Test Survey tab survey instance (replace it to survey instance for using without Survey Creator)

You may investigate code above and read SurveyJS documentation to understand better. So we made 1, 2 items of you task list (and probably also 3). We didn't fully understand what about 4 item. In any case, the main idea is you can implement as complex behavior of Survey Library and Survey Creator as you want (our tools are quite flexible), but it will take time to investigate documentation and this partly goes beyond our responsibility. Be free if you have any question

Thanks, Alex
SurveyJS Team