Skip to Content

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 ca.name and cma.name property in configArchive.properties

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 http://help.sap.com 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…

To report this post you need to login first.

6 Comments

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

  1. Sandip Agarwalla
    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,
    Sandip

    (0) 
  2. Kapil Kamble
    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. com.sap.portal.plugins.config-archiver: Config archive successfully created (time to export 578 ms)
    2. com.sap.portal.plugins.config-archiver: Invalid structure (missing /FlexibleUIComponents/src.config/install/meta/expanded folder)
    3. com.sap.portal.plugins.config-archiver: No privateArchive.properties 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.
    Thanks
    Kapil.
    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]

    (0) 
  3. PABLO REIGRODRIGUEZ

    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!
    Pablo

    (0) 

Leave a Reply