Question T16012
Visible to All Users

Hide custom property on drag into dynamic panel

created a year ago

Hi -

We have a custom property that only applies to text fields. By default, the property is visible. We've added code to hide that property if the text field is added to or already exists in a paneldynamic. However, we also want to dynamically hide the property if the text field is dragged into a paneldynamic.

We've added handling to the onDragEnd event handler that is able to identify when a text field is dropped into a paneldynamic, but setting the property's visible attribute to false is not dynamically hiding the property for the dragged text question.

The way we are adding the custom property is this:

Code
SurveyCreator.PropertyGridEditorCollection.register ({ fit : function (property) { return property.type == 'customdropdown'; }, getJSON : function (object, property, options) { return { type : 'dropdown', choices : choices }; } }); const populateProperty = Survey.Serializer.addProperty ("text", { "name" : "populateWithProfileField", "type" : "customdropdown", "category" : "general", "visible" : true, "choices" : choices, visibleIndex : -1, onSetValue : function (surveyElement, value) { // custom code } });

The handling for hiding the property when the text field is added to a paneldynamic or is already in a paneldynamic is in the onShowingProperty event handler:

Code
function (_, creatorOptions) { const name = creatorOptions.property.name; const type = creatorOptions.obj.getType(); const parent = creatorOptions.obj.parent; if (type == 'text' && name == 'populateWithProfileField' && parent && parent.parentQuestion && parent.parentQuestion.getType() == 'paneldynamic') { // text fields inside dynamic panels cannot be profile fields creatorOptions.canShow = false; } }

the onDrag handling (which doesn't dynamically hide the property) is here:

Code
onDragEnd : function (sender, options) { var draggedElement = options.draggedElement; var toElement = options.toElement; var component; if (draggedElement.getType() == 'text') { var property = draggedElement.getPropertyByName ('populateWithProfileField'); if (property) { if (toElement.parentQuestion && toElement.parentQuestion && toElement.parentQuestion.getType () == 'paneldynamic') { property.visible = false; } else { property.visible = true; } } } },

What do we need to do in order to dynamically hide the property upon dragEnd?

Thanks!

Pam

Answers approved by surveyjs Support

created a year ago

Hello Pam,
You can use visibleIf property attribute. It can be as simple as this:

JavaScript
const populateProperty = Survey.Serializer.addProperty ("text", {        "name" : "populateWithProfileField",        "category" : "general",        "visibleIndex" : 3,        "visibleIf"(obj) => {          if(!obj || !obj.parent) return true; //parentQuestion is not null when a question is inside a panel dynamic or a matrix          return !obj.parentQuestion;        }    });

Thank you,
Andrew
SurveyJS Team