Issue
- From 7.1 with fix pack dxp-13-7110+ , using Soy taglib to create a ColorPicker, similar to this:
<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%@ include file="/init.jsp" %>
<%@ taglib uri="http://liferay.com/tld/soy" prefix="soy" %>
<p>
<b><liferay-ui:message key="colorpicker.caption"/></b>
</p>
<%
Map<String, Object> context = new HashMap<>();
context.put("color", "#ff0000");
context.put("id", "backgroundColor");
context.put("label", "background-color");
context.put("name", "backgroundColor");
%>
<soy:component-renderer
context="<%= context %>"
module="portlet-configuration-css-web/js/ColorPickerInput.es"
templateNamespace="com.liferay.portlet.configuration.css.web.ColorPickerInput.render"
/>
(orsoy:component-renderer) will no longer work:
Environment
- Liferay DXP 7.1+
Resolution
- The above snippet worked up to dxp-12-7110 by fluke and the behavior was overridden by the fix pack dxp-13-7110: after that fix pack, it isn't possible to use an internal component of the
configuration-css-webexternal module within a portlet anymore. To achieve the previous behavior, follow the below steps:
1. Instead of configuration-css-web, we need to copy the ColorPickerInput component from com.liferay.portlet.configuration.css.web to our portlet (ColorPickerInput.soy, ColorPickerInput.es.js).
2. The namespace should be updated in the ColorPickerInput.soy
3. The templateNamespace should be updated in the soy:component-renderer taglib in the view.jsp
4. We shall add package.json for building the soy and es.js files and use liferay-npm-scripts 7.1.0
5. Install the node modules with: npm install
6. Adjust the bnd.bnd for soy capability
7. Internally in Liferay, we are using gradle for building modules, therefore the necessary files shall be added too
8. Adjust the build.gradle for building the portlet
9. In our solution, we added the copyClassesMetaInf task as a quick fix for copying the transpiled js files and the node_modules to the build folder
10. Build the portlet with: gradlew clean build
11. The deployable jar should be located at: build\libs\color.picker-1.0.0.jar
An example of such project is provided in this ticket in attachment, in form of an unsupported hint.