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

Hide a category in the Properties Grid


                        



const options = { showLogicTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );
                
//A black list of properties displayed in Logic categories for different survey elements
var propertyStopList = [
    "visibleIf",
    "enableIf",
    "requiredIf",
    "bindings",
    "defaultValueExpression",
    "columnsVisibleIf",
    "rowsVisibleIf",
    "hideIfChoicesEmpty",
    "choicesVisibleIf",
    "choicesEnableIf",
    "minValueExpression",
    "maxValueExpression",
    "calculatedValues",
    "triggers"
];

//Hide properties contained in the black list, show all other properties
creator
    .onShowingProperty
    .add(function (sender, options) {
        options.canShow = propertyStopList.indexOf(options.property.name) == -1;
    });
//Refresh survey and reset property grid to let it handle onShowingProperty event
creator.JSON = {};
                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hide a category in the Properties 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>
    <!-- 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-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>

This sample demonstrates how to handle the onShowingProperty event to hide all properties in the 'Logic' category and the 'Logic' category itself.

Currently, there is no single option to hide a category in the Properties grid for all survey elements (pages, panels, questions of different types). Actually, a category in the Properties grid hides automatically, if all its properties become hidden. So, to hide a category, you can iterate through all properties and hide those which belong to this category.

The definition of all question properties (together with the related categories/tabs) can be found in our sources, in the following file: questionEditorDefinition.ts

To hide the 'Logic' category, you can review the questionEditorDefinition.ts file and populate a stop-list array (propertyStopList in the sample code) with properties that contain 'tab: "logic"'. Then handle the Creator's onShowingProperty event and prevent the display of properties contained in the black list. As a result, the 'Logic' category hides automatically if it does not contain any property.

Dismiss

Tell us what you think

Help us serve you better by taking this brief
survey. We are interested to learn more about
your experience of using our libraries.

We'd really appreciate your feedback.

Approximate time to complete: 2 min.

Start the survey