oo

Customizing JSPs with Dynamic Includes

The liferay-util:dynamic-include tag is a placeholder into which you can inject content—JavaScript code, HTML, and more. The example project demonstrates how to inject content with a dynamic include.

Deploy the Example Project

Start a new Liferay DXP instance by running

docker run -it -m 8g -p 8080:8080 liferay/dxp:2024.q1.1

Sign in to Liferay at http://localhost:8080 using the email address test@liferay.com and the password test. When prompted, change the password to learn.

Then, follow these steps:

  1. Download and unzip Customizing JSPs with Dynamic Includes.

    curl https://resources.learn.liferay.com/dxp/latest/en/liferay-internals/extending-liferay/customizing-jsps/liferay-n3q9.zip -O
    
    unzip liferay-n3q9.zip
    
  2. From the module root, build and deploy.

    ./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)
    
    Note

    This command is the same as copying the deployed jars to /opt/liferay/osgi/modules on the Docker container.

  3. Confirm the deployment in the Liferay Docker container console.

    STARTED com.acme.n3q9.able.web_1.0.0 [1459]
    STARTED com.acme.n3q9.baker.web_1.0.0 [1460]
    
  4. Verify that the example module works. Open your browser to https://localhost:8080.

  5. Navigate to a Site page and click the Edit icon (Edit icon). Add the N3Q9 Baker Portlet to the page. The widget can be found under Sample widgets.

    Add the N3Q9 Baker Portlet to a Site page.

    Note, the first two lines come from the N3Q9 Baker Portlet but the third line is injected from N3Q9 Able module’s dynamic include.

Implement the Dynamic Include

  1. Declare the class as an implementation of DynamicInclude with the @Component annotation.

    @Component(service = DynamicInclude.class)
    
  2. In the include method, add your custom content. The sample project uses a simple PrintWriter example.

@Override
public void include(
		HttpServletRequest request, HttpServletResponse response,
		String key)
	throws IOException {

	PrintWriter printWriter = response.getWriter();

	printWriter.println("<h3>Added by N3Q9 Able dynamic include.</h3>");
}
  1. In the register method, specify the dynamic include tag to use. In the sample, the register method targets the dynamic include of Baker module’s view.jsp.
@Override
public void register(DynamicIncludeRegistry dynamicIncludeRegistry) {
	dynamicIncludeRegistry.register("com.acme.n3q9.baker.web#view.jsp");
}

Insert the Dynamic Include

Add the liferay-util:dynamic-include tag where you want the dynamic include to be injected. In the sample, the tag is added to the bottom of N3Q9 Baker Portlet’s view.jsp.

<%@ taglib uri="http://liferay.com/tld/util" prefix="liferay-util" %>

<h2>N3Q9 Baker Portlet</h2><br />

<h3>Hello N3Q9 Baker.</h3><br />

<liferay-util:dynamic-include key="com.acme.n3q9.baker.web#view.jsp" />

Make sure the dynamic include key matches the target set in the register() method above.

See Using a JSP and MVC Portlet to learn more about JSPs and portlets.