Liferay 7.2 Customize Documents And Media Porlet

I have Liferay 7.2 I want to customize the html of the layout of the widget Documents AND Media

I tried to create a hook to document and media but it seems that is not the right way.

How can i do that?

First, the fact that you're talking about a hook tells me that you're coming from Liferay 6 or earlier. Forget the old module types ("war-style modules"), embrace the new "jar-style modules" or "OSGi modules", which leverage the OSGi methods and mechanisms in the foundation. The new module type that comes closest to the functionality of hooks would be a "module fragment".

Alternatively, if you want to create one module that overrides the JSPs of more than one other module (or overrides JSPs as a side effect to its main purpose), you may want to look into "JSP Bags".

Still, both methods are discouraged and should be taken as a last resort, according to Liferay's "Introduction to Customizing JSPs".

The preferred method would be to use Dynamic Includes (albeit they only work if the target portlet has been written to include inclusion points) or Portlet Filters (which basically allow you to programmatically edit the request to and response from the standard Portlet classes and JSPs).

Still, if you're aiming to replace most of the JSPs of the standard document and media widget (keep in mind: Widgets are still Portlets, they just have been renamed in the frontend), a module fragment still seems to the best way forward.

To identify the correct module, here are the necessary steps. I'll show it using the DLAdmin portlet from the control panel as an example:

• Identify the portlet you want to edit: Look into the HTML using the DOM inspector of your browser. Look for section tags with IDs like <section class="portlet" id="portlet_com_liferay_document_library_web_portlet_DLAdminPortlet"> around the area of interest.
• Now translate that ID into a package path with portlet class: com.liferay.document.library.web.portlet.DLAdminPortlet. Search for that class in the Liferay github repository. (Go there, press T, enter the class name, find its Java class source file. In case of multiple hits, you need to check the package path, too.)
• Once you opened the source file, go back up in the file tree to the parent folder of the src folder. There's a bnd.bnd file. Take a look into it, it will tell you the Bundle-SymbolicName.
• Use the Liferay IDE or Blade CLI (depending on your development environment) to create a module fragment for the module identified by the Bundle-SymbolicName.