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 !!!
