Skip to Content

How to develop Web Dynpro UI for your CAF project ?

As we all know that CAF mainly consists of three layers –

1. Process Layer (Guided Procedures)

2. Services Layer

3. UI Layer.

Recently we had very good blogs which gave us better understanding of Process Layer or GP (reference : The specified item was not found. by Anilkumar and The specified item was not found. by Richard. Similarly The specified item was not found. by Richard gave good insight on Services Layer. So whats left now ? UI Layer 🙂

I would like to share my knowledge on developing a Web Dynpro application for your CAF project which has ready and working entity and application services. I have come across two ways in which one can develop his web dynpro application. First is to expose the entity or application service in the form of a web service and use it in a Web Dynpro model. Second method is the one provided by the CAF wherein it generates a web dynpro model out of entity and application services in the Web Dynpro DC of the corresponding CAF project. I will try to explain both.

Lets take SAP’s traditional example of flight application. Suppose you create a CAF project “xflights”. In this project, Bapi_Flight_Getlist is imported as external service. Accordingly, its JCO destination is maintained in the service registry . You create an entity service “Flight” with attributes airlineId, airline, flightDate, arrivalDate, cityFrom and cityTo. In this entity service, you create an operation say “findByAirlineId” that fetches you the list of all flights for given airlineId. Similarly, you create an application service “AirlineAS” which is in true sense a wrapper for the Flight entity service and has a similar operation called “findByAirlineId”.

Lets now proceed further in our aim to generate a Web Dynpro model which can be used for creating an application.


In the service explorer of the CAF studio, select your CAF project ie “xflights” here and right click to get a menu. Select “Create Web Dynpro Model” from the options.


When it finishes generating the required interfaces, switch to Web Dynpro perspective of the studio. In the corresponding Web Dynpro DC of the xflights CAF project, you will find that a model has been created with the name “xflights”.


Now, you have the option of making this Web Dynpro DC as model DC by making it public and using it in any other Web Dynpro DC as its child. Or use it for application development. If yours is a really big application, I will suggest to go for the former option. In this case, I m going ahead with the latter option. So, create a component, window and view as shown above in this same DC.


Add the “xflights” model as used model in this component.


Open the Data Modeler of the existing Web Dynpro component for creating the context mappings. From the model, map the “QAirlineASFindByAirlineId” and “QFlightServiceFindByAirlineId” nodes into the component controller and from component controller into the view controller. The “QAirlineASFindByAirlineId” refers to Application service’s operation whereas “QFlightServiceFindByAirlineId” has reference to Entity service’s operation.


Open view controller’s context. Here as one can see in above picture, on passing the airlineId as input parameter to the “QFlightServiceFindByAirlineId” query, it will fetch results on its execution. Accordingly, one can design the view layout by having an input field to take the airlineId and a table to show the fetched results. see below image.


In the wdDoInit of the component controller, initialize the query model by writing the following code

QFlightServiceFindByAirlineId flightModel = FlightServiceProxy.createFindByAirlineIdQuery();

Also, create a method called “getFlightList” and call it when action on Search Button is triggered. In the method “getFlightList”, write the following code

String airlineId = null;
airlineId = wdContext.currentInputParameterStructure_FlightServiceElement().getAirlineId();

QFlightServiceFindByAirlineId flightModel = FlightServiceProxy.createFindByAirlineIdQuery();
IStructure inputParameter = flightModel.getInputParameterStructure();

Save all the metadata. Create an application in this Web Dynpro DC, build the DC, deploy and run the application. Thats it, done !


The other way of doin this same thing is to first of all remotely enable the application/ entity service as shown in the below picture. This property is available in the general tab of the services.


Save all the metadata.

Then select the service that has been made remotely enabled, right click to choose Web Service -> New from the context menu option.



In the next step, choose Simple SOAP as the Default Configuration Type: and click finish button.

Generate all project code, reload, build and deploy the CAF project.

Now, in the explorer browser, open the link “http:///wsnavigator

Here, one can find the newly created Web Service ie “AirlineASWS” in case of this example. Select it to test it, to get its URL and it can be used in any Web Dynpro project/ DC ‘s model. Once the model is ready, further UI development will be similar to as discussed above.

This web blog has been written with the view point to give a brief exposure on UI layer of CAF. For further reference, one can go through the link provided with the web blog title. In it, one can understand the usage of standard Web Dynpro patterns in custom WD applications. Also, how to use the CRUD operations of services in web dynpro application can be understood.

You must be Logged on to comment or reply to a post.
  • Can you please explain how to call the CAF application service methods as well using the CAF WDP model. I tried it but custom methods (e.g. create method) having a entity as input parameter are not appearing in the WDP model with no parameters and returing an IAspect.
    • Hello Dipankar

      Application service methods can be called the same way as we call the entity service methods.

      Yes, you wont notice custom methods in the WDP model. But one can access these custom methods.
      Have you gone through this tutorial ( ? Please have a look into this. On page 36, it tries to access ‘create’ method and on page 41, it tries to use ‘update’ method.
      I hope this clears your doubt.


      • Hi Kapil,
        Thanks for your reply. Yes I’ve already gone through that tutorial and other documents available in SAP site. But nowhere it’s documented how to call the custom app service methods using WDP model. In the tutorial you have mentioned only calling the entity service methods are explained. But what if we have a custom logic for the create method e.g. I’ve one of the fields is a sequential number which needs to be generated by a custom logic?
  • Hi ,
    a very helpul blog .Thanks . I have 2 doubts –

    You have Called the Query by the entity service query.
    Can you give an example with the application service entity?
    Alos can you please expalin wht did you create

    QFlightServiceFindByAirlineId flightModel = FlightServiceProxy.createFindByAirlineIdQuery();

    both in the comp controller as waell as the view controller

    • Hello Shobhendra
      One can call an application service query , the same way as an entity service query is called.

      Shobhendra, have you ever worked with aRFCs model in a Web Dynpro project ? FYI, we create model instance of the BAPI to be executed. The same logic has been applied when we do
      [code]QFlightServiceFindByAirlineId flightModel = FlightServiceProxy.createFindByAirlineIdQuery();
      in both comp controller and view controller. The aim was to create an instance of the query.
      I hope I have answered your query 🙂