Webdynpro Chips,Side Panel, Page Builder

Major New Features are being added to Webdynpro ABAP since Netweaver 7.0 and Ehp 2 to improve the functionality of Webdynpro ABAP and it also provides ability for users to integrate SAP with non-sap world.

One of the key feature is the introduction of CHIP, Side Panel and Page builder features which help user to integrate multiple applications within one Webdynpro and also to integrate non-sap based applications within your ABAP application like Google Maps, Bing Search etc.

SAP also posted a blog on SCN to explain all the new features which is,

http://scn.sap.com/docs/DOC-8303

Main purpose of this blog is to provide basics about CHIPS,Side Panel and Page Builder based on which an ABAP analyst can easily develop a simple application in Webdynpro Abap.

CHIPs :

A CHIP (Collaborative Human Interface Part) is a small, widget-type, encapsulated, stateful piece of software that can be combined in a layout with other CHIPs to form a page or side panel.

It is like a reusable web-dynpro component which can be included in other applications.

For EX: If there is a requirement to develop an application which shows basic material information, then you can do that as a CHIP and can be re-used in any application where there is requirement to show material information.

Side Panel:

Side Panel concept is similar to NWBC Side Panel concept, where we can have a panel and show a webpage or another webdynpro application or integrate with any portal application and can also pass information from main application to side panel.

Page Builder: 

Page Builder is like a canvas where we can put multiple chips and link one chip to another and create a Page.

I will try to explain in brief as how to create each object explained above. Lets start with CHIPs:

Creating CHIPs:

Step 1: Create a Webdynpro Application to show  Flights Carrier Information.

Step 2: Now, this is a CHIP which shows carrier information from SCARR table so we need a method which will get data from SCARR based on CARRID which is an interface field for this CHIP(Like a Plugin). Create an Interface method which will get information from SCARR table.

IS_CARRIER is the importing parameter for this method.

Step 3 : Create Webdynpro CHIP for this application. Chip creation option is available in the Context menu of the Webdynpro component(from where we create webdynpro application).

On the pop-up, give the basic information necessary to save CHIP.

Step 4: Now, we have to create plugin for this CHIP which acts like a link to interact with other webdynpro applications/chips.

If you double click on the CHIP Name on the left side, on the side you will see Inports and Outports Tabs, for this case we need to create a Inport. When Click on Create

First we have to create a Port(Method which we created as the interface method) and then assign a parameter to this Port. Since we have used CARRID in the select query of ours, we are assigning that tas the Parameter for this Port.

SAP is using the concept of Tags which are created for Parameters and these tags are used as wire between two chips. If we have another chip, irrespective of its Importing parameter name, we can just create a Tag with similar name of this and use that as a wire.
This completes the CHIP creation part.

Side Panel Creation: 

Next Step is to create a webdynpro Application with a Side Panel and integrating Chip on that.

If you need Side Panel option for your application, main thing is to have a PageHeader element with a Invisible Container to show side panel in that,

Here I am displaying SFLIGHT data in a table. Main thing to consider is, page header must have name as PAGE_HEADER and Invisible container as TC_SIDEPANEL.

Also, in the DOININT you have initiate an action for opening Side Panel. Below is the code snippet for that,

    cl_wd_side_panel_api=>get_api( )->init( view_controller = wd_this->wd_get_api( )
                                          open_action_name = 'OPEN_SIDE_PANEL' ).

In the above code, its triggering action OPEN_SIDE_PANEL. So, you need to define that action in the MAIN view and for that action, it will allow us to write logic for that event. In this case, write below code,

         cl_wd_side_panel_api=>get_api( )->open( ). - This helps us to open the Side Panel API.

Also, in the same DOINIT, you can write logic to get data from SFLIGHT and update table.

Test the application to make sure it is showing expected results.

Now,open the same application in config mode by adding sap-config-mode=X. As soon as you do that, you will see the Side Panel Manager where you can do the config. for Side Panel.

Here give the configuration name for your side panel and click on Create button,

Once you click that, it opens the Side Panel Configuration screen.

Here you can either click on CHIP catalog button or Add CHIP button to add the chip you have created in Step 1.

If you have used CHIP catalog, just drag and drop your CHIP on the left panel.

I am also adding a WEB Chip on to my Side panel in this case, where I will be opening BING.COM. Just like we added above chip, from the same pop-up select Web-Chip.

Now, you should see your CHIP created in step 1 and a web chip on your Panel Configuration screen.

This step completes the design of the Side Panel. Now, we need to define navigation from main webdynpro application to the chip. If you remember, we created Tag for our CHIP, now we need to create link from main to chip WD using this wire.

For this now on the left side right click on the AIRLINE(CARRID) column,

On the next pop-up, give the Tag carrid and click on ADD, this should add the tag.This will now automatically wire the navigation from main webdynpro to CHIP.

This marks the last step of Side panel creation, now you should have your side panel ready for testing. Below is the screen shot of how it will look like,

Page Builder:

Now we come to the last part of using Page Builder. Page builder is creating configurations to SAP's webdynpro component, WDR_CHIP_PAGE.

Steps: In brief, steps to follow to create a Page are:

1. Create Application Component for WDR_CHIP_PAGE
2. Assign a Configuration Component for this newly created Application component.
3. Create Configuration Component.
4. Open Page Builder from the application component and design your page.

First, Create Application Configuration.

Here we are creating configuration for that WD Application.Once you click on that, it will open a Web application where you should give the name of new configuration and click on NEW button.

