Dynamically hiding widget?

Hello, I wonder if anyone has ideas/experience for a couple of scenarios:

1. On a COE (Content Object Editor) we need to have checkbox. When it is selected the "text" input field would get displayed (hidden originally). When saving Content Item this text input field will be auto populated (for example in a listener) and checkbox needs to become hidden. I would think this might be two separate widgets. Does anybody know about this hiding/unhiding possibilities?

If above is too complicated, more general question:

2. Can attribute on COE be hidden dynamically (i.e. within listener or some other piece of code) within content item based on some value in another attribute?

Thank you,

Vlad

Find more posts tagged with

Comments

Rajesh_Karuturi

For point- 2, What is stopping you to use Hidden or Hidden CCE widget?

From: eLink Entry: Discussion Group - Web Experience Management [mailto:v7webcontentmanagement@elinkkc.opentext.com]
Sent: Friday, February 10, 2017 6:41 AM
To: eLink Recipient
Subject: Dynamically hiding widget?

Dynamically hiding widget?

Posted by Polonskiy, Vladislav On 02/09/2017 08:05 PM

Hello, I wonder if anyone has ideas/experience for a couple of scenarios:

If above is too complicated, more general question:

2. Can attribute on COE be hidden dynamically (i.e. within listener or some other piece of code) within content item based on some value in another attribute?

Thank you,

Vlad

[To post a comment, use the normal reply function]
Forum:	Discussion Group - Web Experience Management
Content Server:	Knowledge Center CS16

Mario_DAnna

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"%>

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"%>

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

From: eLink Entry: Discussion Group - Web Experience Management [mailto:v7webcontentmanagement@elinkkc.opentext.com]
Sent: venerdì 10 febbraio 2017 02:11
To: eLink Recipient
Subject: Dynamically hiding widget?

Dynamically hiding widget?

Posted by Polonskiy, Vladislav On 02/09/2017 08:05 PM

Hello, I wonder if anyone has ideas/experience for a couple of scenarios:

If above is too complicated, more general question:

2. Can attribute on COE be hidden dynamically (i.e. within listener or some other piece of code) within content item based on some value in another attribute?

Thank you,

Vlad

[To post a comment, use the normal reply function]
Forum:	Discussion Group - Web Experience Management
Content Server:	Knowledge Center CS16

Vladislav_Polonskiy

For point- 2, What is stopping you to use Hidden or Hidden CCE widget?

We don't want it to be hidden all the time but only based on a value in another widget (i.e. only if certain text field attribute has value, hide this checkbox)

Vladislav_Polonskiy

Thank you Mario, we'll take a look at that suggestion. Vlad