Sunday, March 29, 2020

Liferay 7/DXP Dynamic Data Mapping Custom Field


Liferay 7/DXP have provided very interactive web content creation and it is providing structures and templates to design web content.

Structure will use to defined data structure and template will provide look and feel to defined data structure.

To create structures Liferay internally using Dynamic Data Mapping (DDM) and it will provide nice user interface to create web content structures. It will provide default DDM form fields Text, Checkbox, Radio, TextArea, TextHTML, Number, Boolean, Date and Decimal.

These are very regular fields we can use to defined web content data structures.  Liferay also provided way to create custom DDM fields based on requirement. Creating custom DDM field will help us to complete real work application needs.

Assume we wanted mobile number field and it have certain validations. Liferay already have text field but it may not full fill mobile number input requirements.

DDM Custom filed will address such requirements so that we can create our own brand new DDM custom fields.

Default Liferay provided ddm fields




Implementing custom DDM field is required to override few of AUI modules and implement DDM provided component classes.

We can divide implantation into 3 parts

  1. Existing prtal provided module JavaScript changes
  2. Implementing OSGi component java classes
  3. Implement DDM FTL templates

Existing Portal provided module JavaScript changes

Overriding AUI modules

We need to override following two AUI modules and need to add custom DDM field AUI component.

liferay-portlet-dynamic-data-mapping-custom-fields
liferay-portlet-dynamic-data-mapping

These modules are available in portal source code of “dynamic-data-mapping-web”.



Add Liferay-JS-Config header in bnd file

To override above modules, OSGi use “Liferay-JS-Config” extender and it will help to load overridden modules at run time. Config.js is place to define overridden AUI modules information.
The following is header in bnd.bnd file in module to use “Liferay-JS-Config” extender.


Liferay-JS-Config: /META-INF/resources/js/config.js


Add Custom Filed Information in “AVAILABLE_FIELDS” List

Its is required to add custom field information in main_overriden.js file

Example

//add field type to this list
{
hiddenAttributes: MAP_HIDDEN_FIELD_ATTRS.DEFAULT,
iconClass: 'number',
label: 'Mobile Number',
type: 'ddm-mobile-number'
}

Create AUI Component Plugin

Custom AUI Field component plugin will consist of field attributed and its look and feel editors.
Need to add following component creation code in “custom_fields_override.js”

Example AUI Custom Field Component


//Create custom field component plugin
           var regexString = "/^(\\+\\d{1,3}[- ]?)?\\d{10}$/i"
           var customFieldHTML = '<input class="form-builder-field-node field-input field-input-text form-control"></input>'
           var DDMMobileNumberField = A.Component.create(
                {
                      ATTRS: {
                           customCssClass: {
                                 value: ''
                           },
                           fieldWidth: {
                                 value: ''
                           },
                           mobileNumberValidationMassage: {
                                 value: 'Please enter valid mobile number'
                           },
                           mobileNumberRegex: {
                                 value: regexString
                           },
                           dataType: {
                                 value: 'string'
                           },
                           fieldNamespace: {
                                 value: 'ddm'
                           }
                      },

                      EXTENDS: A.FormBuilderTextField,

                      NAME: 'ddm-mobile-number',

                      prototype: {
                           getHTML: function() {
                                 return customFieldHTML;
                           },
                           getPropertyModel: function() {
                                 var instance = this;

                                 var model = originalGetPropertyModel.call(instance);

                                 return model.concat(
                                      [
                                            {
                                                 attributeName: 'customCssClass',
                                                 editor: new A.TextAreaCellEditor(),
                                                 name: 'Custom CSS Class'
                                            },
                                            {
                                                 attributeName: 'mobileNumberValidationMassage',
                                                 editor: new A.TextAreaCellEditor({
                                                      validator: {
                                                            rules: {
                                                                 value: {
                                                                       required: true,
                                                                 }
                                                            }
                                                       }
                                                 }),
                                                 name: 'Mobile Number Validation Massage'
                                            },
                                            {
                                                 attributeName: 'mobileNumberRegex',
                                                 editor: new A.TextCellEditor({
                                                      validator: {
                                                            rules: {
                                                                 value: {
                                                                       required: true,
                                                                 }
                                                            }
                                                       }
                                                 }),
                                                 name: 'Mobile Number Regex'
                                            },
                                            {
                                                 attributeName: 'fieldWidth',
                                                 editor: new A.DropDownCellEditor(
                                                           {
                                                               options : {
                                                               large : 'large',
                                                               medium : 'medium',
                                                               small : 'small'
                                                               }
                                                              }),
                                                 name: 'Field Width'
                                            }
                                      ]
                                 );
                           }
                      }
                }
           );

Each field setting attribute required editor to take input from end user, Field Width is using Drop Down cell editor will have few options to select. It will be as follows in the Structure Creation UI.


Implementing required OSGi component java classes

Following are basic OSGi components which required for DDM custom field. We really don’t need to implement everything and we can get original code from portal source and then modify some piece of code.

DDMFormFieldType

Need to override getName method and it should return custom field name.



DDMFormFieldValueRenderer



DDMFormFieldFreeMarkerRendererHelper


DDM


In “getDDMFormFieldsJSONArray” method need to add custom filed attributes.


CustomFieldDDMFormFieldTypeSettings




DDMFormFieldRenderer


Add custom field attributes to fieldContext in addStructureProperties method.



Implement required DDM FTL templates

Custom field is required few ftl templates to render fields in the web content.These templates related code in “DDMFormFieldRenderer” component class. default.ftl” is template will render read only view while render in the web content.Custom field template ftl file have all render logic which configured while creating field. 

