Question T13238
Visible to All Users

Make condition edit text area view only for visibleIf property

created 2 years ago (modified 2 years ago)

We would like to force our users to use the condition pop up dialog to edit the visibility of a question and not have the ability to manually type in the conditional expression. This is due to training; we've found the manual editor to be daunting whereas the pop up dialog is much simpler to understand. I know the manual editor allows for more complex expressions but the conditions for our use case are simple enough to be covered by the pop up dialog.

I tried the allowEditExpressionsInTextEditor: false option and it disables editing the conditions entirely (which disables the button that opens the popup). Calling Survey.Serializer.getProperty("question", "visibleIf").readOnly = true has the same result.

Thank you!

Answers approved by surveyjs Support

created 2 years ago (modified 2 years ago)

Hello,
The allowEditExpressionsInTextEditor property disables expression property editors in the Property Grid and the Manual Entry option in the Logic tab. You can set it to false to prevent users from manually typing expressions.

JavaScript
const options = { showLogicTab: true, allowEditExpressionsInTextEditor:false }; const creator = new SurveyCreator.SurveyCreator(options);

If you wish to prevent users from entering the text to the visibleIf and other expressions, I would recommend that you hide the Logic category in Property Grid. Now, users can proceed configuring logic expressions in the Logic tab using the UI elements only.

JavaScript
const options = { showLogicTab: true, allowEditExpressionsInTextEditor:false }; const creator = new SurveyCreator.SurveyCreator(options); const propertyStopList = [ "visibleIf", "enableIf", "requiredIf" ]; creator.onShowingProperty .add(function (sender, options) { options.canShow = propertyStopList.indexOf(options.property.name) == -1; });

Example

Please let me know if you have any questions or require further assistance.

    Comments (2)

      We'd like the users to be able to edit the logic via the question side panel, not in the logic tab (we have the logic tab disabled). We want the visibleIf property to be editable, just not the text field. That means they would have to use the button to edit (circled below) Screenshot 2023-05-... at 12.16.18 PM.png

        Hello,
        The easy solution that came into my mind is to disable editing via CSS. Property Grid is a survey, so we need to use survey.onUpdateQuestionCssClasses event to update a question css. Here is an undocumented trick. Questions instances in "property grid" survey has read-only "property" property that you can use. You need properties with type equals to "condition".
        To get property grid survey instance you need to use creator.onSurveyInstanceCreated event.
        Here is the code snip and an example.

        JavaScript
        creator.onSurveyInstanceCreated.add((sender, options) => {   if(options.reason === "property-grid") {     options.survey.onUpdateQuestionCssClasses.add((sender, options) => {       const prop = options.question.property;       if(!!prop && prop.type === "condition") {         options.cssClasses.mainRoot += " textarea-readonly";         console.log(JSON.stringify(options.cssClasses, null3));       }     });   } });

        Thank you,
        Andrew
        SurveyJS Team