Dynamically hiding widget?

Hello Vlad !

To implement this solution you need to put in place two widget jsp override, taking into account a few things:

<![if !supportLists]>1.      <![endif]>To hide/show a widget dynamically what you have to do is to show/hide the div that wraps that widget. If the widget has id ‘****’ the wrapper div has id ‘widgetId-****’

<![if !supportLists]>2.      <![endif]>You need to put in place a widget jsp override for your checkbox where you attach to the checkbox extJS component a ‘change’ event listener, responsible for showing/hiding the textfield

<![if !supportLists]>3.      <![endif]>You need to put in place a widget jsp override for your text widget responsible for the initialization of the text widget visibility.

Let us see the details of what you have to do.

First of all you have to declare the widget jsp averided in your custom theme xml spring config file.

-------------------------------------------------------------- theme xml file -------------------------------------------------------------------------------------------------------------------------

<c:template key="vcm-widget-simpleselect:ContentInstance:myContentType:myCheckboxAttribute" path="/mywebapp/common/widget/mycheckbox.jsp"/>

<c:template key="vcm-widget-text:ContentInstance:myContentType:myTextAttribute" path="/mywebapp/common/widget/mytext.jsp"/>

--------------------------------------------------------------- mycheckbox.jsp -----------------------------------------------------------------------------------------------------------------------

<%@ include file="/content/common/widget/simpleselect.jsp"%>

<script type="text/javascript">

                vui.ready(function(){

                                //get the checkbox component

                                var checkboxCmp = vExt.getCmp(‘<%=fieldId’%>);

//set the change event listener
                checkboxCmp.on(‘change’, function(cmp, value){

var textWidgetAttributeName = ‘myTextAttr’;
                var textWidget = vui.vcm.ui.editor.tagform.findWidgetByAttributeName(vui.ui.editor.find(‘<%=editorId%>’, textWidgetAttributeName);

//hide the text widget when the checkbox is checked and viceversa
                vExt.DomHelper.applyStyles(vExt.get(textWidget.id + ‘-wrapper’), {display: value ? ‘block’ : ‘none’});

});

                });

</script>

-----------------------------------------------------------mytext.jsp -------------------------------------------------------------------------------------------------------------------------------------

<%@ include file="/content/common/widget/text.jsp"%>

<script type="text/javascript">

                vui.ready(function(){

var checkboxWidget = vui.vcm.ui.editor.tagform.findWidgetByAttributeName(vui.ui.editor.find(‘<%=editorId%>’, ‘myCheckboxAttr’);

//get the checkboxCmp widget

var checkboxCmp = vExt.getCmp(checkboxWidget.fieldId);

//initialize the visibility of the wrapperDiv

vExt.DomHelper.applyStyles(vExt.get( ‘<%=widgetId%>-wrapper’), {display: checkboxCmp.getValue() ? ‘block’ : ‘none’});

                });

</script>

That’s it

Ciao

Mario