How to watch a inner variable of custom question type in SurveyJS?

Question

question

I have defined a customer question type named cascadedropdown, the code is as follows :

ComponentCollection.Instance.add({
  // A unique name; must use lowercase
  name: 'casecadedropdown', // A display name used in the Toolbox
  title: 'casecade dropdown', // A default title for questions created with this question type
  defaultQuestionTitle: 'choose an option',
  elementsJSON: [{
      type: 'dropdown',
      name: 'question1',
      title: 'question1',
      choices: levelOneArray, 
 },{
      type: 'dropdown',
      name: 'question2',
      title: 'question2',
      startWithNewLine: false,
      choices:[],
 },{
      type: 'dropdown',
      name: 'question3',
      title: 'question3',
      startWithNewLine: false,
      choices:[],
      visible: {questionListLen} > 2
 },{
      type: 'dropdown',
      name: 'question4',
      title: 'question4',
      startWithNewLine: false,
      choices:[],
      visible: {questionListLen} > 3
 }
 ],
    calculatedValues:[{
        name:"questionListLen",
        expression: casecadeQuestionList.length
 } ],
  inheritBaseProps: true,
}]

after the cascadedropdown loading, the casecadeQuestionList will be assigned by another value, whether the question3 and question4 display or not depends on the casecadeQuestionList.length, how can I watch the casecadeQuestionList.length change?

trying I defined the calculated value above, but it does not work. What should I do?

It is nto clear from your code what is casecadeQuestionList. Is this supposed to be the number of dropdowns that the user has selected a value for? — Oggy
– Oggy, Commented Oct 18, 2024 at 12:56

LibertyAndHappy · Accepted Answer · 2024-10-28 01:28:30Z

I should change the way I decide whether to add a third or fourth dropdown, so the prototype of the cascade dropdown question needs redefined.

ComponentCollection.Instance.add({
  // A unique name; must use lowercase
  name: 'cascadedropdown', // A display name used in the Toolbox
  title: 'cascade dropdown', // A default title for questions created with this question type
  defaultQuestionTitle: 'Please choose the option',
  elementsJSON: [
    {
      type: 'dropdown',
      name: 'question1',
      title: 'question1',
      placeholder: 'Select',
      choices: []
    },
    {
      type: 'dropdown',
      name: 'question2',
      title: 'quesiton2',
      placeholder: 'Select',
      choices: [],
      startWithNewLine: false
    }
  ],
})

The point is to access the instance of casecadeDropdown in the designer mode. I discovered that calling the creator.onSelectedElementChanged can access the instance of the mouse focus. The code is as follows:

const isCascadeDropdown = (focusedElemetJSON) => {
  return focusedElemetJSON?.hasOwnProperty("customQuestion") 
         && focusedElemetJSON?.jsonObj.type == "cascadedropdown" 
}

creator.onSelectedElementChanged.add((sender,options)=>{
  const focusedElemetJSON = options.newSelectedElement
  // access the json object of cascade dropdown type question which user focused
  if(isCascadeDropdown(focusedElemetJSON)){
    casecadeJSON.value = focusedElemetJSON.customQuestion.json.elementsJSON
  }
})

Collectives™ on Stack Overflow

How to watch a inner variable of custom question type in SurveyJS?

question

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

question

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest