Firstly thank you for allowing developers to trial your software before buying and for having an excellent open source library.
I've tried looking for examples online including many Plunker/StackBlitz links but none of them seem to help me, they all have examples of how a React component can be used in a Survey but not in Survey Creator, additionally the versions of Surveyjs and ReactJS differ in examples hence why I'm so confused.
The background is that I'm trying to test whether our company can use your software as a way to offer clients survey building using our own React question components with material-ui and Formik.
My efforts so far:
This is what I have in the React boiler plate SurveyCreator.js:
JavaScriptimport TestMuiTextAreaWidget from "./components/TestMuiTextAreaWidget";
SurveyKo.CustomWidgetCollection.Instance.addCustomWidget({
name: "testwidget",
title: "Test Widget",
isDefaultRender: true,
htmlTemplate: "",
widgetIsLoaded: function () {
return true;
},
isFit: function (question) {
return question.getType() \=== "testwidget";
},
activatedByChanged: function (activatedBy) {
SurveyKo.JsonObject.metaData.addClass("testwidget", \[\], null, "empty");
},
afterRender: function (question, element) {
return <TestMuiTextAreaWidget question\={ question } />
},
willUnmount: function (question, el) {
}
}, "customtype");
The React component :
JavaScriptimport { React, Component } from 'react';
import TextField from '@material-ui/core/TextField';
export default class TestMuiTextAreaWidget extends Component {
get question() {
return this.props.question;
}
render() {
if (!this.question) return null;
return (
<TextField variant\="outlined" id\="standard-basic" label\="Standard" defaultValue\={ this.question.text } />
);
}
}
However when I drag my widget onto a page in Survey Creator all I see is the title of the question and not any UI:
I'm also relatively new to ReactJS so please forgive me if I've missed something glaringly obvious!
Cheers and thank you
Hello,
Thank you for the interest in our products.
SurveyJS ecosystem contains:
survey-knockout
library.That's why if you want to implement a custom UI for survey in ReactJS and at the same time to use SurveyJS Creator as WYSIWYG editor, you need to symmetrically implement the same components set for
survey-knockout
. As alternatives you can use thesurvey-knockout
library in you ReactJS application aw well or allow to see the different UI in SurveyJS Creator.Please feel free to contact us in case of any further questions.
Thanks, Serge
SurveyJS Team
Hi Serge,
Thanks for your quick response and your clarifications. Is there an example of a ReactJS component being used with survey-knockout/SurveyCreator aside from the ones in your react-boiler plate? This is what I'm struggling to find.
Thanks for the help,
fab
Hello,
No we don't have such an example and don't support this scenario. To make it work with both platforms you can create a custom widget on VanillaJS. In this case it will work on both ReactJS and KnockoutJS platforms. Here is the repo with the custom widgets - https://github.com/surveyjs/widgets and here is the live sample of a custom widget - https://plnkr.co/edit/fUTjd8JcTFLxtr2tkTJf?p=preview&preview
Thanks, Serge
SurveyJS Team