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
- Create OSGi module
- Copy original AUI JS modules source code to created module
- Add Liferay-JS-Config header in bnd file
- Create config.js file
- Add Custom Filed Information in “AVAILABLE_FIELDS” List
- Create custom component plugin
- Implementing required OSGi component java classes
- Implement required DDM FTL templates
- Build and Deploy
- 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
- Crete structure
- Create web content
- Configure Web content display widget
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
I propose merely very good along with reputable data, consequently visualize it: unique logo design
ReplyDeleteThis post is incredibly simple to examine and recognize without disregarding any nuances. Inconceivable work!
ReplyDeletedata science courses
I see some amazingly important and kept up to length of your strength searching for in your on the site
ReplyDeletewhat is the difference between analysis and analytics
I think this is the minimum value to earn more than just commit
ReplyDeleteiot courses in delhi
Henry Ford claimed'The only real foundation of true company is service '. In many organizations, the consumer service function It Sevices
ReplyDeleteAll the tricks are noted to implement in the future. Thanks for the in-depth technical blog.
ReplyDeleteThis is exactly the information I'm looking for, I couldn't have asked for a simpler read with great tips like this... Thanks!
ReplyDeleteBest Digital Marketing Institute in Hyderabad
Great Article IoT Projects for Students
ReplyDeleteDeep 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
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.
ReplyDeletehttp://onegadget.ru/og/65885
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.
ReplyDeletei 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.. 網上商店
ReplyDeleteReally impressed! Everything is very open and very clear clarification of issues. It contains truly facts. Your website is very valuable. Thanks for sharing. zeroavia
ReplyDeleteThe Gaming Club Casino also offers auction services to members, a sign-up bonus and cash
ReplyDeletegratuities 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.부산달리기
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
ReplyDeleteKeep 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
ReplyDeleteI 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
ReplyDeleteA 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
ReplyDeleteRequirement 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.
ReplyDeleteVery Useful article
ReplyDeletedata analytics course aurangabad
Importing the module in liferay version 7.4.0 CE GA1 there are several imports that are not solved:
ReplyDeleteimport com.liferay.dynamic.data.mapping.io.DDMFormJSONDeserializer;
import com.liferay.dynamic.data.mapping.io.DDMFormJSONSerializer;
import com.liferay.dynamic.data.mapping.io.DDMFormValuesJSONDeserializer;
import com.liferay.dynamic.data.mapping.io.DDMFormValuesJSONSerializer;
import com.liferay.portal.kernel.util.StringPool;
Can anyone help me?
BIIT(Brahmanand Institute of Information & Technology) is a certified computer coaching. In BIIT, you can get various computer institute in east delhi. You will also get the certificate after completion of each course which is useful for you. This will helps you to get a well paid job. For more information, you can call us on 9311441524, or can visit to A-115 , First Floor , Near Panna Sweet, Shakarpur, Vikas Marg, Laxmi Nagar, Computer Institute, Opposite Metro Piller No. 33, Delhi, 110092. This is main website from where you can get full details http://www.biitnewdelhi.com/.
ReplyDeletegood
ReplyDeleteCreating files and validating is quite difficult but this is great post. Thanks. we also offers Liferay Java services. Contact us for details.
ReplyDelete