Question T15176
Visible to All Users

How do I add a modal with a custom editor for a property

created a year ago

Hi,

I have defined a custom widget for the editing the built in HTML type question and I would like for it to show up as a modal or a popup on the screen (like the default value popup for questions). Is there some way to achieve this?

I have tried

Code
Serializer.findProperty("html", "html").type = "value"

however it doesn't seem to have any effect. I suspect this is because I am registering the custom editor with a getJSON that is overriding the type set in the above fragment.

Code
getJSON: function (obj, prop, options) { if (obj instanceof Question) { return { type: "richtext", editorMode: obj.getPropertyValue("editorMode") || "nocode", enableToggle: true, maxHeight: "calc(75vh - 1em - 8em)", }; } },

Could you please help me out with this.

Thanks a lot!

Comments (2)

    Hello Suhrid,
    You can register a custom editor which would appear within a Property Grid: as it's shown in this demo. Will this option work for you?
    Also, to help me consider the best option, please specify your JavaScript development platform.

    Thanks

    SM SM
    Suhrid Mulay a year ago

      Hi,

      While this does add a custom property, It'd be great if we could arrange for the property editor to pop up in a dialog box. (like it does for default value and some other properties currently).

      I am currently building on a Webpack based node setup using SurveyJS and React.

      Thanks
      Regards
      Suhrid Mulay

      Answers approved by surveyjs Support

      created a year ago

      Hello Suhrid,
      Thank you for the clarification. Unfortunately, there is no built-in option to invoke editors within popup windows. Except certain properties, all property editors appear inline within the property grid/design surface.
      However, if you wish to activate a modal, you can try to handle this programmatically. Use the creator.onPropertyEditorUpdateTitleActions function and register a custom action which would appear within a property grid editor.
      Please refer to the following demo: View CodeSandbox.It shows how to register a custom 'Show Modal' action for a question's visibleIf property. The custom action which activates a modal popup where users can enter a property value. You can modify this code and place a custom editor within the popup.

      Should you have any questions or require further assistance, please let us know.

      Thanks