surveyjs/surveyjs_react_quickstart

Implement customisations to Properties/Questions

joshreid opened this issue · 3 comments

I'm having difficulty implementing customisations as per the docs - may be react usage specific?
http://editor.surveyjs.io/examples/questioneditor.html#code

Could you let me know if there's something I'm missing or how to implement in the following case?

Survey is not referenced elsewhere in this file - is it used internally by SurveyJSEditor?

Thanks in advance.

let editorOptions = { showEmbededSurveyTab: false, showJSONEditorTab:true, questionTypes:[ 'text', 'checkbox', 'radiogroup', 'dropdown', 'multipletext' ] }

// These make no difference to the editor...

//Add a tag property to all questions
Survey.JsonObject.metaData.addProperty("questionbase", "tag");

// Change the order of name and title properties, remove the startWithNewLine property and add a tag property
SurveyJSEditor.SurveyQuestionEditorDefinition.definition["questionbase"].properties = 
["title", "name", {name: "tag", title: "Tag"}, {name: "visible", category: "checks"}, {name: "isRequired", category: "checks"}];

// make visibleIf tab the second after general for all questions
SurveyJSEditor.SurveyQuestionEditorDefinition.definition["questionbase"].tabs = [{name: "visibleIf", index: 1}];

// Instantiate Editor
this.editor = new SurveyJSEditor.SurveyEditor('surveyEditorContainer', editorOptions)

// This does work as it should...
    this.editor.onCanShowProperty.add(function(sender, options){
      if(options.obj.getType() === 'survey') {
        options.canShow = options.property.name === 'title'
      }
      if(options.obj.getType() === 'page') {
        // Hide these options
        options.canShow = [ 'navigationButtonsVisibility', 'width' ].indexOf(options.property.name) < 0
      }
    })

You need just add import directive in the https://github.com/surveyjs/surveyjs_react_quickstart/blob/master/src/SurveyEditor.js file to access Survey:

import * as Survey from 'survey-knockout';

Then you can use Survey for settings:

Survey.JsonObject.metaData.addProperty("questionbase", "tag");

Note, that Survey JS editor is using KnockoutJS platform of the SurveyJS library. That's why I wrote import from 'survey-knockout'.

Yes, Survey is used internally by Survey JS editor.

Ah that was why - I was importing Survey from 'survey-react' as per the implementation in app.js - https://github.com/surveyjs/surveyjs_react_quickstart/blob/master/src/App.js

Thanks this is working as expected now.

I was trying to customize questions/properties in react-surveyjs editor.
I required survey-knockout package.But now I am getting this error.

Uncaught Error: Component survey is already registered
    at Object.ko.components.register (knockout.ts:60)
    at Object.<anonymous> (knockout.ts:60)
    at __webpack_require__ (knockout.ts:60)
    at Object.<anonymous> (knockout.ts:60)
    at __webpack_require__ (knockout.ts:60)
    at __webpack_exports__.b (knockout.ts:60)
    at knockout.ts:60
    at webpackUniversalModuleDefinition (knockout.ts:60)
    at Object.<anonymous> (knockout.ts:60)
    at __webpack_require__ (bootstrap 23ee73db2ae19b465b9b:9)

I guess this issue is because of conflict between survey-react and survey-knockout packages.
Could you let me know how to use both of them in single App.