Skip to Content

Introduction

I will first introduce what a widget is and than will proceed to the hands on where I will build one small widget as the starting point so that you can explore that area more and try to make something good. The main idea for writing this Blog is that when I entered into the Widgets I was not able to find the right document by which I can go and start making them. This blog will be a momentum to all who are looking to make first ‘Hello World’ widget.

 

Widget

 

 

They are the desktop applications which are light weight, consuming web services, BAPIs, RFCs etc providing some meaningful information in the form of rich user interface.They are the form of Composites because we are consuming services and applying some business logic if required and presenting to the user in a good rich looking user interfaces which are not possible with the other SAP Composition Tools like Web DynPro, Visual Composer etc.

Main key features of the widgets are:

Faster development, easy to use, light weight applications, portable, multi tasking, less load on CPU etc.

Normally we use widgets in those areas in which we have to work daily, like if I want to see what is the daily report of the sales, than I take that Sales service(can be web service, BAPI, RFC) and make a widget out of that.

Lets take a very simple example by consuming one BAPI ‘BAPI_FLIGHT_GETLIST’ from the ECC which gives me the flight detail and other information. (You can execute that in the ECC and find out the result).

Now suppose I am Travel Agent and want to tell the timing of some flight to the customer, so I go to the se37 transaction in the ECC and than put the Function Module ‘BAPI_FLIGHT_GETLIST’ to get the detail. Every time I have to log on the ECC system to get the information, so it’s a painful thing(because the same screen again and again with same colors), what I need in this case is some desktop application on which I double click and will give me the desired result, this application we can say as a Widget.

Similarly you can think of the Sales Head of some Company who wants to know how much sale has happened, so he logs to some system and get the information from there. This is really very painful, his life can become easy if he is having some Widget which will bring the desired result.

In a nutshell widgets are small desktop applications that are used to monitor some process that we need to execute frequently or the process that are very much used in any organization.

They have rich user interfaces, fast in data retrieval and lots of other good things that you will come to know, when you start making widgets.

 

Components required to make a widget

 

1) JDK1.6: click the link to download.

2) Widget Engine: is a javascript runtime environment for executing small files called widgets (small desktop applications) over Operating System. Popular Widget Engines include Yahoo! Widget Engine, Dashboard Widgets for Apple Machintosh, Google Desktop, Gadgets in Microsoft Vista etc. I use Yahoo Widget Engine only.

Click here to download Yahoo Widget Engine.

3) Windows XP

 

Optional

 

If you are good in Java Script than its fine, else use some IDE which helps in making widget. The best part of using an IDE is that most of the code is written by the IDE itself you just have to concentrate on the Business Logic part. I prefer IDE only.I am having SAP Widget Development SDK Version: 3.3.0. Plug in for Eclipse are also available at this link. ( to access this you must have a proper SDN id).SAP Widget Foundation are downloadable from SAP internal site, click this, or if you are not on the SAP than you have to search it.I am using SAP as the backend so need to install SAP Widget Foundation which connects to SAP using SAP Java Connector and Web services and supports single sign-on (SSO)

To use the SAP as the backend you will have to configure SAP Widget Foundation. This you will get in the form of jar, just double click it and it will follow some setup.

To install SAP Widget Foundation as a standalone application, proceed as follows:

1. Run the SAPWidgetFoundation.jar file (double click on it).The Install SAP Widget Foundation window appears.

 

 

2. Click Next and select the I agree with license check box.

3. Click Next and do one of the following:

• To use the default installation folder, click Next.

• To specify an installation folder, select the installation destination folder for SAP WidgetFoundation using the Browse button and click Next.

Again click Next, Installation result window appears:

 

 

Uncheck the Launch SAP Widget Foundation 

4. Click Finish. 

Go to StartàProgramsàSAP Widget FoundationàSAP Widget Foundation 

An icon will be added to the system tray, like  

To configure SAP Widget Foundation, follow the stepsIn the system tray, right click the icon and select Configuration.

The SAP Widget Enterprise Foundation Configuration screen appears.

 

 

Check the Launch SAP Widget Foundation on Startup so that it automatically start running every time system restart. Click Advance Settings to add a Service Provider Instance

Under Service Providers click on Manage Service Providers Types

 

 

Click Create Instance in front of JCO and give the name as WidCon, click OkThis will be added under Service Overview.

 

 

Icon which is in red color before the WidCon showing that the connection is not established. So we have to give the required credentials for the back end connectivity.Click Create new identity under category Identification settings to give the login credential of the SAP Backend(I am using SAP ECC as the backend for this Blog). Give the name as ECC_BkEnd and click Ok.Click the ECC_BkEnd i.e. currently added and fill the required informationDepending upon your system landscape settings, enter the values. For my case Single Sign on is not configured i.e. why I am using User Name and Password as the Identity type.

 

 

