Cart Licenses Contact Support Online Creator Login/Register
Try
Buy
v 1.9.31

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: "Which 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 do you like about our product?",
                        },
                        {
                            type: "comment",
                            name: "disappointed_experience",
                            visibleIf: "{nps_score} notempty",
                            title:
                                "What do you miss or find disappointing in your experience with our products?",
                        },
                    ],
                },
            ],
            showQuestionNumbers: "off",
        });
            };
            return params;
        }
    },
    template: propertyGridTemplate
});

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


const options = { showLogicTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
                creator.toolboxLocation = "right";
            
                
                    creator.render("creatorElement");
                

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Override the Property Grid&#39;s component, 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-core/survey.i18n.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-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-knockout/survey-creator-knockout.min.js"></script>
        <style>
            :root {
                --tab-min-height: 600px;
            }
        </style>
    <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>