Liferay 7/DXP DDM Custom Field Module Development

Objective of the article is providing development steps for custom DDM field development. Assume we will implement Mobile number custom field and it contain field validation and set of settings attributes.

GitHub Source

Gradle Module

https://github.com/LiferaySavvy/liferay72-ddm-custom-field

 Maven Module

https://github.com/LiferaySavvy/liferay72-ddm-custom-field-mvn

The following are steps

1. Create OSGi module
2. Copy original AUI JS modules source code to created module
3. Add Liferay-JS-Config header in bnd file
4. Create config.js file
5. Add Custom Filed Information in “AVAILABLE_FIELDS” List
6. Create custom component plugin
7. Implementing required OSGi component java classes
8. Implement required DDM FTL templates
9. Build and Deploy
10. Validating Custom field

Create OSGi module

We have different ways to create Liferay OSGi modules and we need to create mvc-portlet Liferay OSGi module. While creating Liferay OSGi module need to select mvc-portlet project template. It will create basic rest module.

http://www.liferaysavvy.com/2020/03/create-liferay-osgi-module-with-blade.html

Copy original AUI JS modules source code to created module

Copy main.js and custom_field.js files form original module to created module under “/src/main/resources/META-INF/resources/js”

https://github.com/liferay/liferay-portal/blob/7.2.1-ga2/modules/apps/dynamic-data-mapping/dynamic-data-mapping-web/src/main/resources/META-INF/resources/js/main.js

https://github.com/liferay/liferay-portal/blob/7.2.1-ga2/modules/apps/dynamic-data-mapping/dynamic-data-mapping-web/src/main/resources/META-INF/resources/js/custom_fields.js

Change names to “custom_fields_override.js” and “main_override.js” and edit the files AUI definition names. It should require to change AUI definition name to distinguish from original AUI/YUI definition names.

Example of “main_override.js” after changing the definition name.

AUI.add(      'liferay-portlet-dynamic-data-mapping-override',      A => {

Example of “custom_fields_override.js” after changing the definition name

AUI.add(      'liferay-portlet-dynamic-data-mapping-custom-fields-override',      A => {

Now add your JavaScript modification to these files.

http://www.liferaysavvy.com/2020/03/liferay-7dxp-overriding-liferay-portal.html

http://www.liferaysavvy.com/2020/03/liferay-7dxp-dynamic-data-mapping.html

Add Liferay-JS-Config header in bnd file

“Liferay-JS-Config” is OSGi header and its based-on extender pattern. At run time with header OSGi container will override the original AUI JavaScript with modified JavaScript.

Example module of bnd.bnd file

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

http://www.liferaysavvy.com/2020/03/liferay-7dxp-overriding-liferay-portal.html

http://www.liferaysavvy.com/2020/03/liferay-7dxp-dynamic-data-mapping.html

Create config.js file

Create “config.js” file under module “src/main/resources/META-INF/resources/js”. Config.js files have information like modified AUI/YUI JavaScript file location and its original AUI module definition names. This will help OSGi runtime to load modified version AUI JavaScript.

http://www.liferaysavvy.com/2020/03/liferay-7dxp-overriding-liferay-portal.html

http://www.liferaysavvy.com/2020/03/liferay-7dxp-dynamic-data-mapping.html

Add Custom Filed Information in “AVAILABLE_FIELDS” List

It 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”

Follow below link for more details

http://www.liferaysavvy.com/2020/03/liferay-7dxp-dynamic-data-mapping.html

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.

Follow below link for more details

http://www.liferaysavvy.com/2020/03/liferay-7dxp-dynamic-data-mapping.html

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 in read only while rendering 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”.

http://www.liferaysavvy.com/2020/03/liferay-7dxp-dynamic-data-mapping.html

Example of FTL template name and field type name

Build and Deploy

Locate project and use required commands to build and deploy module.

Module Build

mvn clean install OR mvnw clean install

Gradle Build

gradlew build OR gradle build

Module Deployment

If bundle support plugin already added in project build file then it will deploy to Liferay Module Framework with following commands

Gradle deploy

Add following bundle support plugin in module “build.gradle” file

liferay {     liferayHome = "C:/Liferay/Liferay7.2/liferay-workspace/bundles"     deployDir = file("${liferayHome}/osgi/modules") }

Deploy module command

gradlew deploy OR gradle deploy

Maven Deployment

Add bundle support plugin in module “pom.xml” file and update liferay home path.

<plugin> <groupId>com.liferay</groupId> <artifactId>com.liferay.portal.tools.bundle.support</artifactId> <version>3.5.4</version> <executions> <execution> <id>deploy</id> <goals> <goal>deploy</goal> </goals> <phase>pre-integration-test</phase> </execution> </executions> <configuration> <liferayHome>C:/Liferay/Liferay7.2/liferay-workspace/bundles</liferayHome> </configuration> </plugin>

Run following maven goals to deploy module

mvn bundle-support:deploy OR mvnw bundle-support:deploy

Make sure module jar should be in osgi/module directory and it should be in active state in Liferay Module framework. Use Gogo shell commands to check module status

Module status

Module is available in “osgi/modules”

Validating Custom field

1. Crete structure
2. Create web content
3. Configure Web content display widget

Crete structure

Login as portal Admin --> Control Panel --> Content & Data -->Web content -->Structures --> Click Add

Provide Name and add mobile number fields.

Update field setting values as per your need. Mobile number field have few custom settings as follows.

Custom CSS Class: Its custom CSS class that need to apply for field.

Validation Message: Custom message for validation. You can change message for each field.

Validation Regex: This regex patter that you wanted to apply for field validation.

Field Width: It provides three option like small, medium and large.

If you have any Regex pattern JS error then use escape chars in the input of Regex.

Example if the regex have / char then apply //

/^(\\+\\d{1,3}[- ]?)?\\d{10}$/i

Save the structure and create new web content with newly created structure.

Create web content

Control Panel --> Content & Data --> Web content--> Click Add --> Select Structure

Provide Name and Mobile Number field data.

Here is actual validation will fire based on custom field implementation. Once provided the valid data then publish web content.

Configure Web content display widget

Create new page and add web content display widget to the page.

Click widget configuration

Select newly created web content and save it

Finally you can see the custom field data in the web content display widget with default template view.

We can also create web content template to structure to make more look and feel.

Author

Meera Prince

Liferay Contributor of the Year 2016
Liferay Top Contributor Award Winner 2015

Liferay Contributor of the Year 2014

Liferay Top Contributor Award Winner 2013

http://www.liferaysavvy.com