V8 Presentation tab widget config - onChange function

Hello,

In V7 we were able to set an onChange function on a Text Field CCE to auto fill another Text Field CCE. In V8 I am currently just printing out an alert mesage to see if the javascript runs. It appears that the onChange javascript will run if using the V7 style editor for the CTD. It does not appear to run when using the V8 style editor. Has anyone been able to use the onChange event with the V8 style editor, if so, any thoughts or tips? Thanks in advance!

Heather

Find more posts tagged with

Comments

GangiReddy_Nandyala

To work onChange functionality in V8 UI, you need customize the widget theme(custom JSP), and you can add the “onchange” funationality in the custom JSP.

You can configure different events in listeners: section.

I did for my listSelect widget.

var config = {

id: '<%= fieldId%>',

name: '<%= fieldId%>',

valueField: 'selectionValue',

displayField: 'selectionName',

store: listSelectStore,

readOnly: readOnly,

listeners: {

'select' : {

fn: function(){

if(listSelectField.getValue()!= ''){

var typeLabelField = ciEditor.widgets['.'+ciEditor.typeXmlName+'.TYPELABEL'].fieldId;

vExt.getCmp(typeLabelField).setValue(listSelectField.getValue());

}

Thanks & Regards,

Gangi Reddy Nandyala
Consultant-Technology

Phone: +91 40 4452 8000Ext: 63105 | Mobile: +91 9849789364

VOIP - 7681 -US Mobile: 781 - 530 - 8472

From: eLink Entry: Discussion Group - Web Experience Management [mailto:v7webcontentmanagement@elinkkc.opentext.com]
Sent: Wednesday, October 12, 2011 12:09 PM
To: eLink Recipient
Subject: V8 Presentation tab widget config - onChange function

V8 Presentation tab widget config - onChange function

Posted byheather.lendway@securian.com (Lendway, Heather) On 2011/10/12 12:03

Hello,

Heather

[To post a comment, use the normal reply function]
Forum:	Discussion Group - Web Experience Management
Livelink Server:	knowledge-wlweb01

Virtusa was recently ranked and featured in 2011 Global Services 100, 2010Deloitte Technology Fast 500, 2010 FinTech 100 and IAOP's 2010 GlobalOutsourcing 100 sub-list among others.---------------------------------------------------------------------------------------------This message, including any attachments,contains confidential informationintended for a specific individual and purpose,and is intended for the addresseeonly. Any unauthorized disclosure, use,dissemination, copying, or distribution ofthis message or any of its attachments or the information contained in this e-mail,or the taking of any action based on it, is strictly prohibited. If you are not theintended recipient, please notify the sender immediately by return e-mail anddelete this message.---------------------------------------------------------------------------------------------

I just read that V8 style editors will ignore the Presentation Tab within a widget, so where else can you specify this custom jsp for the widget?

Quoted gangireddyn@virtusa.com on 2011-12-09 12:41:

To work onChange functionality in V8 UI, you need customize the widget theme(custom JSP), and you can add the “onchange” funationality in the custom JSP.

You can configure different events in listeners: section.

I did for my listSelect widget.

var config = {

id: '<%= fieldId%>',

name: '<%= fieldId%>',

valueField: 'selectionValue',

displayField: 'selectionName',

store: listSelectStore,

readOnly: readOnly,

listeners: {

'select' : {

fn: function(){

if(listSelectField.getValue()!= ''){

var typeLabelField = ciEditor.widgets['.'+ciEditor.typeXmlName+'.TYPELABEL'].fieldId;

vExt.getCmp(typeLabelField).setValue(listSelectField.getValue());

}

Thanks & Regards,

Gangi Reddy Nandyala
Consultant-Technology

Phone: +91 40 4452 8000 Ext: 63105 | Mobile: +91 9849789364

VOIP - 7681 - US Mobile: 781 - 530 - 8472

V8 Presentation tab widget config - onChange function

Posted by heather.lendway@securian.com (Lendway, Heather) On 2011/10/12 12:03

Hello,

Heather

[To post a comment, use the normal reply function]
Forum:	Discussion Group - Web Experience Management
Livelink Server:	knowledge-wlweb01

Virtusa was recently ranked and featured in 2011 Global Services 100, 2010Deloitte Technology Fast 500, 2010 FinTech 100 and IAOP's 2010 GlobalOutsourcing 100 sub-list among others.---------------------------------------------------------------------------------------------This message, including any attachments,contains confidential informationintended for a specific individual and purpose,and is intended for the addresseeonly. Any unauthorized disclosure, use,dissemination, copying, or distribution ofthis message or any of its attachments or the information contained in this e-mail,or the taking of any action based on it, is strictly prohibited. If you are not theintended recipient, please notify the sender immediately by return e-mail anddelete this message.---------------------------------------------------------------------------------------------

Jeff Chan

I wasn't able to add an onChange listener as Gangi described for some reasons. But I'm able to setup an onChange listener by doing these
1. in the custom theme create xml, modified the vcm-widget-objectselect template
  <c:template key="vcm-widget-objectselect" path="/custom-ui/common/widget/override/rel-objectselect-targetci.jsp"/>
  also add a custom js lib to the theme.
  <c:javascript>
   <c:resource path="/custom-ui/script/vcm/ui/custom-ui.js"/>
  </c:javascript>

2. in the rel-objectselect-targetci.jsp
<%@ include file="../objectselect.jsp"%>
<script type="text/javascript">
vui.ready(function(){
var objectselect = vExt.getCmp("<%=fieldId%>");
objectselect.addListener('change', vui.vcm.ui.editor.linkform.reltoggletargetci);
})
</script>

3. in the custom-ui.js
vui.vcm.ui.editor.linkform.reltoggletargetci = function(el) {
var value = el.getValue() || "";
var tf = vui.vcm.ui.editor.tagform;
var lf = vui.vcm.ui.editor.linkform;
var editorId = tf.findEditorIdForComponent(el.id);
if(editorId){
lf.updatesections(editorId);
}
}

Srinivasa_Rao_Nalluri

I can do what the Jeff said above. But what configuration change should I make to the CTD? I don't understand how this listener works on onChange. My requirement is I need to do some validation onChange in 'Content Relator CCE'.

Quoted jeff.c.chan@wellsfargo.com on 2012-08-06 17:43:

Jeff Chan

Our content types have sections and related item attribute. The related item attribute allows setting links to other content item and optionally to a section within a content item. Therefore, the function spec is that on selected a content item from the related item widget, the widget will populate sections that being related item may have for user to select a section.

In our wellsfargo-rel-themes-extend.xml, have to define these 2 custom jsps.

<c:template key="vcm-widget-objectselect:Relation:*:WF-CCG-BASIC-RESOURCE-content-id" path="/wellsfargo-rel-ui/common/widget/override/objectselect-wellsfargo.jsp"/>
<c:template key="vcm-widget-listselect:Relation:*:WF-CCG-BASIC-RESOURCE-section-id" path="/wellsfargo-rel-ui/common/widget/override/listselect-wellsfargo.jsp"/>

in the objectselect-wellsfargo.jsp, it gets the attribute name from the misc tag of the Content Select CCE widget.

String targetAttribute = XMLUtils.getStringByXPath(miscData, "/data/attribute/text()");
String[] targetAttributes = (targetAttribute==null||targetAttribute.length()==0)? null: targetAttribute.split(",");

onChange of this attribute value, it executes the javascript vui.vcm.wellsfago.sectionsselectoptions to pupluate the drop down. see the attached Content Select CCE widget.JPG.

On the ohter hand, when the editing an existing related item link, the widget will have to load the list of sections from the previous attribute, so in the Data Select CCE's misc tag, it tells the attribute name to get the being linked related item to populate the list of sections. see attached Data Select CCE.JPG.

Hope this helps.

Content Select CCE widget.JPG

Data Select CCE.JPG

Srinivasa_Rao_Nalluri

Thanks Jeff for detailed reply, it is very useful.