Adding a React component to a Custom Component's Property Grid

michal

created 2 years ago

Hello.

I can see from Override the Property Grid's component, Survey Creator Example (surveyjs.io) that it's possible to register a React component in the property grid with

JavaScript
SurveyReact
  .ReactElementFactory
  .Instance
  .registerElement("svc-property-grid", (props) => {
    return React.createElement(CustomPropertyGridWrapper, props);
  });

Now, I want to create a CustomPropertyGridWrapper but display it only when my custom component is active. I have added my custom component using this as a template surveyjs_react_quickstart/MyQuestion.js at master · surveyjs/surveyjs_react_quickstart · GitHub

Answers approved by surveyjs Support

Jane

created 2 years ago (modified 2 years ago)

Hello Michal,
I recalled this usage scenario and updated the code shared initially to demonstrate how to use a custom Test React component as a property editor. The idea is to override a default renderer for a standard question type (the dropdown in our case):

JavaScript
ReactQuestionFactory.Instance.registerQuestion(
  "sv-fileupload-react",
  (props) => {
    return React.createElement(Test, props);
  }
);
RendererFactory.Instance.registerRenderer(
  "dropdown",
  "my-custom-component",
  "sv-fileupload-react"
);

Now, you can declare a property of a custom file-upload type:

JavaScript
Survey.Serializer.addProperty("question", {
  name: "Test",
  type: "fileupload",
  isRequired: false,
  category: "general",
  visibleIndex: 1
});

And register a custom property grid editor for this custom property. In the getJson function, return a dropdown question type and specify a custom renderer:

JavaScript
PropertyGridEditorCollection.register({
  fit: function (prop) {
    return prop.type === "fileupload";
  },
  getJSON: function (obj, prop, options) {
    return {
      type: "dropdown",
      renderAs: "my-custom-component"
    };
  }
});

Example.

I hope this example will be of help. Should you have any questions or require further assistance, drop us a line.

Thanks

Clipboard-File-1.png

Serge T

created 2 years ago

Hello,

You can register an alternative renderer as shown in this live example on our site - https://surveyjs.io/form-library/examples/custom-widget-react-select/reactjs#content-js
and set it for your custom editor:

JavaScript
SurveyCreator.PropertyGridEditorCollection.register({
  fit: function (prop) {
    return prop.type === "fileupload";
  },
  getJSON: function (obj, prop, options) {
    return {
        type: "text", 
        renderAs: "my-custom-file"
    }
  }
});

Thanks, Serge
SurveyJS Team

Show previous comments (5)

michal 2 years ago

Thanks Serge.

I am trying to register a custom renderer (my react component called Test) but I can't get it to work.

Im not sure if these are the correct imports:

JavaScript
import { RendererFactory } from 'survey-react';
import { ReactQuestionFactory } from 'survey-react';
import { PropertyGridEditorCollection } from 'survey-creator-react';

registering a custom renderer

JavaScript
ReactQuestionFactory.Instance.registerQuestion('sv-fileupload-react', props => {
  return React.createElement(Test, props);
});

RendererFactory.Instance.registerRenderer('fileupload', 'my-custom-component', 'sv-fileupload-react');

adding a custom property to the property grid

JavaScript
Survey.Serializer.addProperty('myquestion', {
  name: 'Test',
  type: 'fileupload',
  isRequired: false,
  category: 'general',
  visibleIndex: 1,
  renderAs: 'my-custom-component',
});

and then setting the renderer to be used

JavaScript
PropertyGridEditorCollection.register({
  fit: function (prop) {
    return prop.type === 'fileupload';
  },
  getJSON: function (obj, prop, options) {
    return {
      type: 'text',
      renderAs: 'my-custom-component',
    };
  },
});

but this renders the Test as a text input.

When I change the type from 'text' to 'fileupload' in the getJSON: it won't even render the Test property.

Thank your time and help.

test_textbox.PNG

Jane 2 years ago

Hello,
Please update the import section as follows:

JavaScript
import { RendererFactory } from "survey-core";
import { ReactQuestionFactory } from "survey-react-ui";

You can research a React application of the above demo at https://codesandbox.io/s/boring-clarke-wr0shi.

Please let us know if it helps.

michal 2 years ago

I appreciate your answer Jane.

I've updated my imports. I'd like to achieve the same thing (register a custom renderer but for a custom property in the Property Grid).

Please see my demo at: quirky-ganguly-drjtds - CodeSandbox

If you change line 63 in SurveyCreator.jsx from "fileupload" to "text" the Test component will appear under general in the Property Grid.

however, when I change the type back to "fileupload" the Test disappears although I am expecting to see what's in the Test.jsx, a paragraph saying "Hello from Test".

Please let me know if that makes sense or if I'd like me to rephrase. Thank you.

type_text.PNG

Serge T 2 years ago

Hello,

Change "text" to "file" is not enough. You need also set inputType: "file" property (if you want to show file input).
If you want to use a custom renderer, you need to register your custom component.

Thanks, Serge
SurveyJS Team

michal 2 years ago

Thanks Serge.

Please note I don't want to display the built-in file upload but my React component (Test.jsx).

Could you please take a look at my demo: quirky-ganguly-drjtds - CodeSandbox

In lines 35 and 42 in SurveyCreator.jsx Im registering my custom renderer, however the rendered is not used when I set it:

JavaScript
getJSON: function (obj, prop, options) {
    return {
      type: "fileupload",
      renderAs: "my-custom-component"
    };
  }

Jane 2 years ago

Hello Michal,
I've updated your example and registered a custom fileupload class. Please check the sample: https://codesandbox.io/s/distracted-microservice-t1vs2r?file=/src/SurveyCreator.jsx.

Let me know if it works for you.

michal 2 years ago

Thanks Jane. That's exactly what I needed! Cheers

Jane 2 years ago

You're very welcome!
Please feel free to contact us if you have any questions or require further assistance.

If you have free time, we would love if you could leave your feedback on SurveyJS page at g2.com. As we’re building our business, every review helps build credibility for future customers and your feedback would be greatly appreciated.

Thank you

Adding a React component to a Custom Component's Property Grid

Answers approved by surveyjs Support

Recently viewed tickets