Sunday, March 29, 2020

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


 Maven Module


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


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.


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




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.


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



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.




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


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


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


Example of FTL template name and field type name



Build and Deploy


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

26 comments :

  1. It's very useful blog post with informative and insightful content and i had good experience with this information.I have gone through CRS Info Solutions Home which really nice. Learn more details About Us of CRS info solutions. Here you can see the Courses CRS Info Solutions full list.Find the best Hadoop Training with great faculty. Go to know about crs info solutions Workday Training program.

    ReplyDelete
    Replies
    1. Great Article IoT Projects for Students

      Deep Learning Projects for Final Year

      JavaScript Training in Chennai

      JavaScript Training in Chennai

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  2. I at last discovered extraordinary post here.I will get back here. I just added your blog to my bookmark locales. thanks.Quality presents is the vital on welcome the guests to visit the page, that is the thing that this website page is giving.
    Data Analytics Course

    ReplyDelete
  3. I propose merely very good along with reputable data, consequently visualize it: unique logo design

    ReplyDelete
  4. This post is incredibly simple to examine and recognize without disregarding any nuances. Inconceivable work!
    data science courses

    ReplyDelete
  5. I see some amazingly important and kept up to length of your strength searching for in your on the site
    what is the difference between analysis and analytics

    ReplyDelete
  6. I think this is the minimum value to earn more than just commit
    iot courses in delhi

    ReplyDelete
  7. Henry Ford claimed'The only real foundation of true company is service '. In many organizations, the consumer service function It Sevices

    ReplyDelete
  8. Truly overall quite fascinating post. I was searching for this sort of data and delighted in perusing this one. Continue posting. Much obliged for sharing.Best data analytics course in Hyderabad

    ReplyDelete
  9. All the tricks are noted to implement in the future. Thanks for the in-depth technical blog.

    ReplyDelete
  10. This is exactly the information I'm looking for, I couldn't have asked for a simpler read with great tips like this... Thanks!
    Best Digital Marketing Institute in Hyderabad

    ReplyDelete
  11. Having doubted and rejected the common view that writing evolves to represent speech, evolution of writing systems is studied focusing on their visual feature. A visual-centered hypothesis for direction of evolution is proposed: writing evolves towards systems that are fitter for reading. Legibility (fit for reading) takes effect on human body and operates throughout entire writing system. Spoken language plays significant role in this process due to its association with written language. This hypothesis is supported by analysis of and comparison between visual characteristics of pictographic and alphabetic systems. In writing's complex history in the real world, legibility culminates in Latin alphabet and the written English.
    http://onegadget.ru/og/65885

    ReplyDelete
  12. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info.

    ReplyDelete
  13. i read a lot of stuff and i found that the way of writing to clearifing that exactly want to say was very good so i am impressed and ilike to come again in future.. 網上商店

    ReplyDelete
  14. Incredibly conventional blog and articles. I am realy very happy to visit your blog. Directly I am found which I truly need. Thankful to you and keeping it together for your new post.
    artificial intelligence course

    ReplyDelete
  15. Really impressed! Everything is very open and very clear clarification of issues. It contains truly facts. Your website is very valuable. Thanks for sharing. zeroavia

    ReplyDelete
  16. Thanks for sharing this information with us and it was a nice blog.Envizon Studio is a leading

    Best web design company in Hyderabad
    offering all kinds of custom built websites,
    web portals & web applications. Please visit our website for more Information.

    ReplyDelete
  17. The Gaming Club Casino also offers auction services to members, a sign-up bonus and cash
    gratuities available to players and club members alike.
    After the player receiving this bonus, these casinos
    offer other bonuses for future deposits. These
    players will be provided incentives for upcoming deposits that happen to be their casino accounts.부산달리기

    ReplyDelete
  18. Boggling information, focal and staggering arrangement, as offer befuddling stuff with skilled experiences and bits of information, stores of astounding information and inspiration, the two of which I need, seeing at thought as an especially obliging information here. https://vograce.com

    ReplyDelete
  19. This is an excellent post I seen thanks to share it. It is really what I wanted to see hope in future you will continue for sharing such a excellent post.
    data scientist course

    ReplyDelete
  20. Keep up the good work , I read few posts on this web site and I conceive that your blog is very interesting and has sets of fantastic information. check this out

    ReplyDelete
  21. I have read your blog it is very helpful for me. I want to say thanks to you. I have bookmark your site for future updates. canada eta

    ReplyDelete
  22. A very awesome blog post. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. india vizpeto

    ReplyDelete
  23. A very awesome blog post. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. eta new zealand

    ReplyDelete
  24. Requirement disk-based B2D storage data centric computing room keeps exclusive company details out of the hands of third events, offering firms complete control over their digital ownerships. B2D alternatives help in quick, relied on, along with a cost-effective back-up well as storage area.

    ReplyDelete

Recent Posts

Recent Posts Widget

Popular Posts