Multifield is an important xtype which provides flexibility as we saw in the previous post around Multifield with custom xtype. It is good to have flexibility but becomes a bigger challenge in bigger editorial team environments where rules need to be defined to lock down flexibility.
Adding validation is one way of locking down flexibility, providing cleaner content entry environment. To extend the previous example around defining custom type with multifield, we need to add “listeners” node under multifield. Then add an attribute called “beforeadd” and specify its value as a Javascript function. As an example:
< linkspanel
jcr:primaryType="cq:Panel"
border="false"
height=""
title="Links"
width="">
< items jcr:primaryType="cq:WidgetCollection">
< links
jcr:primaryType="cq:Widget"
fieldDescription="Press + to add more links"
fieldLabel="Links"
hideLabel="true"
name="./links"
width="1000"
xtype="multifield">
< fieldConfig
jcr:primaryType="cq:Widget"
xtype="rbspathfieldwithintent"/>
< listeners
jcr:primaryType="nt:unstructured"
beforeadd="function(list,component,index){if(index!=0){var link=list.items.item(index-1).getValue();var myObject=JSON.parse(link);if(link.text==''){CQ.Ext.Msg.show({title:'Validation Error',msg:'Link Text can not be empty!',buttons:CQ.Ext.MessageBox.OK,icon:CQ.Ext.MessageBox.ERROR});return false;}if(link.url==''){CQ.Ext.Msg.show({title:'Validation Error',msg:'Link Text can not be empty!',buttons:CQ.Ext.MessageBox.OK,icon:CQ.Ext.MessageBox.ERROR});return false;}}}"/>
< /links>
< /items>
< /linkspanel>
|
Nhận xét
Đăng nhận xét