Click SaveClick on WidCon under the category Service Providers to give the credentials for the backend.

 

 

Input the Client, Language, AS Host, System Number, System ID depending upon your system settings.In the Authentication Settings give the Identity Instance as ECC_BkEnd.Click on Save. Click SAP RFC Service and choose WidCon as the Service Provider instance

 

 

Click Save  Click on the Refresh link under the WidCon, this time it will turn green followed by the green color check mark in the system tray.

You can check the status of the connection by clicking the Service Providers–>WidCon–>Check Status

Pop up window will come confirming the successful test.By this SAP Widget Foundation is configured. Now we will start building the widget

Launch the IDE,it will ask for the workspace, click on Browse if you want to save the work at some specific location or continue with the default.

IDE will be something like this. I am using SAP Widget Development SDK Vesion 3.3.0

 

 

 

 To start building a widget we have to create a new ProjectGo to File–>New Project–>SAP Widgets–>Sap Widgets Project

 

 

Click Next

 

 

 

 

Give the name as FirstWidget and choose Custom Widget Template and click Finish.

 

 

Now I will configure the ECC system so that BAPI_FLIGHT_GETLIST can be called. On the upper hand right corner RFC view is there, click on the plus sign, a window will open, give the parameter as shown in the picture below. Select JCO – WidCon from the drop down menu and type BAPI_FLIGHT_GETLIST in the search box, click search, BAPI will appear in the window, check mark it and click Finish.

 

 

 

Now go the UI part, enlarge the UI screen, First Widget-Main-Blue, resize the UI like shown in the picture.

 

In

 

In the Outline view, expand the View main-view node and select the View background-view.We will create table here so that data from the BAPI will come in tabular form.Open the Palette on the right and select the c.Table component and click on the middle part i.e. in blue color to add the columns. 3 colums will be created as Column1, Column2, Column3.In the Outline view, under the View main-view node, select Component referenced1.We will change the column name as Airline, City From, City To.In the Component tab, expand the Properties node.Select the headers property.

 

 

Change the name as Airline
City From
City To
We will add the fields to the columns we created so that they will show the data that we want.Go to the RFC view window and expand it like this:

 

 

Here FLIGHT_LIST is returning the data. Drag & Drop AIRLINE to the first column similarly drag & drop CITYFROM to second column and CITYTO to third column. Enable controller automatic generation functionality for the main-view view by clicking the view top right corner. This will help in fetching the data from the backend.

 

 

An arrow pointing downwards will come as shown in the picture above.

 

Click on the debug icon on the toolbar to run the Widget.

 

 

 

 

Select Run Yahoo Widget

 

Widget will be running by this time, it will be somewhat like this depending upon the data at your backend.

 

 

 

 

This is the end of my blog, hope you are also having the Widget running infront of you.

To report this post you need to login first.

