How to create custom pager component for collection renderers in KM

[praveenkumar_gudapati]

This is an interesting question that has been asked many times in the KM forums but still did not get answered as the pager classes are hidden in core part of KM libraries, which makes it hard to implement a custom pager component.

For those who are not aware of pager component, please check this screenshot:

To keep this blog short, I will only focus on key points in implementing a pager component and not on complete code examples.

So let us get started...

Create a new portal project in NWDS along with a KM Service Wrapper Class, I think most of you already know about how to create a Service Wrapper Class and if not please refer to KM documentation.

As the Pager is so deeply integrated into collection renderer code, we also have to implement our own collection renderer to implement a custom pager.

As the classes are in private part of KM libraries, we need to copy the following decompiled java classes into our newly created Eclipse project under a different java package structure.

Creating Pager component

Decompile:
com.sapportals.wcm.rendering.component.cm.Pager.class

com.sapportals.wcm.rendering.component.cm.PagerComponent.class

com.sapportals.wcm.rendering.component.cm.PagerInterval.class

com.sapportals.wcm.rendering.component.cm.LightComponent.class

 which are in

com.sap.km.cm.ui.flex/private/lib/km.appl.ui.flex.component_core.jar

and create these four classes in your project.

For example com.my_company.collectionrenderer.MyPager.java,

com.my_company.collectionrenderer.PagerComponent.java,

com.my_company.collectionrenderer.PagerInterval.java and com.sapportals.wcm.rendering.component.cm.LightComponent.java.

Once this is done, you should make sure that all references of PagerComponent, PagerInterval and LightComponent in your classes are replaced with your local classes.

Now customize the Pager component to your needs and deploy the application on to your server and register the pager component (Check the screenshot below).

Creating collection renderer with Pager

Decompile:

com.sapportals.wcm.rendering.collection.cm.CollectionListRenderer.class

com.sapportals.wcm.rendering.collection.CollectionRendererDecorator.class

com.sapportals.wcm.rendering.collection.cm.PropertyColumnRenderer.class

com.sapportals.wcm.rendering.collection.cm.PropertyHeaderRenderer.class

which are in com.sap.km.cm.ui.flex/private/lib/km.appl.ui.flex.collection_core.jar

and create these four classes in your project.

For example com.my_company.collectionrenderer.MyCollectionListRenderer.java

com.my_company.collectionrenderer.CollectionRendererDecorator.java

com.my_company.collectionrenderer.PropertyColumnRenderer.java and

com.my_company.collectionrenderer.PropertyHeaderRenderer.java

Once this is done, make sure that all references of CollectionRendererDecorator, PropertyColumnRenderer and PropertyHeaderRenderer in your classes are replaced with your local classes.

Now in CollectionRendererDecorator class register your custom pager component:

In the below code MyPager is the alias of our pager component which we registered in component mapping previously

private Component renderPager() throws WcmException {

        IComponent comp = ComponentFactory.getInstance().getComponent("MyPager", proxy, renderer, resource, null);

        if (comp == null) {

            return EmptyHtmlFragment.render();

        } else {

            comp.setData(valueMap);

            return comp.render();

        }

}

Now we should register the CollectionRendererDecorator by overriding the renderDecorations method of LightCollectionRenderer class in MyCollectionListRenderer.

protected Component renderDecorations(Component comp) throws WcmException {

        return new CollectionRendererDecorator(comp, this, getProxy(), getComponentValueMap(), getParentCollection());

}

Now deploy the application on to your server and register the collection renderer(Check the screenshot below).

Please restart the portal so that the CrtClassloader finds the deployed classes of your application.

As the custom collection renderer is now registered you can use it in any Layoutset and check the pager functionality.

Hope I could give you an overall idea in creating a custom pager component, if you still have questions keep posting.