Passing the context to SurveyJS from an existing React code

JackalDota

created 5 years ago

Hi,
I have a codebase which is in React. I have a context Obj which I wanted to utilize it inside the SurveyJS library. The context object has info (example - current user's locale, preference of datetime format of the user, etc). I wanted to pass on this setting to SurveyJS so that the values when selected in the DateTime so show in the preferred format.

How do I achieve the above requirements? Even when the context is somehow passed to SurveyJS, where do I need to override the formatting settings so that the desired format shows up?

Also, for a survey which is loaded again with the previous responses, if I make 1 change to a question, should I be passing the entire payload as the JSON? Or, is there a way to send only the delta to the previously saved survey response?

Answers approved by surveyjs Support

Serge T

created 5 years ago

Hello,

You need to assign the survey.data property as shown in this live example - https://surveyjs.io/Examples/Library/?id=survey-data&platform=Reactjs&theme=default

Thanks, Serge
SurveyJS team

Show previous comments (3)

JackalDota 5 years ago

Thanks Serge. Is your reply for my question on overriding the formatting? Can you help on answering the other questions?

Serge T 5 years ago

Hello,

The formatting and locale are stored in the survey JSON and not related to survey.data. You can set different initial data and question settings still the same.
Each assignment of the survey.data fully overrides the question values, i.e. if you don't pass some question value in data, the corresponding will be reseted to it's default value.

If you want to set the certain question value, you can use the following code: survey.getQuestionByName("questionName").value = "new value".

If you want to set survey language, you can use the https://surveyjs.io/Documentation/Library/?id=surveymodel#locale property.

If you want to set format, you need to iterate through the all questions of the survey (survey.getAllQuestions()) and set corresponding settings to the questions.
SurveyJS built-in widgets use the browser settings for input elements (don't apply any formats), formatting are used by 3-rd party widgets (https://surveyjs.io/Examples/Library/?id=custom-widget-inputmask&platform=Reactjs&theme=default)

Thanks, Serge
SurveyJS Team

JackalDota 5 years ago

Thanks Serge. I have another question and hope you can help here.

I have a context object and want to pass this as a parameter while rendering the Survey model.
(Example - ReactDOM.render(<Survey.Survey model={survey} parameter={contextObj}/> ) Can this be achieved?

Serge T 5 years ago

Hello,

Do you want to make this object available for the all child components?
The parameter={contextObj} is unknown property for Survey component. This property will not be passed in the child components and this property .

Is it the common used technique to pass context object to react components? If we missed something in our design we'll be glad to fix it.

If I understand your scenario you need to change the date format (and other similar locale-based settings). As I wrote earlier the preferred way to pass it is to set up survey model accordingly.

Thanks, Serge
SurveyJS Team

JackalDota 5 years ago

Yes, I want this object available for all child components. I have added contextObj to the SurveyElementBase. Not sure if this is the right way though.
I am not certain on the commonly used technique but I am using it this way.
By the way, I am also looking for a way to change the number format. Let's say if the user has input 123456 in the control of type number, I might want to display it as 123,456 or 1,23,456. I tried changing this format using survey.getQuestionByValueName("QUESTION_NAME").displayValue = "123,456"; but it is not working as expected. How can I change the formatting for such controls?

Andrew Telnov 5 years ago

Hello,

I've created a separate ticket on your behalf (T2839: Change the question format). It has been placed in our processing queue and will be answered shortly.

Passing the context to SurveyJS from an existing React code

Answers approved by surveyjs Support

Recently viewed tickets