20 Comments

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

  1. Kapil Kamble
    Hi Vivek
    I appreciate your efforts for putting up such lucid and illustrative blogs on creation of widgets for beginners.

    I have a query. I use NWDS – sp9. In the required components, u ve asked to use jdk-1.6 but not mentioned about IDE’s version. So, can i go ahead and use ide of sp9 version ? Will I face any problem ? Do you have any idea ?
    Awaiting your reply..
    Regards
    Kapil S Kamble

    (0) 
    1. Vivek Mishra Post author
      Dear Kapil
      As far as I tried you cannot make a wiget on NWDS – sp9.
      You need to have Eclipse 3.3.0 or above for the development.
      One possible reason that NWDS – sp9 need JDK1.4 for compilation and here we have to use JDK1.6, so there is a clash.
      I mentioned in my blog that Eclipse plug in are available. As per the Blog go to https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/100ad59a-7b6b-2a10-8ab5-e6078fa8e5b8 and download the SAP Widget Foundation.zip file.
      Perform the following steps:
      1) Open your Eclipse, go to Select Help > Software Updates > Find and Install.
      •     Select Search for new features to install and click Next.
      •     The Install window appears.
      •     Click New Archived Site.
      •     The Select Local Site Archive window appears.
      •     Select the SAP Widget Development Tools.zip file and click Open.
      •     The Edit Local Site window appears.
      •     Click OK.
      2) In the Install window, in the Sites to include in search list, select the following check boxes:
      •     Europa Discovery Site
      •     SAP Widget Development Tools.zip
      •     Click Finish.
      •     The Update Site Mirrors window appears.
      3) In the Update Site Mirrors, select Europe Discovery Site.
      4) Click OK.
      •     The Updates window appears.
      •     In the Select the features to install list, select SAP Widget Development Tools.zip.
      •     To select all plugins that SAP Widget Development Tools depends on, click Select Required.
      •     Click Next.
      •     The Install window appears.
      •     Select I accept the terms in the license agreement and click Next.
      •     Click Finish.
      •     The Verification window appears.
      •     Click Install All.
      •     The Install/Update window appears.
      •     Click Yes.
      •     The features required for SAP Widget Development Tools are installed.
      •     Restart Eclipse.

      SAP Widget Development Tools are automatically launched with Eclipse.

      Try this and let me know

      (0) 
      1. Anonymous
        Hi Vivek

        Appreciate your effort…
        I am trying to integrate Widget with CRM 7.0
        Can you please let me know if any kind of widgets can be used or there retsrictions?
        Thanks in advance.
        Runali

        (0) 
        1. Vivek Mishra Post author
          Hi Runali

          I worked on widgets very long time back, but I am sure you can integrate with CRM system.
          Input the CRM credentials where I gave the SAP system(IDES, if I am not wrong) and try to use the services as I mentioned, I hope you can do that.
          All the best.
          (0) 
  2. Alvaro Tejada Galindo
    Very nice blog…Makes me wanna test the SAP Widgets Foundation (Ok…I downloaded a long time ago but somehow never tried it).

    But…Images looks pretty bad -:(

    Anyway, good job! -;)

    Greetings,

    Blag.

    (0) 
  3. SRI S
    Hi Vivek
    I appreciate your efforts in writing the blog for beginners.
    I am new to widgets and Eclipse ,I have one question . What are all the softwares we need to install on the user desk top and do we need to take care of any transports as we do for regualar ABAP programs .
    Thanks
    Srinivas
    (0) 
    1. Vivek Mishra Post author
      Dear Srini
      You need to have JDK1.6 and Widget Engine (may be yahoo or other, go through the Blog).
      For the person who is good in JavaScript needs only these two things and the person who is not good in JavaScript will need to have an Integrated Development Environment(IDE). This can be Eclipse 3.3.0
      Regarding the ABAP transport I dont have much visibility in that area.
      (0) 
      1. SRI S
        Hi Vivek ,
        Thanks, My question was How do you push the widget to the END user desktop once you can completed the development .
        Thanks,
        Srinivas
        (0) 
        1. Vivek Mishra Post author
          Whenever you create a widget you get a .kon file that you have to transport. You just have to copy and paste it on the desktop on which you want to run your widget.
          But ensure that on that desktop JDK1.6, any widget engine and SAP Widget Foundation(this is needed when you want to access any SAP system)  are pre installed and configured before running the widget.
          (0) 
  4. Ioan Olah
    Hello,

    I created a widget who reads a table ITAB with 3 fields (DATE[8], DECIMAL[8], DECIMAL[10]) which I precent using a c.Table component. How can I format and align the numbers?\

    Ioan

    (0) 
    1. Vivek Mishra Post author
      Hi Ioan
      When you at c.Table, go to the propertis of it and there you will found the parameters to change the columns and rows, from there you can set the parameters/rows for your table like how many rows or colums you want. Its easy try to find that.
      I will be available on 24th March, not in office right now.
      Regards
      Vivek
      (0) 
  5. SANGHAMITRA KARTHIK
    Hi Vivek,

    Thanks for sharing your experience. After I going through your blog, I am encourged to try and create a widget. Where can I get the list of BAPIs to use for the Widget or can I use any BAPIs or Program ?

    Sanghamitra

    (0) 
    1. Vivek Mishra Post author
      Hi Sanghamitra
      You can get the BAPI’s or or other function modules from your different SAP systems connected like CRM, SRM, BW etc in your landscape. Please refer my example JCo-WidCon, in which I used the SAP ECC system and given the name ‘ECC_Bk_End’ to get the BAPIs.
      You have to set the parameters in Service Provider>JCO to access SAP systems.

      I am not in office right now and will be back on 24th March…Only then I will response to other technical queries.
      Regards
      Vivek

      (0) 
  6. Alpesh Saparia
    Hi Vivek,

    It was really nice blog.
    I have one question, I am access servers through Router Strings, Is there any option to provide router string in Service Provider Setting?

    Thanks,
    Alpesh

    (0) 
  7. Low Soon Wee
    Hi, i have tried your widget and i could run the widget but theres no data shown. Why is it so? and can you tell me how can i display my data from my query that i have created on the widget? Do i have to write programs for it?
    (0) 
  8. Atila Erdogan
    hallo,

    iam new in SAP Widgets and i want to know something.
    How can i edit the Cell-Input of my c.table-component? is this possible and how can anybody give me some information plz:)

    thx in advance

    (0) 
  9. Venkata Naga Chaitanya Bhatlapenumarthi
    Hi Folks,

    I have SAP widgets foundation working I was asked by the end user to
    1)re-arrange the columns in the display how do I do that? bascially I’m trying to display RFC FM data .
    2)can you clearly explain the palette function c.table functionality(usage).
    3)can you have any documentation to use the widgets interactively.For example I have solution mgmr SM’s dispayed on my widgets by double click on c.maintable area it navigates using http link.

    (0) 

Leave a Reply