Skip to Content

Flexible UI component development demystified

A set of useful UI components bundled together.

Since months I was ask more and more often about how to get started with Flexible UI component development in the SAP NetWeaver Developer Studio. Since there are no wizards or plugins for Flexible UI components available, developers often struggle with the project setup and the required XML configuration file. I have put together a sample SAP NetWeaver Developer Studio project, including the most requested UI components I was faced the last few months. Beside the java soruce code, also the XML file configuration is plugged in.

Components in details…

You will find the following components in the sample ZIP archive:

  1. Layout Controller: The sample implements a simple layout plus an own neutral control, which is required to place the sub-elements (ResourceRenderer and CollectionRenderer) in the corresponding area.
  2. Collection Renderer: This sample renders just some resource information in a grid layout.
  3. Resource Renderer: This sample renders the display name propertiy in a grid layout
  4. Property Renderer: This sample renders the VersionHistrory size in a property
  5. External UI Command: This sample renders a UI command which launches an ecternet URL.
  6. Screenflow Command: This sample renders a action on a resource with a confirmation dialogue and event handling.

The configuration is stored in the src.config path in the PAR file. You will find a single configurable instance file (*.co.xml) for each component. image

I want develop my own component – and now ?

Of course you simply can copy the whole project and rename the relevant folder and files on the file system. Import the renamed project to SAP NetWeaver Developer Studio.

  1. Rename the folder of the project in the filesystem
  2. Rename the project name in the .project file if you want to import it in parallel to the sample project.
  3. Adjust the project variable KMC_LIBS and possibly others you have set.
  4. Make sure you have the latest KMC library in the path of the variable KMC_LIBS
  5. Adjust the java package structure
  6. Remove all UI component samples you do not want to use
  7. Remove all configuration files of the deleted components
  8. Adjust the XML files for the new package structure
  9. Adjust the application key in IRFServiceWrapper interface
  10. Adjust and property in

So far it should work, to have the project ready for compilation and build. At the end I should not miss to mention, where the download of the sample is stored: Of course in the SDN !! Download Flexible UI components samples…

Additional information

Further information on Flexible UI development can be found in the following code samples:

Also keep in mind the checklist we offer on and the information in the SAP NetWeaver Developer Guide. Have a good luck with the samples and let me know, if you are looking for additional information…

You must be Logged on to comment or reply to a post.
  • Hi Thilo,
    This is awesome. This will definitely help the KMC Dev beginnners…

    I would like to have some clarifications, how about creating the XML configuration files under src.config and the *.properties file….I have created a custom renderer but with out these 2 configs, still it’s doing the job :)…So please let me how should I create all the above mentioned configurations.

    Best regards,

  • Hi Thilo

    First of all, I appreciate your time and efforts in putting up such an informative and useful blog for beginners like us.
    I followed your blog.
    I downloaded the sample project provided and tried to implement it the way it is.
    I imported it in my studio, replaced appropriate jar files to get it in rebuildable state and then deployed it on my portal.
    After deployement and restarting the server, I created and applied the new layout controller to the layout set of KM iview.
    However a blank KM page was displayed.
    I checked the deploy messages in NWDS, it showed me following warning and info messages:
    1. Config archive successfully created (time to export 578 ms)
    2. Invalid structure (missing /FlexibleUIComponents/src.config/install/meta/expanded folder)
    3. No file is defined.
    Please note, I have not modified anything in the downloaded sample project, just fixed it with required jar files picked up from the server directories.
    I am using SP15 NWDS and EP server is 7.00SP16.

    As a beginner, I just want to first get this downloaded sample project implementation correct.
    Please let me know corrections/pointers for this. It would be highly appreciated.
    PS: You may reply to me at this forum thread if you want your replies to be rewarded
    /message/8709273#8709273 [original link is broken]

  • Hi Thilo,

    Great blog, but it seems most of the links are broken. Will it be possible to amend them specially on “Additional information” section?

    Thanks in advance!