During the upgrade of custom OSGi modules, I encountered the update of the Clay taglib, which requires integration through JavaScript. This taglib introduces a new attribute called propsTransformer that calls external JavaScript files that need to be transpiled using Babel and the liferay-npm-bundler.

I used the blogs module as a reference:

<clay:management-toolbar managementToolbarDisplayContext="<%= new BlogsManagementToolbarDisplayContext(request, liferayPortletRequest, liferayPortletResponse, entriesSearchContainer, trashHelper, displayStyle) %>" propsTransformer="blogs_admin/js/BlogEntriesManagementToolbarPropsTransformer" searchContainerId="blogEntries" />

The JavaScript files being called are available here:

https://github.com/liferay/liferay-portal/tree/7.4.3.92-ga92/modules/apps/blogs/blogs-web/src/main/resources/META-INF/resources/blogs_admin/js

I imported the structure and adapted it to our development, which involves a control panel view similar to previous versions.

Consequently, I adapted my -DisplayContext class and created my -ActionDropdownItemsProvider and -VerticalCard classes.

For the JavaScript integration, I created the following package.json:

{ "dependencies": { "codemirror": "^5.59.0" }, "devDependencies": { "@babel/cli": "^7.0.0", "@babel/core": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", "liferay-npm-bundler": "2.30.0" }, "name": "<project-name>", "scripts": { "build": "babel --source-maps -d build/resources/main/META-INF/resources src/main/resources/META-INF/resources && liferay-npm-bundler" }, "version": "1.0.0" }

The .babelrc file:

{ "presets": ["@babel/preset-env", "@babel/preset-react"] }

Finally, I included the dependencies already integrated within Liferay in the .npmbundlerrc file:

{ "config": { "imports": { "frontend-js-react-web": { "react": "16.12.0", "react-dom": "16.12.0" }, "frontend-js-web": { "/": ">=1.0.0" }, "@liferay/frontend-js-state-web": { "/": ">=1.0.0" }, "item-selector-taglib": { "/": ">=1.0.0" } } } }

Conclusion

This is an update on the development from Liferay 7.1 to 7.4, focusing primarily on the integration of the JavaScript component for the Clay taglib.

Liferay recommends transitioning from the service builder to Liferay Objects. If you are currently in a transitional phase and prefer to upgrade your platform before moving to Liferay Objects, this approach can save you time.