surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.02k stars 785 forks source link

MultipleText rowsVisibleIf #4508

Closed SamMousa closed 8 months ago

SamMousa commented 2 years ago

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

Feature

What is the current behavior?

I need to create a multiple text question where I hide some of the rows dynamically.

I've tried implementing this using a matrix dropdown with 1 column and rowsVisibleIf, this works but creates weirdly nested data because I get a dictionary per row (with 1 entry for each column)

What is the expected behavior?

There are 2 possible improvements, both could be implemented:

  1. Add rowsVisibleIf to multiple text question
  2. Add an option for a matrixdropdown question to store flat data in case there is just 1 column
andrewtelnov commented 2 years ago

@SamMousa Could you please send us your JSON related to this functionality? It will be better if we implement Unit Tests based on real case.

Thank you, Andrew

SamMousa commented 2 years ago

There is no valid JSON for this case; since it is a new feature.

Currently the rowsVisibleIf property doesn't exist for multiple text.

andrewtelnov commented 2 years ago

Sure, but you have the idea how you want to use it :) This is the way I work. Right Unit test that doesn't compile, make it compile and then work :-)

Thank you, Andrew

SamMousa commented 2 years ago
{
 "logoPosition": "right",
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "checkbox",
     "name": "question2",
     "title": "Pick some",
     "choices": [
      "item1",
      "item2",
      "item3"
     ],
     "separateSpecialChoices": true,
     "hasOther": true,
     "hasNone": true
    },
    {
     "type": "matrix",
     "name": "question3",
     "title": "Only rows picked above should be visible",
     "rowsVisibleIf": "{question2} contains {item}",
     "columns": [
      "Column 1",
      "Column 2",
      "Column 3"
     ],
     "rows": [
      "item1",
      "item2",
      "item3"
     ]
    },
    {
     "type": "multipletext",
     "name": "question1",
     "rowsVisibleIf": "{question2} contains {item}",
     "items": [
      {
       "name": "item1"
      },
      {
       "name": "item2"
      },
      {
       "name": "item3"
      }
     ]
    }
   ]
  }
 ]
}

Copied the syntax from a matrix question which has rowsVisibleIf.

andrewtelnov commented 2 years ago

@SamMousa We have implemented the scenario that similar to your scenario a week ago. Could you please review this example? Please go to the second page with checkboxes.

Thank you, Andrew

SamMousa commented 2 years ago

That is a very hacky solution lol, trying it in the latest creator (https://surveyjs.io/create-survey) even leads to stability issues. Try this, which is just the 2nd page from the example you linked.

JSON ```json { "logoPosition": "right", "pages": [ { "name": "page1", "elements": [ { "type": "checkbox", "name": "cars", "title": "What car did you own?", "isRequired": true, "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen", "Tesla" ], "colCount": 2, "maxSelectedChoices": 5, "valuePropertyName": "carProducer" }, { "type": "paneldynamic", "name": "cars_info", "title": "Please describe your car", "valueName": "cars", "templateElements": [ { "type": "dropdown", "name": "years", "title": "How long did you own it?", "titleLocation": "left", "choicesMin": 1, "choicesMax": 30 }, { "type": "rating", "name": "rating", "startWithNewLine": false, "title": "Please rate it", "titleLocation": "left" }, { "type": "comment", "name": "comment", "title": "Please leave hte comment:" } ], "templateTitle": "Car: {panel.carProducer}", "allowAddPanel": false, "allowRemovePanel": false } ], "title": "What cars did you own?" } ], "showQuestionNumbers": "off" } ```

Also, in my original post I mentioned I have a workaround using matrix dynamic. But both the example you give and my own solution are workarounds.

I'm suggesting a feature rowsVisibleIf be added to the multiple text question, this increases consistency and simplifies solving this specific problem.

andrewtelnov commented 2 years ago

OK

andrewtelnov commented 1 year ago

@SamMousa I looked at the code. It requires to write a lot of code and tests. In fact, we need to support all question logic functionality to do it right: visibleIf, enableIf, requiredIf. Add rendering code for hiding showing items (editors and title). I am moving it into backlog for now. It is several days of work.

Thank you, Andrew

SamMousa commented 1 year ago

I've created a custom question type that extends multiple text and does what I need. Feel free to remove it from the backlog since it seems I'm the only one interested ;-)