Skip to Content

Introduction

Its a bit curious that there is very little documentation on how to provide services such as filtering and sorting of resources on a layoutset. Though these services are present on standard layout sets provided by SAP for KM, most guides are about how to achieve a simple rendering of resources , restricted to showing properties and different layout schemes. However applying a bit of hack this is clearly possible and I hope this can serve as a basis for using more advanced controls such as a Tab strip or Tree control on a layoutset (when developing from scratch) with in Flex UI .

I have left out some of the details (on navigation on how to reach the LayoutSets or inspecting their properties) which I guess most Flex UI users will be aware of.

SimpleExplorer

The idea here would be to modify a standard SAP provided layoutset to provide a filtering service. The victim for mutiliation in this case is the SimpleExplorer layoutset, being the simplest of them all. A not too fancy layout set that displays name and description of a resource , with services around it like sort and details (view).
image

A quick inspection of its anatomy reveals itself as having a Layout Controller SimpleLayoutController a Collection Renderer SimpleCollectionRenderer and a Resource Renderer SimpleResourceRender. The candidate here for modification is the SimpleLayoutController since LayoutControllers are reponsible for creation of controls (instance of the class com.sapportals.wdf.stack.Control) which inturn creates the collection renderers and invokes their render method. The idea here is to replace and plug in a new control which contains UI for filtering and has the necessary events to perform the actual filtering. So we would also need to modify the NeutralContol which the Layout controller currently uses.

Migrate the Controller and Control

Well to start making changes we would need to first get the code into customer namespace. Quicksteps :-

  1. Get to the source of com.sapportals.wcm.rendering.layout.cm.SimpleLayoutController and modify its namespace to a customer namespace. This would be by using your class locator the Java decompiler and Eclipse/NWDS.
  2. The other class file that needs to be taken into customer namespace is the com.sapportals.wcm.rendering.control.cm.NeutralControl instantiated by SimpleLayoutController.
  3. Create a Portal application project and attach the renamed java files. In this case com.sdn.samples.flexsort.layout.SimpleLayoutControllerWithFilter and com.sdn.samples.flexsort.layout.FilterControl respectively
  4. Develop a Resouce list filter that will filter based on parameters passed to it (idea here is to populate these parameters based on what the user has entered)
  5. Attach your service wrapper class and with startup true in portalapp.xml and include knowledgemanagement in your SharingReference

image

Code changes

Because the filter parameters need to be supplied through user interaction a simple form needs to developed , input field and button to action the filtering. Only instances of the com.sapportals.wdf.stack.Control can have Handler methods for events within the Flex UI framework. In this case FilterControl. Some of the modifications that need to be performed are as follows.

  1. Change the instantiation in the class=”style3″>createControls method of SimpleLayoutControllerWithFilter
    private void createControls()
    {
    super.controls = new Control[1];
    super.controls[0] = new FilterControl(getProxy(), null);
    }
    This is for the instantiation of FilterControl which will invoke the collection renderer and trigger its rendering and will contain the handler code for filter events
  2. Add the following code to the class=”style3″>render() method of the FilterControl
    GridLayout masterLayout = new GridLayout();
    InputField filterInput = new InputField("search_input");
    filterInput.setType(DataType.STRING);

    Label label = new Label("search_label");
    label.setText("Enter Name to Filter");
    label.setDesign(TextViewDesign.LABEL);
    label.setLabelFor(filterInput);

    Button filterButton = new Button(WdfEventDispatcher.dispatchableControlID(this, "onSetFilters", "_filterset"));
    filterButton.setText("Filter");
    filterButton.setOnClick(WdfEventDispatcher.DISPATCH_EVENT);

    GridLayoutCell cellInput = new GridLayoutCell(filterInput);
    GridLayoutCell cellLabel = new GridLayoutCell(label);
    GridLayoutCell cellButton = new GridLayoutCell(filterButton);

    GridLayout searchLayout = new GridLayout();

    GridLayout filterLayout = new GridLayout();

    filterLayout.addCell(1, 1, cellLabel);
    filterLayout.addCell(1, 2, cellInput);
    filterLayout.addCell(1, 3, cellButton);

    filterLayout.setCellSpacing(3);
    masterLayout.addComponent(1, 1, filterLayout);

    This creates a input controls for typing in the filter criteria and actioning it. The WdfEventDispatcher.dispatchableControlID(this, "onSetFilters", "_filterset") registers the current control (FilterControl) as the handler class for the filter event. The event will be dispatched to method onSetFilters by reflection.

  3. Fill in the event handler class=”style3″>onSetFilters(Event event) within the class FilterControl (refer code , I have commented as much as possible minus SAP provided code)
