Recent Bloggers

Saurang Suthar
Posts: 5
Stars: 0
Date: 7/4/17
Jyoti Verma
Posts: 3
Stars: 0
Date: 6/28/17
Pankti Patel
Posts: 1
Stars: 0
Date: 5/26/17
Chandrika Baraiya
Posts: 5
Stars: 0
Date: 5/26/17
Atith Patel
Posts: 5
Stars: 0
Date: 5/22/17
Nisarg Pujara
Posts: 6
Stars: 0
Date: 5/10/17
Pranavsinh Parmar
Posts: 4
Stars: 0
Date: 5/3/17
Ankit Prajapati
Posts: 5
Stars: 0
Date: 5/3/17
Pratik Solanki
Posts: 5
Stars: 0
Date: 4/7/17
Chirag Patel
Posts: 4
Stars: 0
Date: 3/30/17
« Back

Liferay Dynamic Data Lists Custom Field

Liferay provides many Out of the Box components which can be used in Structures or Dynamic Data Lists(DDL). Though sometime you may need to use custom field in Liferay Structures/Dynamic Data Lists(DDL) Form. We can add custom data field with help of Liferay Hook and Ext Plugins.
 
Below is the complete guideline to add custom field in Liferay Structure/DDL. For demo purpose, I have created custom Range Picker field for DDL Form.
 
Step 1) First of all, you need to create Liferay Hook Plugin with following three files :
 
a) /html/portlet/dynamic_data_mapping/custom_fields.jspf
 
In this file you have to define your custom field. Attributes like field name, field type are defined in this file.
 
Following is the snippet of custom field in custom_fields.jspf file.
 

var CustomRangePickerField = A.Component.create(

{

ATTRS: {

dataType: {

value: 'range-picker'

},

fieldNamespace: {

value: 'ddm'

}

},

 

EXTENDS: A.FormBuilderTextField,

 

NAME: 'custom-range-picker'

}

);

 
 

FormBuilderTypes['ddm-date'] = DDMDateField;

FormBuilderTypes['ddm-decimal'] = DDMDecimalField;

FormBuilderTypes['ddm-documentlibrary'] = DDMDocumentLibraryField;

FormBuilderTypes['ddm-integer'] = DDMIntegerField;

FormBuilderTypes['ddm-link-to-page'] = DDMLinkToPageField;

FormBuilderTypes['ddm-number'] = DDMNumberField;

FormBuilderTypes['ddm-paragraph'] = DDMParagraphField;

FormBuilderTypes['ddm-separator'] = DDMSeparatorField;

FormBuilderTypes['ddm-text-html'] = DDMHTMLTextField;

FormBuilderTypes['wcm-image'] = WCMImageField;

FormBuilderTypes['custom-range-picker'] = CustomRangePickerField;

 
 
b) /html/portlet/dynamic_data_mapping/js/main.js
 
Here you have to define View of custom field in Structure Editor Palette. You can define label, icon for custom field in this file.
 
I have added details about custom-field in DDM_STRUCTURE attribute of AVAILABLE_FIELDS variable.
 

{

hiddenAttributes: MAP_HIDDEN_FIELD_ATTRS.DEFAULT,

iconClass: 'icon-exchange',

label: Liferay.Language.get('Range Picker'),

type: 'custom-range-picker'

}

 
 
c) /html/portlet/dynamic_data_lists/js/main.js
 
In this file you have to set editor for custom field. Here, I have used TextCellEditor which you can see in following snippet.
 

TYPE_EDITOR: {

'checkbox': A.CheckboxCellEditor,

'ddm-date': A.DateCellEditor,

'ddm-decimal': A.TextCellEditor,

'ddm-integer': A.TextCellEditor,

'ddm-number': A.TextCellEditor,

'radio': A.RadioCellEditor,

'select': A.DropDownCellEditor,

'text': A.TextCellEditor,

'textarea': A.TextAreaCellEditor,

'custom-range-picker': A.TextCellEditor

},

 
 
You can see custom field in Structure/Dynamic Data Lists Data Definition palette as following screenshot.
 
 
 
Step 2) Hook configuration for custom field is completed. If you just want to create simple custom field like Text box or Number field then you do not need to create Ext plugin.
 
If you want to create more complex custom field like Range Picker then you need to create Ext plugin. Ext plugin is used to add custom Freemarker Template files and override Liferay default Java class. This class will specify path for custom FreeMarker files of custom DDL field. 
 
Consider following sample Freemarker template file for Custom Range Picker field.
 

<#include "../init.ftl">

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

 

<div id="slider-range"></div>

 

<@aui["field-wrapper"] data=data helpMessage=escape(fieldStructure.tip)>

<@aui.input cssClass=cssClass dir=requestedLanguageDir label=escape(label) readonly="readonly" name=namespacedFieldName type="text" value=fieldValue>

<#if required>

<@aui.validator name="required" />

</#if>

</@aui.input>

${fieldStructure.children}

</@>

 

<script>

$(function() {

$( "#slider-range" ).slider({

range: true,

min: 0,

max: 500,

values: [ 75, 300 ],

slide: function( event, ui ) {

$( "#${portletNamespace}${namespacedFieldName}" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );

}

});

$( "#${portletNamespace}${namespacedFieldName}" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +" - $" + $( "#slider-range" ).slider( "values", 1 ) );

});

</script>

 
 
Consider following screenshot of Dynamic Data Lists Form with Custom Field. Here the content of custom field is generated using the above Freemarker code.
 
 
That’s it… 
 
Have a great day ahead !!!
 
Comments
Poorav Solanki
Hi Atith Patel,

I tried with the above given example but could not see the custom field in Structure/Dynamic Data Lists Data Definition palette.

I have used hook to change /html/portlet/dynamic_data_mapping/custom_fields.jspf

and manually change both the below given js files from webaaps/ROOT/
- /html/portlet/dynamic_data_mapping/js/main.js
- /html/portlet/dynamic_data_lists/js/main.js
Posted on 4/20/16 2:22 PM.
Atith Patel
Hi Poorav,

I think there is some kind of misconfiguration. Can you please let me know in details WHAT and WHERE have you made changes in above mentioned files? Also let me know which LR version you are using?
Posted on 5/1/16 8:00 PM in reply to Poorav Solanki.

Contact Us

Loading

Get in touch

Headquarter :
302, Landmark,
Nr. Titanium City Center,
Prahlad Nagar Road,
Ahmedabad, India - 380015.