Hi Team,
I have build one custom component(CameraStream) in react which work fine when run individually. When i am adding same jsx component(CameraStream) as widget(check code in attachment) in survey creator which add successfully, But when it render then render as a black question.
NOTE: afterRender is not call when i set htmlTemplate: <CameraStream Text='Yourself' />, afterRender is call when i set htmlTemplate: "<CameraStream Text='Yourself' />"
For reference i am attaching below files
- CameraStream component (this work individually).
- camerastreamwidget.js which is a custom widget.
- SurveyCreator.js
- screenshots of error
Hello,
Unfortunately you haven't share the
camerastreamwidget
code.import {initcamerastream} from "./components/widgets/camerastreamwidget";
Thanks, Serge
SurveyJS Team
Hello Serge T,
I have updated the attachment please check again. Thanks
Hello,
I've checked the
camerastreamwidget.txt
file you've provided. Unfortunately code inside this file is commented almost all and doesn't related to camera widget functionality.Thanks, Serge
SurveyJS Team
Hello Serge T,
I have clean the code of attachment(camerastreamwidget.txt) please check again. Thanks
Hello,
The
console.log('afterRender call'); var button = el.getElementsByTagName("button")[0]; button.innerText = question.buttonText; button.onclick = function () { question.value = el.getElementsByTagName("img")[0].src; }; var onValueChangedCallback = function () { el.getElementsByTagName("img")[0].src; }; question.valueChangedCallback = onValueChangedCallback; onValueChangedCallback();
code is copy/pasted from our sample https://plnkr.co/edit/HdnYE5?p=preview&preview and doesn't contain any code related to camera widget functionality.
That's why it doesn't work.
Thanks, Serge
SurveyJS Team
Hello Serge T,
Camera code has been written into separate file called CameraStream(refer attachment CameraStream.txt) component, which pass as htmlTemplate: <CameraStream Text='Yourself' />.
So, Kindly suggest how to pass react component which already working individually, but i want to pass that component to as a surveyjs control.
Hello,
Custom widgets are framework-indepoendent. In order to render a react component inside you need to use the "ReactDOM.render" function or write a custom widget in a vanilla JavaScript.
If you want to use a react component as a custom question type, you can check the https://github.com/surveyjs/surveyjs_react_quickstart/blob/master/src/MyQuestion.js file.
Thanks, Serge
SurveyJS Team
Hello,
Important note.
At this moment SurveyJS Creator works over the survey-knockout library. That's why if you want to widget to be available in creator you need to implement it in framework-agnostic way.
Thanks, Serge
SurveyJS Team