Add fragments through a contributed fragment collection in Liferay DXP 7.3

Contributed Fragment Collection module's fragments are available globally to all sites. And it can't be modified directly through a fragment editor.

For creating contributed fragment collection, we need to extend the Class: BaseFragmentCollectionContributor, which is implement the interface: FragmentCollectionContributor.

IDE: Using Liferay Developer Studio

Here, we are adding a new contributed fragment collection for input type element components.

Follow the below steps:

Create a new Liferay Module Project

• Navigate to File - New - Liferay Module Project for create the module project.
• Give the Project name and select the service-wrapper option from Project Template Name dropdown menu and Next.
• Give the Class Name, Package Name and click the Finish
• Class Name: InputComponentFragmentCollectionContributor
• Package Name: com.ag.liferay.fragment.collection.contributor.input.component

JAVA Class

• [packageName]/InputComponentFragmentCollectionContributor.java: 

package com.ag.liferay.fragment.collection.contributor.input.component;

import com.liferay.fragment.contributor.BaseFragmentCollectionContributor;
import com.liferay.fragment.contributor.FragmentCollectionContributor;
import org.osgi.service.component.annotations.Component;
import org.osgi.service.component.annotations.Reference;
import javax.servlet.ServletContext;

@Component(property = "fragment.collection.key=INPUT_COMPONENT", service = FragmentCollectionContributor.class)
public class InputComponentFragmentCollectionContributor extends BaseFragmentCollectionContributor {

	@Override
	public String getFragmentCollectionKey() {
		return "INPUT_COMPONENT";
	}

	@Override
	public ServletContext getServletContext() {
		return _servletContext;
	}

	@Reference(target = "(osgi.web.symbolicname=com.ag.liferay.fragment.collection.contributor.input.component)")
	private ServletContext _servletContext;

}

Add a fragment[s]

• Create the folder structure inside module's resources/ folder:

resources/com/ag/liferay/fragment/collection/contributor/input/component/dependencies

• Move the fragment source folder into the dependencies/ and create the collection.json file for display collection of fragment[s]:

{
    "name": "Input Components"

}

Add Thumbnail images

• Create a thumbnails/ folder and add [fragment-name].png thumbnail images of each fragment:

resources/META-INF/resources/thumbnails

Properties in bundle’s bnd.bnd file

• Bundle-SymbolicName must match with osgi.web.symbolicname
• Add Web-ContextPath Header and set inherit option of Declarative Services Annotation.

Bundle-Name: fragment
Bundle-SymbolicName: com.ag.liferay.fragment.collection.contributor.input.component
Bundle-Version: 1.0.0
Web-ContextPath: /fragment-collection-contributor-input-components
-dsannotations-options: inherit

Build and deploy

• Build and deploy the jar file.
• Browse to localhost and open the Site Menu, go to Design - Fragments. The fragments available for use inside the "Input Components" collection. 

Thank You!