Hi Team,
we are implemented custom widget that will add to each question , we are adding chat button widget by referring following link
We are opening dialog on that chat button click , In the comment dialog we are making an API to get all the chats/threads added to that question by using the question's name. We are able to achieve this for all type of normal questions.
We are facing some challenges in case of nested panel or row level questions (template questions/columns) in Dynamic panel/Dynamic Matrix type of questions. Here since the panels & row are repeating we are not able to find out the exact question name since these are template driven questions & template gets repeated. We tried to use the panelIndex/rowIndex but that is also not going to be same always if we add or row anything from the Matrix or Panel.
We want to have some unique ID for each question within the dynamic panel or matrix which is going to be constant always so that we can use it for making the API call & also this ID needs to be stored in the database as a part of the response JSON.
Can you please help to solve this scenario.
Hi Team,
Any update on this ?
Hi Nikhil,
Please accept my apologies for the delayed reply. I appreciate you sharing the demo.
Let me clarify the task and issue further. If we are talking about a Dynamic Panel, the usage scenario is the following. You enable the
conformant
option for a Dynamic Panel question. Now, when a user clicks the button, you wish to obtain all dynamic panels and their inner questions which are created.As you correctly noticed, Dynamic Matrix and Panel questions are template-based. Therefore, I would appreciate it if you could clarify what you plan to do with those inner questions and values.
For instance, you wish to activate a popup which contains a copy of the Dynamic Panel which contains the same fields and their values, it would be easier to create another survey instance and generate a matrix from the provided matrix JSON (
QuestionMatrixDynamicModel.toJSON
/QuestionMatrixDynamicModel.fromJSON
). To apply matrix field values, you would be able to use thesurvey.setValue
function and set a matrix value.I look forward to your reply.
Hi Jane ,
We are opening dialog on that chat button click , In the comment dialog we are making an API to get all the chats/threads added to that question by using the question's name. We are able to achieve this for all type of normal questions.
we required unique name to fetch comment for particular question, in our scenario issue is all repeated panel / row for the Matrix having same name, for those scenario having issue, please see following scenario
Panel 1 > having 2 child question [ques 1 and ques 2] --> we will add 2 panel using addPanel–> now
we will have Panel 1 [0] [ques 1 and ques 2] and Panel 1 [1] [ques 1 and ques 2]
now if add 2 comment on Panel 1 [0] [ques 1] and 3 comment on Panel 1 [1] [ques 1]–> now on opening model -> making api call to fetch comment {question name :' ques 1' }–> in this scenario it will return 5 comment which is combination [0] [ques 1] and [1] [ques 1] because both having same name, to solve this issue we required unique name for each question
We are facing some challenges in case of nested panel or row level questions (template questions/columns) in Dynamic panel/Dynamic Matrix type of questions. Here since the panels & row are repeating we are not able to find out the exact question name since these are template driven questions & template gets repeated. We tried to use the panelIndex/rowIndex but that is also not going to be same always if we add or row anything from the Matrix or Panel.
Hi Nikhil,
Thank you for the update. I may need additional time to consider an option. Please stay tuned.
Thank you Jane, sure will wait for your reply
Hi Nikhil,
I revisited your explanation and understand that you wish to uniquely identify each field added to a Dynamic Panel. To give each question a unique ID, you may wish to follow these steps:
id
property for aquestion
object. For more information on registering custom properties, please visitsurvey.onComplete
event, use thesurvey.getPlainData
function to obtain a detailed survey response and generate a new array of survey responses which include a custom ID value. An example on how to modify survey results, refer to Modify Survey Results.Please let me know if this configuration may work for you.
Hi Jane,
Thanks for you reply.
Actually we are storing the response of survey in the database & patching that DB stored data to the survey next time by using below approach,
this.model.data = surveyResponseDataFromDB;
Now as per your suggestion, we will extract the ID of a question from survey.getPlainData() function & create a custom survey response from Dynamic Panel or matrix.
But if we store this custom resonse in the database & open it with survey instance mentioned above will it patch that ID data also the nested questions within the panel or matrix?
Thanks,
Ramkumar More
Hello Ramkumar,
Thank you for the update. A survey's
data
property contains a JSON object with answered questions of the following structure:{ "question1Name": "question1Value", "question2Name": "question2Value", // ... "questionNName": "questionNValue", }
Depending on a question type, survey questions may have a different answer object structure. You can review a list of question types and their response format at question.value.
If you wish to store survey results and be able to load them to a survey, you would need to store a survey response in a specified format. Or, if you store data in another format, you may want to convert a response object to a specified format before assigning it to
survey.data
. Note that you can also specify individual question values using thesurvey.setValue
function or thequestion.value
property. For more information on available options, please visit Populate Form Fields.Please let me know if any questions remain.
Hi Jane,
survey.data
. will only get question that having values, but if user not answer question , that will not containsurvey.data
.So we are not able to get dynamicPanelInternalName our custom property value for not answer question
we added one property
Serializer.addProperty('question', { name: 'dynamicPanelInternalName', type: 'string', category: 'general', default: '', onSetValue: (question, value) => { if (question.getType() === 'paneldynamic' || question.getType() === 'panel') question.setPropertyValue("dynamicPanelInternalName", value ? value : uuidv4()); }, });
survey.onDynamicPanelAdded.add((sender, options) => { options.panel.setPropertyValue('dynamicPanelInternalName', uuidv4()); options.question.setPropertyValue('dynamicPanelInternalName', uuidv4()); this.setCustomQuestionNumber(survey); })
and we trying to store that property along with data
const resultData = {}; for (const key in survey.data) { const question = survey.getQuestionByName(key); if (!!question) { const item = { name: key, value: question.value, title: question.displayValue, displayValue: question.displayValue }; if (!!question && (question.getType() === 'paneldynamic' || question.getType() === 'panel')) { item['dynamicPanelInternalName'] = question.getPropertyValue('dynamicPanelInternalName'); } resultData[key] = item; } }
Also tried this [survey is Survey Model]
survey.getPlainData({ calculations: [{ propertyName: "dynamicPanelInternalName" }], includeEmpty: true, includeQuestionTypes: true });
but nested question not returning
this our JSON,
{
"title": "New Nested Dynamic Panel",
"description": "New Nested Dynamic Panel Stg",
"logoPosition": "right",
"pages": [
{
"name": "Nested Dynamic Panel question",
"elements": [
{
"type": "radiogroup",
"name": "Single Input",
"title": "Single Input",
"isRequired": true,
"showCommentArea": true,
"popup_description": "mark as required radio button",
"allow_comment": true,
"choices": [
"Item 1",
"Item 2",
"Item 3"
]
},
{
"type": "paneldynamic",
"name": "Dynamic Panel Parent",
"title": "Dynamic Panel Parent",
"templateElements": [
{
"type": "text",
"name": "Dp 1",
"title": "Dp 1",
"allow_comment": true
},
{
"type": "checkbox",
"name": "Dp 2",
"title": "Dp 2",
"description": "this is radio button",
"isRequired": true,
"popup_description": "this is new radio button",
"choices": [
"Item 1",
"Item 2",
"Item 3"
]
},
{
"type": "paneldynamic",
"name": "Dynamic Panel Child",
"title": "Dynamic Panel Child",
"templateElements": [
{
"type": "text",
"name": "Dynamic Panel Child Input",
"title": "Dynamic Panel Child Input",
"allow_comment": true
},
{
"type": "paneldynamic",
"name": "Dynamic Panel Child Child",
"title": "Dynamic Panel Child Child",
"templateElements": [
{
"type": "text",
"name": "Dynamic Panel Child Child Input",
"title": "Dynamic Panel Child Child Input",
"allow_comment": true
},
{
"type": "paneldynamic",
"name": "Dynamic Panel Child Child Child2",
"title": "Dynamic Panel Child Child Child",
"templateElements": [
{
"type": "text",
"name": "Dynamic Panel Child Child Child input",
"title": "Dynamic Panel Child Child Child input",
"allow_comment": true
}
]
}
]
}
]
}
]
},
{
"type": "custom_file_upload",
"name": "File Input",
"title": "File Input"
}
],
"title": "Nested Dynamic Panel question"
}
]
}
Hi Jane,
any update
Hello Nikhil,
The problem with your code that
survey.data
doesn't contain any information for question with empty value:const resultData = {}; for (const key in survey.data) { ...
You will need to call survey.getAllQuestions(true).forEach(… or
survey.getAllQuestions(false).forEach(...
if you want to include invisible questions as well.In this case you have access to the question and you can check a question visibility (
isVisible
), does it has valueisEmpty()
it's typegetType()
and so on. So your getting result code could be:const resultData = {}; survey.getAllQuestions(true).forEach(question => { if (!!question) { const item = { name: key, value: question.value, title: question.displayValue, displayValue: question.displayValue }; if (!!question && (question.getType() === 'paneldynamic' || question.getType() === 'panel')) { item['dynamicPanelInternalName'] = question.getPropertyValue('dynamicPanelInternalName'); } resultData[key] = item; } });
PS: We always suggest to store the survey.data JSON as well. Since you know the survey model and user response, you can always create the situation you have on saving the data. It could be hard to re-create survey.data based on custom user response format.
Thank you,
Andrew
SurveyJS Team
Hi Andrew,
yes , I have already did this code , but I am facing issue with rebinding internal name to same question , when we open questionnaire again .
we are implemented custom widget that will add to each question , we are adding chat button widget by referring following link
https://codesandbox.io/p/sandbox/awesome-wilbur-ff5pfz?file=%2Fsrc%2FSurveyCreatorComponent.jsx%3A39%2C4
We are opening dialog on that chat button click , In the comment dialog we are making an API to get all the chats/threads added to that question by using the question's name. We are able to achieve this for all type of normal questions.
We are facing some challenges in case of nested panel or row level questions (template questions/columns) in Dynamic panel/Dynamic Matrix type of questions. Here since the panels & row are repeating we are not able to find out the exact question name since these are template driven questions & template gets repeated. We tried to use the panelIndex/rowIndex but that is also not going to be same always if we add or row anything from the Matrix or Panel.
We want to have some unique ID for each question within the dynamic panel or matrix which is going to be constant always so that we can use it for making the API call & also this ID needs to be stored in the database as a part of the response JSON.
Hello Nikhil,
I am afraid, I am not fully understand the task. For a common questions, you can set a uniqueId at design-time in Creator. Ηοwever. it is not so easy for dynamic panel and dynamic matrix.
There is a template panel in dynamic panel that has a unique names across the survey. Matrices have column names that are not unique across the survey, they are unique for a matrix.
You can make make questions in dynamic panel unique by adding a panel index, for Matrices cells you can make them unique by using "matrix name" + "a divider" + "column name" + "row index",
The problem that you can't set this Ids in design-time because panels and rows are created during run-time. Since I don't understand your task in detail, I can't suggest something.
We can make a conference call with your product manager and tech. lead if you are really stuck. You can scheduler it from our contact page. There is a "Schedule a call" button on the bottom: https://surveyjs.io/contact-us
Thank you,
Andrew
SurveyJS Team
Hello Nikhil,
I believe this example emulates the behavior you need.
Thank you,
Andrew
SurveyJS Team