Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

Microsoft Silverlight integration in Webdynpro ABAP

The Webdynpro UI elements like table, radio button etc. are some of the Graphical User interface elements provided by the SAP for developing Webdynpro applications. Developers assemble these prescribed UI elements in their layout according to the requirement.
Right now in Webdynpro ABAP there is no infrastructure like creating a customer specific UI element. In order to enable the scope of integration of different technologies and Customer specific UI blocks sap has provided the following.
  1. Microsoft Silverlight
  2. Adobe Flash Island
We will study about the Adobe flash Island in the upcoming posts.

Microsoft Silverlight:

Microsoft Silverlight is a technology for developing Rich Internet Applications (RIA). The developed RIAs can be run on all common browser platforms and operating systems. These applications are executed within the browser with the Aid of Silverlight plug-in. To use your own Microsoft Silverlight component within Webdynpro, it must integrate the library provided by Netweaver. This enables communication between the Microsoft Silverlight application and the Webdynpro framework.
In Webdynpro the Silverlight UI element is generated in a View. Then this UI elements source is assigned with a Microsoft Silverlight application of format (.XAP). Also for the component to access it this Silverlight application must be added to the mime repository of the component.

How to create a Microsoft Silverlight Application?

The Microsoft Silverlight Application can be developed in a Microsoft Visual Studio Development environment. This project consists of three parts:
  1. The Microsoft Silverlight library provided by SAP Netweaver, and necessary for communication between the Microsoft Silverlight application and the Webdynpro Framework.
  2. Your own Microsoft Silverlight component
  3. Application developers must call their self-developed Microsoft Silverlight components in the Silverlight Island wrapper. The Silverlight Island component provides methods to access data of the UI element and trigger events.

To implement Microsoft Silverlight Island applications for Webdynpro ABAP, you require the following:
  • Microsoft Visual Studio and the Silverlight Add-on (development environment)
  • Silverlight browser plug-in (for using Microsoft Silverlight Islands on the client)
  • The Microsoft Silverlight library provided by SAP Netweaver:
    • This library is stored in the MIME Repository under:
    • SAP/PUBLIC/BC/UR/nw7/Silverlight Islands
    • The Microsoft Silverlight application provided by the customer as an XAP file
Being an ABAP developer you don’t have to be worried about developing a Microsoft Silverlight component. Concerned person in the organization will take care of this. Just get to know how to use this Silverlight in a Webdynpro application.

Now let us develop a simple Webdynpro application that demonstrates the Use of the Silverlight UI element.

Step 1: For developing a Silverlight UI element we need a Microsoft Silverlight component. As we don’t have the silver light component let’s take one of the Silverlight component developed by the SAP.

Go to the Tcode SE80 and open the Webdynpro component WDR_TEST_SILVERLIGHT developed by SAP. In the mime repository of the component you will be able to see the Silverlight component used by the SAP for that component.

Right click n the Silverlight simple.xap and choose download.

A pop up will trigger. Choose the file location and click on save.

Step 2: Go to Tcode SE80 and create a Webdynpro component.

Assign the component to the package or save it in the local object.

Step 3: Import the Microsoft Silverlight component in the Webdynpro component as shown below.

Choose the silver light component and select open.

System will prompt for creating a mime type. Press save.

Now you can see the Silverlight component in the mime repository of your component.

Step 4: Go to the layout tab of the view controller and insert a view container UI element.

The purpose of this view container is to hold the silver light UI element. Remember I mentioned above in the post Silverlight UI element is generated in a view and this view container is required for us to hold that view.

Step 5: To create a Silverlight UI element. Right click on the view controller and create a view.

Enter the view name and description and press enter.

Whenever the View is created the root of all the UI elements “ROOTUIELEMENTCONTAINER ”  will be of an UI element type transparent container.  

For a view to be used as a Silverlight UI element we need to convert the Root UI element container to the type of Silverlight Island. To convert it, right click on the root UI element Container and Select Swap root element.

Provide the type as Silverlight Island and press enter.

As I mentioned earlier on the top of the post, the Silverlight UI element must be assigned to the Microsoft silver light component. Now assign the Silverlight component which we imported in the mime repository to the source property of the Silverlight island UI element.

Source, Height and Width are the important properties to be specified to the Silverlight Island.

Step 6: Go to the window controller and embed the Silverlight view in the view container we have created in the main view.

Provide the view to be embedded as the Silverlight and press enter.

Save and activate the whole component.

Step 7: Create a Webdynpro application to test the component.


We can also pass the data to the Silverlight using it data source properties, create event for the Silverlight UI element. We will more of this like how to pass the data and handle events in the Upcoming posts
Note: Ref to standard Webdynpro demo components for more information on this.

Component Names:

About Arun


Powered by Blogger.