Question T4577
Visible to All Users

Configuring MyQuestion.js or finding another way to implement a React component as a custom widget in Survey Creator (in provided React boilerplate)

created 5 years ago

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:

JavaScript
import 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 :

JavaScript
import { 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:
Screenshot (11).png

I'm also relatively new to ReactJS so please forgive me if I've missed something glaringly obvious!

Cheers and thank you

Comments (3)

    Hello,

    Thank you for the interest in our products.

    SurveyJS ecosystem contains:

    • SurveyJS Library - it's a survey runner tool. SurveyJS Library supports 5 platforms - jQuery, Angular 2+, KnockoutJS, ReactJS and VueJS. In order to create a survey you need to describe it via JSON containing pages, questions, and their settings - titles, names, expressions and so on. This JSON can be created manually.
    • SurveyJS Creator - the tool allowing you to create survey JSON in form of WYSIWYG editor. But SurveyJS Creator is based upon the 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 the survey-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,

        Is there an example of a ReactJS component being used with survey-knockout/SurveyCreator aside from the ones in your react-boiler plate?

        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

        Answers

        created 5 years ago

        Thanks for you support!

        We will try our best to explore ways we can use it.

        fab