It will ask you for Package and Transport information.

Now, assign Configuration component for that application component,

Below screenshot shows the method to assign AC,

Here specify a Configuration name, it will give a warning that Config. doesnt exist but later you can navigate from this screen to create the configuration by clicking on the assigned configuration name.

You can define certain attributes for your configurations in the above screens too.

Now, on SE80 double click on your application component and Click on Test in Administrator Mode button.

You should see the canvas to configure your page,

Click on the CHIP Catalog button on the top to see the list of Chips,

On the Right Side you should see your chip, now drag and drop that on to this page,

Similarly add BING Iframe to this page.

Once you add both the Chips, your screen should look like below screenshot,

Coming to the Step of Wiring or Mapping these Chips.

In our Side Panel demo, we have seen that if you select Airline code on the left side, it will shows its details on the right side. Now, to do the same, we are adding a Outport Chip(Like a field which can be wired to other chips) and mapping that to BING Chip and also our developed CHIP.

Click on the CHIP Catalog once again and drag and drop OUTPORT Chip on to the page.

Step 1 is to Link our Carrier CHIP to the Outport CHIP,

On our CARRIER Chip, click on the button Display Connections,

If you remember, we created an Inport for our Chip, now we are maping our Inport to the Outport Chip we just created on our application.

Once you do the mapping, you should be able to enter Airline code on our Outport and click on Fire Outport button which will be Inport for our Carrier Chip and will show Airline information.

Now the task is to pass this Airline Carrier Name to Bing Search iFrame so that it will do a search by that carrier name.

First Create a Tag for this Carrier Name by right clicking on that field name and name it as QUERY. Bing iFrame already has Tag by named QUERY which you can map from this.

On the Bing Iframe click on Display connections and map this Tag to the Inport of Bing.

Once you do this, your Page is ready and it would like as pretty as shown below :).

This completes explanation process of creating Chips, Side Panels and Pages.

ALV in Webdynpro Application

ALV Output display is one of the most used concept in SAP to meet business requirements. Currently to develop ALV on a normal dynpro output, there are various methods in ABAP. Initially Functional Modules were used to develop ALV's, later SAP introduced Object Oriented classes to develop ALV and introduction of OOP's did help in adding quite new features

Simple ALV on a Webdynpro application is quite simple to develop. In the below example, I am trying to display SPFLI output on an ALV.

First Step is to Create a new Webdynpro Application through SE80 with a View and a Window.

In this example, I have my data retrieval logic inside Main View(WDDOINIT) but you can also have that in Component Controller itself and fill the Context node in a WDDOINIT of Component Controller.

After WD Component is created, go to the Used Component section in the WD definition and add Component Usage for SALV_WD_TABLE.

About SALV_WD_TABLE: For some of the core features of ABAP, SAP has already developed re-usable components which can be used to get required functionality. Another example for this is, WDR_SELECT_OPTIONS using which we can display Select-Options on our Webdynpro Application.

Create a Context Node of Type SPFLI and add all its fields to the node(You can use Add Attributes from Structure button to add all the fields of that table in the node). Dont forget to make the Cardinality as 0..n to indicate that its a table and not structure type.

Next Step is to Create a View and add Context Node type SPFLI and Bind it to the Component Controller Context node.(You can even directly use Context node created in Controller directly here just by dragging and dropping).

Here, I am dragging Node from Controller to View.

Now, click on the MAIN View, and add an element of type ViewContainerUIElement and give an ID to it.

Important point here is, whenever you add a View ContainerUI Element, it provides and option for you to embed another view(which displays data) to it in the Window section.

Until here, we are done with the part of creating Context Node, View, adding a view container to the view. Next step is to fill the Context node table with the data.

In the WDDOINIT, write code to get data and then bind it to context node table. Binding part can be done easily using code generation wizard provided by SAP as shown below.

and the code generated is,

  DATA lo_nd_spfli TYPE REF TO if_wd_context_node.

  DATA lt_spfli TYPE wd_this->elements_spfli.

* navigate from <CONTEXT> to <SPFLI> via lead selection
  lo_nd_spfli = wd_context->get_child_node( name = wd_this->wdctx_spfli ).

  SELECT * FROM spfli INTO TABLE lt_spfli.

  lo_nd_spfli->bind_table( new_items = lt_spfli set_initial_elements = abap_true ).

With this we are done with the part of filling context node, next step is to Bind the Context Node with the SALV_WD_TABLE context node.

Logic here is, when we develop ALV using function module, we pass our output internal table data to the function modules ALV data table and that data will be shown on the output screen in an ALV, similarly in Webdynpro once you bind Context Node table data to SALV* data node, output is shown in ALV. Binding is done as below,

Whenever you add a Component Usage(Another WD Component) to the Webdynpro, interface controller of that WD component will be available in our WD too and you can see that in the left tree under component usages node.

Double click on the Interfacecontroller_Usage node and in the context, Map SPFLI node to Data Node of SALV* component as shown below,

I have dragged SPFLI node to Data Node.

Now, in the window, navigate to the ALV View container, right click on that and click on Embed View and then in the pop-up select the ALV data view, once you do that it will look somewhat shown as below

That is the last step in the development, we are ready with an SPFLI ALV output. Once you create a WD Application for this component and execute it, it looks like below screen shot.

In my next blog, I will write as how to handle configurations to the ALV, similar to Layout options we do on dynpro ALV.