Field type name defined in “DDMFormFieldType” component should be with ddm-*. Example of filed type name is “ddm-mobile-number”

Template name should be without ddm-, it means template name should be “mobile-number.ftl”.

Example of FTL template name and field type name



Example code of custom field template


<#--Field Settings defined for Mobilde Number field and fetch the values -->
<#assign cssClass = "" />

<#if fieldStructure.fieldWidth??>
     <#if stringUtil.equals(fieldStructure.fieldWidth, "large")>
           <#assign cssClass = "input-large" />
     <#elseif stringUtil.equals(fieldStructure.fieldWidth, "medium")>
           <#assign cssClass = "input-medium" />
     <#elseif stringUtil.equals(fieldStructure.fieldWidth, "small")>
           <#assign cssClass = "input-small" />
     </#if>
</#if>
<#assign cssClass += " " />
<#assign cssClass += "${fieldStructure.customCssClass}" />
<#assign data = data + {
     "ddmAuthToken": ddmAuthToken
}>

<#--FMobilde Number field with validation -->
<@liferay_aui["field-wrapper"]
     cssClass="form-builder-field"
     data=data
> 
     <div class="form-group">
           <@liferay_aui.input
                cssClass=cssClass
                dir=requestedLanguageDir
                helpMessage=escape(fieldStructure.tip)
                label=escape(label)
                name=namespacedFieldName
                required=required
                type="text"
                value=fieldValue
           >
        <@liferay_aui.validator errorMessage="${fieldStructure.mobileNumberValidationMassage}" name="custom">
                function(val, fieldNode, ruleValue) {
                        var regex = new RegExp(${fieldStructure.mobileNumberRegex});
                        return regex.test(val);
                }
       </@liferay_aui.validator>
           </@liferay_aui.input>
     </div>

     ${fieldStructure.children}
</@>


Portal Source code references 7.2 GA2



GitHub Source

Gradle Module


 Maven Module



Author

23 comments :

  1. Just wanted to ask, can we use CartoDB for creating visualizations? I have heard it is fast and a lot easier for data mapping and visualizations.

    ReplyDelete
  2. I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people. data entry products

    ReplyDelete
  3. Very well written post. Thanks for sharing this, I really appreciate you taking the time to share with everyone. PMP Certification

    ReplyDelete
  4. What is an outstanding post! “I’ll be back” (to read more of your content). Thanks for the nudge! Legacy data archiving

    ReplyDelete
  5. A Non-Disclosure Agreement (NDA) will be marked or Corporate and Business Clients to guarantee privacy of information from accommodation of media to information conveyance.data recovery tips & solutions

    ReplyDelete
  6. The team's consistently high-quality work has enabled the business to be a competitor in its market
    Bay Area web design company

    ReplyDelete
  7. If you have just a few people to verify, the online option is the better choice. If you need to verify a large quantity, you'll need to create a file and mail it in.numbersdata.com

    ReplyDelete
  8. The fundamental contrast from the actual item is that the service is immaterial, so genuinely individuals purchase nothing. This element is vital and it characterizes the other service perspectives. IT company Hamilton

    ReplyDelete
  9. I would like to say that this blog really convinced me to do it! Thanks, very good post. custom basketballs

    ReplyDelete
  10. A player is likely to get assistance in a day since a technical
    problem is reported. Software downloads don't cost anything, nevertheless
    they have certain hardware specifications.
    Finnish poker pro Jens Kyllonen can make history when he becomes one of the primary individuals
    to attempt a passenger voyage to space in 2014.안마

    ReplyDelete
  11. Wow, cool post. I'd like to write like this too - taking time and real hard work to make a great article... but I put things off too much and never seem to get started. Thanks though. visit this page

    ReplyDelete
  12. Another type of data recovery software is one designed to find and/or fix lost or corrupted files. Again, the hazard is that every piece of data you write to the disk could overwrite the file you are trying to restore. Melbourne Data recovery

    ReplyDelete
  13. I definitely enjoying every little bit of it. It is a great website and nice share. I want to thank you. Good job! You guys do a great blog, and have some great contents. Keep up the good work. tape storage

    ReplyDelete
  14. I like to recommend exclusively fine plus efficient information and facts, hence notice it: read here

    ReplyDelete
  15. It is especially decent, though look into the tips during this home address. buy economics assignment

    ReplyDelete
  16. blisters for concentrate homes, also known as mobile homes, are factory-produced homes that can be transported anywhere and installed at a selected site with or without a permanent foundation. Manufactured homes have revolutionized the American housing market by providing affordability and flexibility to potential buyers.

    ReplyDelete
  17. I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article. marijuana packaging

    ReplyDelete
  18. One of the advantages of IPTV is its capability to get easily integrated with other IP-based services such as VOIP or high-speed internet. The company pandar iptv subscription provides you a great support with re-selling plan, compatibility, server stability and like iptv m3u, many other interesting feature just with a good, satisfying and reasonable price.

    ReplyDelete
  19. Hi there, I discovered your blog per Google bit searching for such kinda educational advise moreover your inform beholds very remarkable for me. Help With Data Analysis For Dissertation

    ReplyDelete
  20. What a thrilling post. It is extremely chock-full of useful information. Thanks for such a great info. 메이저사이트

    ReplyDelete
  21. It is included in my habit that I often visit blogs in my free time, so after landing on your blog. I have thoroughly impressed with it and decided to take out some precious time to visit it again and again. Thanks. 먹튀검증

    ReplyDelete

Recent Posts

Recent Posts Widget

Popular Posts