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 
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 ToWe 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.
20 Comments
