Question T15094
Visible to All Users

Update multiple properties from a single widget

created a year ago (modified a year ago)

Hi,

I was trying to include a custom rich text editor for the HTML question in SurveyJS. The end goal being allowing users to use rich text editor for simple HTML tasks and a code based editor for the more complex ones.

To achieve this I introduced a property editorMode to the HTML question and depending on what it was set to the editor would display either a full fledged rich text editor or a code editor. I also gave the rich text editor widget, the ability to control this property via

i. setting it directly on the question object being passed
ii. setting it via the question.setPropertyValue method

However I notice that neither of those seem to be working. Is there some thing I am missing here?

JavaScript
// registerEditor.js const widget = { // ...name, icon etc. init() { Form.Serializer.addProperty(widgetName, { name: "editorMode", displayName: "Which editor to display", type: "string", choices: [ {value: "html", text: "HTML Editor"}, {value: "rich", text: "Rich Text Editor"} ], default: "rich", category: "general", }) } afterRender(q, el) { ReactDOM.render( // The text editor is supposed to have controls to set the html content as well as an extra property editorMode // which determines whether the editor renders a rich text editor or a code editor // however the toggle for the mode doesn't seem to be persisting in the serialised form JSON <MyTextEditor question={question} intitialValues={} /> ) } }
JavaScript
// MyTextEditor.js inside the editor react component const setMode = (newModeString) => { question.setPropertyValue("editorMode", newModeString); question.editorMode = newModeString; _setMode(newModeString); };

To attempt to get around this I tried setting the editorMode property from the property grid, however on doing so I realised that on trying to update the editorMode (from the property grid), while it would be updated in the question JSON but it wouldn't show up in the react component in spite of me attaching event handlers with question.registerFunctionOnPropertyValueChanged

I am wondering what I am doing wrong here and how do I achieve what I am looking out for.

Answers approved by surveyjs Support

created a year ago

Hello,
Thank you for reaching out to us. Custom widgets integration is a legacy option for those who running Knockout/jQuery apps. A custom widget is nothing but overriding the HTML structure of a target survey question. It's important to note that custom widgets do not integrate well with a modern Survey Creator component.

From what I gather, you are running a Survey Creator for React and your MyTextEditor is a React component. If you wish to integrate a third-party React component within a SurveyJS Form Library and Creator, please consider extending a question's model and renderer and implement a custom Editor. For more information on this option, refer to the following guide: Integrate Third-Party React Components.
With the custom question type and renderer, you can implement a fully-fledged custom question which performs as expected both in design and preview mode.

Should you have any further questions, please let me know.

    Other Answers

    created a year ago

    Hi,

    I did manage to resolve the issue by adding a toggle for the property I wanted editable and refreshing the property grid (by selecting the survey and then the target element in quick succession) once it was edited.

    Thanks

      Comments (1)

        Hello Suhrid,
        Thank you for the update. I'm happy to hear that you managed to achieve your goal. Please feel free to contact us if you have any further questions.