Hello,
I'm trying to create a dynamic matrix with a column of type expression that displays clues based on the selection made in the same row. Below is a MWE of this functionality. I'm using the expression iif({row.Selection}=='showComment', 'SHOWN', '')
to show the clue based on the selection.
What is the best way to translate the string 'SHOWN'
in this case? I tried reading the value of another (hidden) question that can be translated, but wasn't able to access the title. I also thought of enabling localization for expression fields through customizations in JS, but that would require copying the whole expression each time a change is made to it.
I'd be grateful for any suggestions.
Thanks,
Lucas
JSON{
"logoPosition": "right",
"pages": [
{
"name": "page1",
"elements": [
{
"type": "matrixdynamic",
"name": "question1",
"columns": [
{
"name": "Selection",
"cellType": "dropdown",
"choices": [
"showComment"
]
},
{
"name": "Comment",
"cellType": "expression",
"expression": "iif({row.Selection}=='showComment', 'SHOWN', '')"
}
]
}
]
}
]
}
Hello Lucas,
Do you want to have a question title here? What is the task?
Thank you,
Andrew
SurveyJS Team
Hello Andrew,
sorry for the confusion.
My only task it to able to translate
'SHOWN'
in the above example (and in expressions in general).Using the title of another (hidden) question, which will be translated, e.g. something like
{Question2.title}
in place of'SHOWN'
, was just one of my attempts on how to solve this issue. But anything that works would be appreciated.Thanks,
Lucas
Hello Lucas,
Thank you for the update. From what I gather, you wish to display a different text value in a
Comment
field. The text depends on a survey's locale.If so, I may suggest that you register a custom function and return a required text based on a survey locale. Consider this demo:
const json = { "logoPosition": "right", "pages": [ { "name": "page1", "elements": [ { "type": "matrixdynamic", "name": "question1", "columns": [ { "name": "Selection", "cellType": "dropdown", "choices": [ "showComment" ] }, { "name": "Comment", "cellType": "expression", "expression": "iif({row.Selection}=='showComment', getCommentText())" } ] } ] } ] } ... function getCommentText(params){ let locale = this.survey.locale; let commentText = undefined; switch(locale){ case 'fr': return 'MONTRÉ'; break; case 'de': return 'GETOOND'; break; default: return "SHOWN"; } return commentText; } Survey.FunctionFactory.Instance.register('getCommentText', getCommentText); ... const survey = new Survey.Model(json); survey.locale = 'fr';
View Demo
Please let us know if this option can help you.
Hello Jane,
Thanks so much for putting together this demo.
However, I definitely need a solution where these translations can be edited through the creator.
I tried to register a function that takes the translations as arguments and selects the right one based on the current locale.
Unfortunately, I do not have access to
this
due to the way I set up my React project (logsundefined
).As a workaround, I'm now calling
survey.setVariable("locale", locale)
inside myuseEffect
hook that reacts to language changes.Since I also can't access the variable value inside the registered function, I settled on removing it all together and just access the registered variable directly:
iif({row.Selection}=='showComment',iif({locale}=='de','ANGEZEIGT','')+iif({locale}=='fr','MONTRÉ','')+iif({locale}=='en','SHOWN',''),'')
It's not pretty, but it gets the job done…
Let me know if you have any ideas on how to improve this.
Thanks,
Lucas
Hello Lucas,
Thank you for the update. If you wish to allow users to define the column text and translate it, I would suggest that you create a custom localizable property for your Matrix question. Check the Add Custom Properties to the Property Grid documentation section for more information on how custom property settings.
So, you may add a custom Matrix property and define different translations for it. A property will be available in a Survey Creator. To display a custom property value in a row's column, register a custom function. You should be able to access a survey instance within a custom function as
this.survey
.View Demo
import { Serializer, FunctionFactory } from "survey-core"; function getCommentText(params) { let commentText = this.survey.getQuestionByName("question1") .matrixCommentText; return commentText; } FunctionFactory.Instance.register("getCommentText", getCommentText); Serializer.addProperty("question", { name: "matrixCommentText", displayName: "Comment Text", type: "text", isLocalizable: true, category: "general" }); ... // Survey JSON { "locale": "de", "logoPosition": "right", "pages": [ { "name": "page1", "elements": [ { "type": "matrixdynamic", "name": "question1", "matrixCommentText": { "default": "SHOWN", "fr": "MONTRÉ", "de": "GETOOND" }, "columns": [ { "name": "Selection", "cellType": "dropdown", "choices": [ "showComment" ] }, { "name": "Comment", "cellType": "expression", "expression": "iif({row.Selection}=='showComment', getCommentText(), '')" } ] } ] } ] }
Please let me know if this option works for you.
Hello Jane,
Thanks for suggesting this alternative involving a custom property.
However, I'm sticking with the custom function since I need an approach that can be applied to any future questions.
(Also I found out that I have access to
model
which solves the problem ofthis
beingundefined
.)I consider this ticket solved, but posted a follow-up on how my current solution may be optimized, as it isn't limited to localizing anymore, but generally applies to defining custom functions:
https://surveyjs.answerdesk.io/ticket/details/t13837
Thanks,
Lucas
Hello Lucas,
this
should not return undefined in the function. You should access survey asthis.survey
and if you are using an expression in question object thenthis.question
.Thank you,
Andrew
SurveyJS Team