With the S10 framework, you can implement user dialogs in global ABAP classes and use them across applications. The ABAP class thus contains not only the processing of data, but also the associated user interface.

There are two ways to integrate the dialog parts of other classes into your application:

Here we discuss the first option. It is less problematic than embedding via iFrames, since the two interfaces then remain independent. For the iFrames solution, you can find all the details and an example in the tutorial Inline frames.

1. Showing dialogs of the class library

For our example, we include a "Display service notifications" pushbutton in a page with customer information (here from the "CIS" demo application):

The HTML coding for this:

<div class="subtitle">
   Service
</div>
<div style="padding: 10px 10px 0px 10px">
  <button type="button" class="button" 
       onclick="S10Apply('list_notifications')">
                Display service notifications
  </button>
</div>

In the ABAP method "list_notifications" we create an object of the class /s10/customer, which implements the notification list, and call the list as a normal ABAP method:

  method list_notifications.

* create customer object
    data:  mycustomer  type ref to /s10/customer.
    create object mycustomer.
    
* display notification list
    mycustomer->list_notifications( kunnr ).

  endmethod.

There is nothing more to do; the user gets the desired list when clicking on "Show service messages". Interactions (filtering the data, line selection) are possible there. They are implemented independently of our own application in the /s10/customer class:

The "Back" button takes us back to our application.

 

2. Implementation of the dialog in the ABAP class library

One usually develops a dialog part locally, that is, in a separate ABAP program and with local HTML files. The S10 generation tools are useful for a quick start; in our case, for example, the generation of a list of service notifications from the VIQMEL table:

Then we transport the required HTML views into the SAP MIME repository, and the ABAP program in a suitable form into the SE24 ABAP class library.

For our example, we choose "/s10/customer" as the class name, where instead of /s10/ we would use the namespace you use. In the SAP MIME Repository the HTML files are then stored under /sap/bc/bsp/s10/public/customer, with s10 again replaced by your namespace.

We need only one HTML file, "customer.notifications.html":

Now the ABAP part. First we have to store the classes defined locally so far under suitable names in the class library.

In the locally developed application the classes look as follows, here at the example "viqmel_detail":

class viqmel_detail definition inheriting from /s10/any.

public section.

data:
   qmnum type viqmel-qmnum,  
   equnr type viqmel-equnr, 
   serialnr type viqmel-serialnr,
   qmdab type viqmel-qmdab.

* database table name
    constants:
      dbtablename type string value 'VIQMEL'. 

endclass.

class viqmel_detail implementation.

endclass.

ABAP class library:

Tip: To transfer the local class to the class library, the "source code-based" view in SE24 is handy, since we can simply copy the class definition into it:

 

Subsequently, we include the attributes needed in the HTML interface in the /s10/customer class:

 

We cannot enter the type of the table "tabviqmel" directly, but we can in the source text based view:

 

Now the required methods are still missing; we transfer these methods most simply, as above, directly in the source code:

The methods then appear in the method overview after generation of the class:

 

3. Conclusion