Code for FilterControl

 

Code for SimpleResouceFilter

Configure

Build the project and deploy into Portal and perform the following steps

  1. Define a new LayoutController SimpleLayoutControllerWithFilter by mapping it to the Java class in this case com.sdn.samples.flexsort.layout.SimpleLayoutControllerWithFilter. Navigation path to perform this setting class=”style8″>System Administration ->System Configuration ->Content Management -> User Interface -> Mapping (Advanced options) -> Layout Controller -> New Layout Controller
  2. Define a new Resource List filter SimpleResourceFilter mapping it to the java class com.sdn.samples.flexsort.filter.SimpleResouceFilter Navigation path to perform this setting. class=”style8″>System Configuration ->Content Management ->Global Services ->Resource List Filters
  3. Duplicate SimpleCollectionRenderer to SimpleCollectionRendererWithFilter and attach the newly defined Resouce List filter SimpleResourceFilter Navigation path to perform this setting. class=”style8″>System Configuration ->Content Management ->User Interface ->Settings ->Collection List Renderer Settings
  4. Duplicate the layout set SimpleExplorer to SimpleExplorerWithFilter. Edit and attach the new Layout Controller SimpleLayoutControllerWithFilter and Collection Renderer SimpleCollectionRendererWithFilter

Configuration

image

Output

1.Preview Layout set against a folder.

image

2.Enter folder Name and press Filter

image

3.Result !!!

   

Conclusion

 

Using the Resource List filter is one way of achieving filtering a whole new way exists using the TypedResouceList . A sublist of the ResourceList can be passed in through the call ris.setTypedResourceList where ris being the object of IRendererStatus. By doing this the Collection Renderer has only the sublist to render thus achieving filtering.

Though the UI components used here in the layout set perform only a rudimentary task like filtering the above concept can be expanded to use more advanced UI contols and functions in Flex UI.

 

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Josef K├Ânig
    Cool information! I looks to me, as if the filtering happens after the retrieval of the resources. Is there a way to add this filter info to the backend system?
    (0) 
  2. Joerg Loechner
    Dear Pran,

    can you tell me where to find the class locator and how to use the decompiler? I have problems to “import” the given code into my project space!

    May I have your sample project files?

    Thanks in Advance
    Regards
    Joerg Loechner

    (0) 
  3. Alfio Nucifora
    Hi Pran,

    I modified a standard SAP provided layoutset to provide a filtering service exactly like explained in your blog.

    Unfortunately, it’s working properly in EP6.0 SP09, but don’t work in SP15.

    The problem seems this:
    after click on “Filter” button, the runtime environment correctly calls “onSetFilters” event handler, but at the end of this method,
    the execution flow don’t invoke “filterResourceList” method in the “SimpleResourceFilter” class.

    I repeat that this filter work properly in SP09, with the same KM configuration.

    Have you any ideas for this behavior?

    Please, i need urgent help.
    Thanks in advantage.

    Regards,
    Alfio Nucifora.
    alfio.nucifora@libero.it

    (0) 
  4. Wouter Delellio
    Hi,

    I implemented this blog on my local sever. And here it is working fine. When I now wanted to deploy it on our real server (EP 7.01 SP2) it’s not working anymore.

    I did some debugging and came to the conclusion that the filterparameters are being set correctly, but the ResourceFilter itself is not being called. (It’s calles only once – the first time when it is accessed).

    Does anybody know why this is behaving differently on this system and how to overcome this?

    Thanks

    (0) 

Leave a Reply