Cart Buy Licenses Contact Integrate into App Docs Support Login/Register
v 1.9.6
v 1.9.6
Overview Survey Creator Survey Creator V2 Examples Docs Source

Override the Property Grid's component

This example demonstrates how to override the SurveyJS Creator's default component designed to render the Property Grid.


                        

//=====================================
// ! Demo-related code part - START
//-------------------------------------
const propertyGridTemplate = "<div data-bind='style:rootStyle'><img src='https://avatars.githubusercontent.com/u/25198306?s=200&amp;v=4' width='80px' height='80px'></img><div data-bind='style:btnsStyle'><button data-bind='click: btnClearClick, style: btnStyle'>Clear Survey</button><button data-bind='click: btnNPSClick, style: btnStyle'>Load NPS Survey</button></div></div><!-- ko template: { name: 'survey-content', data: model.survey  } --><!-- /ko -->";
ko.components.unregister("svc-property-grid");
ko.components.register("svc-property-grid", {
    viewModel: {
        createViewModel: (params, componentInfo) => {
            const subscrib = ko.computed(() => {
                const model = ko.unwrap(params.model);
                new SurveyKnockout.ImplementorBase(model);
            });
            ko
                .utils
                .domNodeDisposal
                .addDisposeCallback(componentInfo.element, () => {
                    subscrib.dispose();
                });
            params.btnStyle = {
                width: "100%",
                "min-height": "32px",
                "marginRight": '7px',
                "marginBottom": '7px',

            };
            params.rootStyle = { width: '100%', display: 'flex', padding: '5px' };
            params.btnsStyle = { flex: '100%', padding: '5px' };
            params.btnClearClick = () => {
                setCreatorJSON(params.model.creator, {});
            };
            params.btnNPSClick = () => {
                setCreatorJSON(params.model.creator, {
            completedHtml:
                "<h3>Thank you for your feedback.</h3><h5>Your thoughts and ideas will help us to create a great product!</h5>",
            completedHtmlOnCondition: [
                {
                    expression: "{nps_score} > 8",
                    html:
                        "<h3>Thank you for your feedback.</h3><h5>We glad that you love our product. Your ideas and suggestions will help us to make our product even better!</h5>",
                },
                {
                    expression: "{nps_score} < 7",
                    html: "<h3>Thank you for your feedback.</h3><h5> We are glad that you share with us your ideas.We highly value all suggestions from our customers. We do our best to improve the product and reach your expectation.</h5>",
                },
            ],
            pages: [
                {
                    name: "page1",
                    elements: [
                        {
                            type: "rating",
                            name: "nps_score",
                            title:
                                "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
                            isRequired: true,
                            rateMin: 0,
                            rateMax: 10,
                            minRateDescription: "(Most unlikely)",
                            maxRateDescription: "(Most likely)",
                        },
                        {
                            type: "checkbox",
                            name: "promoter_features",
                            visibleIf: "{nps_score} >= 9",
                            title: "What features do you value the most?",
                            isRequired: true,
                            validators: [
                                {
                                    type: "answercount",
                                    text: "Please select two features maximum.",
                                    maxCount: 2,
                                },
                            ],
                            hasOther: true,
                            choices: [
                                "Performance",
                                "Stability",
                                "User Interface",
                                "Complete Functionality",
                            ],
                            otherText: "Other feature:",
                            colCount: 2,
                        },
                        {
                            type: "comment",
                            name: "passive_experience",
                            visibleIf: "{nps_score} > 6  and {nps_score} < 9",
                            title: "What is the primary reason for your score?",
                        },
                        {
                            type: "comment",
                            name: "disappointed_experience",
                            visibleIf: "{nps_score} notempty",
                            title:
                                "What do you miss and what was disappointing in your experience with us?",
                        },
                    ],
                },
            ],
            showQuestionNumbers: "off",
        });
            };
            return params;
        }
    },
    template: propertyGridTemplate
});

function setCreatorJSON(creator, json) {
    creator.JSON = json;
}
//-------------------------------------
// ! Demo-related code part - END
//=====================================

            
                let options = {
                // showTestSurveyTab: false,
                // showJSONEditorTab: false
                showLogicTab: true,
                //showTranslationTab: true,
                //showEmbeddedSurveyTab: true,
                };
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    creator.render("creatorElement");
                

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>This example demonstrates how to override the SurveyJS Creator&#39;s default component designed to render the Property Grid., Survey Creator Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-knockout-ui/survey-knockout-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>
    <!-- Uncomment to enable Select2
    <script src="https://unpkg.com/jquery"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    -->
        <script src="/DevBuilds/survey-creator-knockout/survey-creator-knockout.min.js"></script>
        <link href="/DevBuilds/survey-creator-knockout/survey-creator-knockout.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

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

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

</body>
</html>