Question T13607
Visible to All Users

Is there a way to have my custom component in the property tab?

created 2 years ago

I would like to add a property to store JSON type values and for which I'd like to implement my own JSON editor component. Is this possible?

Generally speaking to add a custom property with my own component in it.

Answers approved by surveyjs Support

created 2 years ago (modified 2 years ago)

Hello Brian,
You can add a custom property to a survey element and register a custom editor for this property. Please follow these steps:

  1. Add a custom property to a target survey element using the Serializer.addProperty function. Set a custom property's type to some custom type (e.g., jsonvalue) For more information on how to add custom properties to survey and its elements, check the following example: Add Custom Properties to the Property Grid.
  2. Implement a custom React/Angular JSON Editor component and register it as a survey question. A Property Grid is built on top of a survey instance, and property editors are actually survey question elements. Therefore, if you wish to use a custom component as a property grid editor, it is required to register a custom component as a survey question.
  3. Use the PropertyGridEditorCollection.register function to register a custom component as a property grid editor:

You can refer to the following demo: Integrate a 3rd-Party Color Picker Component. It shows how to register a custom backgroundColor property for a survey, and how to use the Color component as a custom property editor.

Should you have any questions or require further assistance, we are always here to help.