Add a Modal Editor to the Property Grid

Survey elements come with a variety of built-in properties that cover most use cases. If you want to extend the available functionality, you can add custom properties to survey elements and implement custom property editors. This example demonstrates a custom editor that allows survey authors to configure properties in a pop-up dialog. To open the dialog, click the Set Access Rules button. The dialog features a dynamic table where you can add or remove access rules for the selected question.

Follow the steps below to configure a modal property editor for a custom property:

1. Add a custom property to a question type.
   Call the addProperty(className, propMeta) method on the Serializer object. className is the name of a base or derived class (see the getType() method description); propMeta is a JSON object with property settings.

2. Add an editor for the custom property.
   Register the property editor in the PropertyGridEditorCollection and specify a standard JSON object that the custom type should produce. For instance, in this demo, the custom editor is a Dynamic Matrix.

3. Define a survey JSON schema for the modal dialog.
   The modal dialog is built upon a regular SurveyJS survey. To specify the dialog's content, configure a survey JSON schema and use it to instantiate a SurveyModel object.

4. Add a button that opens the dialog to the editor title.
   Implement an onPropertyEditorUpdateTitleActions event handler. Within it, check that the event is raised for a required property and add an IAction configuration object to the options.titleActions array. This configuration object should include the action function.

5. Open the dialog on a button click.
   Call the global showModal method within the action function to open the custom dialog when users click the button. Use the method's parameters to specify a SurveyModel instance that represents the dialog's content and define handling functions for the Apply and Cancel buttons. When a user clicks Apply, retrieve values from the pop-up survey using its data property and assign them to the current question. Refer to the code listing for details.