Add Custom Properties to the Property Grid


                        

// Add a property to the Survey class
Survey.Serializer.addProperty("survey", {
    name: "customSurveyProperty",
    category: "general",
    visibleIndex: 0
});
// Add a property to the Page class
Survey.Serializer.addProperty("page", {
    name: "customPageProperty",
    category: "general",
    visibleIndex: 0
});
// Add a property to the base Question class and to all questions as a result
Survey.Serializer.addProperty("question", {
    name: "customNumericProperty",
    type: "number",
    category: "general",
    default: 1,
    visibleIndex: 0,
    onSetValue: (survey, value) => {
        // ...
        // You can perform required checks or modify the `value` here
        // ...
        // Set the `value`
        survey.setPropertyValue("customNumericProperty", value);
        // You can perform required actions after the `value` is set
        // ...
    }
});

const options = { showLogicTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );
                
creator.JSON = {
 "logoPosition": "right",
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "text",
     "name": "question1"
    }
   ]
  }
 ]
}
creator.showSidebar = true;
                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add Custom Properties to the Property Grid | Survey Creator Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.min.js"></script>
        <link href="/DevBuilds/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet" />
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.i18n.min.js"></script>
        <script src="/DevBuilds/survey-creator-react/survey-creator-react.min.js"></script>
        <style>
            :root {
                --tab-min-height: 600px;
            }
        </style>
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>
</div>

<script type="text/babel" src="./index.js"></script>

</body>
</html>
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.

Survey elements include a number of built-in properties that cover most use cases. However, you can add custom properties to the survey elements if you want to extend their functionality. Custom properties can be serialized and included in the survey JSON schema. Both built-in and custom properties are set in the Property Grid of Survey Creator.

To add a custom property, call the addProperty(questionType, propertySettings) method on the Survey.Serializer object. This method accepts the following arguments:

  • questionType
    A string value that specifies the question type to which the property should be added. You can use a specific type (see the getType description) or one of the base types. In the latter case, the new property is added to all question types derived from the base type. Refer to the API of a specific question type for information on its inheritance chain.

  • propertySettings
    Settings that configure the property's appearance and behavior. For information about these settings, refer to the following help section: Survey Element Property Settings.

This demo shows how to add custom properties to the survey, page, and all questions.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.