Skip to Content

Introduction

In the CHIPs, PageBuilder and the Side Panel – Part 1 I explained how to create a CHIP from a web dynpro. In this blog (part 2) I am going to explain how to create a side panel in a web dynpro. Then we are going to implement our created CHIP in the side panel and automatic wire it to the web dynpro application.

Prerequisites

A Netweaver 7 Ehp 2 system.
Some Web Dynpro knowledge
My previous blog could help you to understand what a CHIP is

Wat are we going to create?

First we are going to create a web dynpro application and prepare it so that it can implement a side panel.

Secondly we are going to the side panel configuration tool and create a new side panel. Then we are going implement our created CHIP from the previous blog in the side panel.

Finally we will automatic wire our CHIP to the web dynpro application.

Step 1: Create a web dynpro

I named my web dynpro component ZZ_RV_SIDE_PANEL
For this example we only need one view (V_MAIN)

Step 2: Setup the component controller

In the context of the component controller create a node SFLIGHT. This node is used by the view to display a table with flight data.

 

Create a method FILL_SFLIGHT to fill the node with records of the table SFLIGHT.

Step 3: Setup the view

To implement a side panel we have to prepare the view in the layout and in the coding.

Prepare layout

Create a page header element in the view.
The page header element must have the name PAGE_HEADER

 

In this page header element a link will be presented to open the side panel.
Create a transparent container element inside the page header.

 

 

Prepare coding

Two steps:

  1. We have to initialize the side panel
  2. We have to create an action to open the side panel

To initialize the side panel write the code below in the method WDDOINIT of the view.
From here we also fill our flight data table.

 

Create an action OPEN_SIDE_PANEL

 

Write the code below in the method ONACTIONOPEN_SIDE_PANEL

 

To complete the design of the view we have to map the context node SFLIGHT of the component controller to the context of the view.

Then we can create a table of this context node with the template button.

Your view should look like the image below:

 

Step 3: Create a web dynpro application

Test your created web dynpro application.

 

Step 4: Open the side panel configuration tool

There are two options to open the side panel configuration tool.

  1. Append to the URL: &sap-config-mode=X
    This is for the administrator, a client dependent customizing mode
  2. Append to the URL: &sap-config-mode=config
    This is for the programmer, a client independent customizing mode

In this example we will use the client dependent customizing mode &sap-config-mode=X

In the customizing mode you see a link “Set Additional Information” at  the right in the page header. If you click on this link it will display the application configuration for the side panel. This is a view to select which existing side panel you want to implement in the application, but it also allows you to create a new side panel.

 

Set the radio button to “Use Side Panel” and fill in a configuration name for the side panel. I named it: ZCARRIER_SIDE_PANEL

Click on the link “Create/Edit” to create a new side panel.

 

The side panel configuration tool will open.

Provide a description for the side panel.

 

Click on the link “Chip Catalog” at top right of the screen.
The CHIP catalog will be shown and you could drag and drop any kind of CHIP in your side panel.

 

Our created CHIP from the previous blog is stored in folder: X-SAP-WDY-CHIP

We gave it the name “Carrier chip” with an airplane icon.

 

Drag the CHIP from the Chip Catalog and drop it into the panel

 

Our created CHIP will be displayed in the panel.

Save the side panel.

 

Save the application configuration for the side panel.

 

Step 5: Automatic wire

At this point we have implemented a side panel in our web dynpro application with our created CHIP from the previous blog.

You can test you application and see for yourself how cool the side panel looks.

But unfortunately the side panel with carrier information does not respond if we change a row in the table with flight data.

To make this work we have to automatic wire our CHIP to the web dynpro application.
In the previous blog we have created a Tag for the inport parameter CARRID of the CHIP. If we create a Tag in the web dynpro application with the identical name CARRID, then in the background it will be automatically wired.

To create a Tag in the web dynpro application open the web dynpro application in customizing mode: &sap-config-mode=X
Open the context menu (right click) of the column CARRID from the table and select in the context menu: Tags -> Maintain Tags

 

Fill in the Tag CARRID and click on the Add button.

 

The Tag CARRID is created and click the OK button.

 

To check if the Tag is created you can open the context menu again and you will see the created Tag.

 

Congratulations !

You have created a web dynpro with a side panel. Then you have implemented our created CHIP in the side panel with automatic wire to the web dynpro application.

If you now select a row in the table the CHIP in the side panel will respond and will display additional information about the carrier.

 

What’s next?

There are a lot of advanced techniques we can use with the side panel, for instance:

  • Multiple side panel configurations selected from a button choice
  • Multiple views in one view assembly with their own side panel configuration

But for now you know the basics of CHIPs and the Side Panel.

I know I didn’t talk a lot about the PageBuilder, but if you like I can write a blog about it how you can implement CHIPs in the PageBuilder and create new applications with it. Just write a comment below if you are interested.

Regards,

Robin Vleeschhouwer

RV SAP Consultancy

To report this post you need to login first.

62 Comments

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

  1. Chinnaiya Pandian
    Robin . you really explained the concept in easily understandable manner .. it will be really help full if you write similar blog for page builder .. Waiting for that .. once againg .Great job done

    (0) 
  2. Chinnaiya Pandian
    Hi ,
    I am facing an Dump while clicking on the link “Set Additional Information”

    can you pls guide me ,below is the error information

    Information on where terminated
        Termination occurred in the ABAP program “SAPLWDR_RUNTIME_REPOSITORY” – in
         “IF_WDR_RR_CONTROLLER~GET_ACTION”.
        The main program was “SAPMHTTP “.

        In the source code you have the termination point in line 71
        of the (Include) program “LWDR_RUNTIME_REPOSITORYF03”.

    (0) 
    1. Robin Vleeschhouwer Post author
      Hi Chinnaiya,

      Do you have created an action “OPEN_SIDE_PANEL”?
      The parameter open_action_name in the wddoinit method must have exactly the same name as the action you have created.
      Be aware that you are creating an action and not a method. The method will automatically be created with the name onactionopen_side_panel.

      Regards,

      Robin Vleeschhouwer

      (0) 
      1. Chinnaiya Pandian
        Thanks Robin Vleeschhouwer  ,
        Problem Solved .. i missed creating the action as an Event handeler

        Thanks a lot for your great blog ..
        and kindly write a blog for page builder too . i am reallly waint for that .

        (0) 
  3. Saujanya GN
    Thanks for the blog. Definitely looking for more.

    I got a query : on row selection in the table, the values in my side panel arent changing. Can you please tell me what am I doing wrong ?

    Secondly is there any way to debug the sidepanel application.

    Best Regards
    Saujanya

    (0) 
    1. Robin Vleeschhouwer Post author
      Hi Saujanya,

      Let’s start with the second question, how can you debug.
      The CHIP we implemented in the side panel is technically a web dynpro component.
      You can debug the CHIP the same way you debug a web dynpro component, by setting an external breakpoint in the web dynpro component.

      For the first question, why the side panel isn’t changing, we have to determine what the problem is.
      Set a breakpoint in the method “SET_DATA” of the CHIP web dynpro component. In my example I named it “ZZ_RV_CHIP”. (see blog part 1).

      Test the web dynpro application where you have implemented the side panel.
      Situation 1: When the application starts you are going to the debugger.
      Observation: The application is automatically wired to the CHIP.
      Solution: Something is going wrong in the CHIP web dynpro. (ZZ_RV_CHIP)

      Situation 2: When the application starts you are not going to the debugger.
      Observation: The application is not automatically wired to the CHIP.
      Solution: There is a problem with the Tags. Please check the Inport Tag of the CHIP web dynpro. (ZZ_RV_CHIP)
      Please check if the name of the Tag in the web dynpro application where you implemented the side panel (Tags -> Maintain Tags) is identical to the name of the Inport Tag.

      Regards,

      Robin Vleeschhouwer

      (0) 
  4. Jason Scott

    Great blog, but just wondering if you have managed to get the side panel to work within an FPM app?

    With an FPM app there is no “”Set Additional Information” shown when your app is run in config mode (for me anyway – on EnhP6).

    Therefore there is no way to display the side-panel editor for the app.

    I’m also not able to add the abap code into the WD app as I’m using an fpm with a guibb.

    The FPM config does have some attributes that you can configure for the side panel – such as config ID, open on start, etc. but these don’t seem to do anything. In fact if I select the open on start option it crashes the app with the following error: “The docking window could not be created, since the component (FPM_OVP_COMPONENT) of the related anchor window has already been released “.

    There must be some other config necessary that I haven’t been able to find…

    Regards,

    Jason.

    (0) 
    1. Robin Vleeschhouwer Post author

      Hi Jason,

      The side panel is by default not active in FPM. You have to activate it first by the following code.

      DATA lo_idr TYPE REF TO if_fpm_idr.

      “Get IDR

      lo_idr ?= mo_fpm->get_service( iv_service_key = if_fpm_constants=>gc_service_key-idr ).

      “Activate side panel

      lo_idr->set_side_panel_link(

        EXPORTING

      *    iv_text    =

      *    iv_tooltip =

        iv_active  = abap_true ).

      When you have activated the side panel you will see the link “Set Additional Information” when running the FPM application in config mode.

      Regards,

      Robin Vleeschhouwer

      (0) 
      1. Jason Scott
        Thanks for the reply Robin. I actually managed to get it to work as well with very similar code in the feeder class of my OVP fpm app. I’ve now added the standard Attachments and Notes CHIPS, but can’t work out how to pass in the relevant GOS data (business object type and id). I’ve read up on the wiring and imports, tags etc but they don’t seem to define any tags for the import other than the contract one for the chips config dialog.  I guess I need to find a standard app that uses these and see how it’s done.   I have my own WD component that does GOS attachments and notes so worst case, I’ll just create a Chip from that.  😉
        (0) 
        1. Robin Vleeschhouwer Post author

          Hi Jason,

          When I had sent the second reply, I didn’t noticed that you already replied on my first reply. Good luck with CHIPping 😉

          Regards,

          Robin Vleeschhouwer

          (0) 
    2. Robin Vleeschhouwer Post author

      Hi Jason,

      For the OVP FPM we don’t have the IDR, so we have to use the IF_FPM_CNR_OVP interface.

      DATA lo_cnr_ovp TYPE REF TO if_fpm_cnr_ovp.

      “Get CNR OVP

      lo_cnr_ovp ?= mo_fpm->get_service( iv_service_key = if_fpm_constants=>gc_service_key-cnr_ovp ).

      “Activate side panel

      lo_cnr_ovp->set_side_panel_link(

        EXPORTING

      *    iv_text    =

      *    iv_tooltip =

        iv_active  = abap_true ).

      Regards,

      Robin Vleeschhouwer

      (0) 
  5. Jason Scott

    Robin, Have you tried using any of the SAP-provided CHIPS? I’ve tried Attachments, Notes and User (BSSP_USER) with no luck. They all seem to have no INPORT for data and no Tags defined, making it impossible to send data to them (wire them).

    There’s obviously something major that I’m missing.  😉

    When creating your own CHIP as described in your blog it makes perfect sense and you can create an inport and associated Tag – but for the SAP-provided CHIPs, these tags should exist shouldn’t they? How else can you initialise the CHIP with data…

    Regards,

    Jason.

    (0) 
    1. Jason Scott

      To answer my qusetions above – The BSSP_* chips are designed to work with NWBC which automatically provides the tag information. I just created my own WDC’s and CHIPS for them and all is good.  😉

      (0) 
      1. Robin Vleeschhouwer Post author

        Hi Jason,

        I don’t have the time to look into the CHIPs, but maybe you can set the tags with coding:

        Take a look at the tagging framework:

        DATA lo_tagging_service TYPE REF TO if_wd_tagging_service.

        “Get instance of tagging service

        lo_tagging_service = cl_wd_tagging_manager=>get_service_by_component( component = wd_comp_controller->wd_get_api( ) ).

        Regards,
        Robin Vleeschhouwer

        (0) 
  6. Uday Mr

    Hi Robin,

    Thanks for the nice blog. I face an issue while trying to replicate the component for the side panel. I get an syntax error for the code within WDDOINIT saying, “Method “GET_API” does not exist. There is, however, a method with the similar name “WD_GET_API”. And when I try change the method call to WD_GET_API it says, “Method “WD_GET_API” does not exist. There is, however, a method with the similar name “GET_API”. This is very weird coz I checked CL_WD_SIDE_PANEL_API in SE24 & can see the single STATIC method available for me. Even the syntax check for the code created via the wizard for the static method call to GET_API is giving the same error message. Any ideas as to what might be the issue?

    Regards,

    Uday

    (0) 
    1. Robin Vleeschhouwer Post author

      Hi Uday,

      Take a look at the code below:

      cl_wd_side_panel_api=>get_api( )->init(

                  view_controller = wd_this->wd_get_api( )

                    open_action_name = ‘OPEN_SIDE_PANEL’ ).

      Regards,

      Robin Vleeschhouwer

      (0) 
      1. Uday Mr

        Hi Robin,

        Thank you for the reply. I guess it was some temporary problem with SAP. The same code started to work fine without any syntax errors after a while! 🙂 I was able to finish with the remaining steps & see the Side Panel in action! Thanks for sharing.

        Regards,

        Uday

        (0) 
  7. kiruthika Periyasamy

    Hi Robin,

       I am using netviewer  7.3 system . I have a requirement to implement a side panel.

    I test my application with config mode both in X and config , but I didn’t  get Additional Inforamtion link in my page header to configure sid epanel.I implemented as you did in this tutorial only in wddoinit method and action open_side_panel.Please reply me at the earliest.

    Thanks in advance,

    Kiruthika P

    (0) 
    1. Robin Vleeschhouwer Post author

      Hi Kiruthika,

      Have you created a transparent container inside the page header?

      Is the name of the page header: “PAGE_HEADER” ?

      Regards,

      Robin Vleeschhouwer

      (0) 
      1. kiruthika Periyasamy

        Hi Robin,

          Thanks for ur reply. Now side panel configuration is coming.

         

          But another issue, data related to lead selected row is not appeared in side panel .

          when I give a variable in the  tag in Chip program and save the webdynpro chip I got a message invalid  GUI input data : invalid XMLBLOB data. If I again open the webdynpro chip the tag is empty.

          I did webdynprochip program and made the tags as per ur document only, I didn’t know why data(value) is not appearing in side panel.

           Please reply me what is the issue in it at the earliest.

        Thanks in advance,

        Kiruthika Periyasamy.

        (0) 
  8. kiruthika Periyasamy

    Hi Robin,

      Thanks for ur  first reply. Now side panel configuration is coming.

      Please check this at the earliest

     

      I am using netviewer 7.3 EHP5 and GUI patch level is 14

     

      But another issue, data related to lead selected row is not appeared in side panel .

      when I give a variable in the  tag in Chip program and save the webdynpro chip I got a message invalid  GUI input data : invalid XMLBLOB data. If I again open the webdynpro chip the tag is empty.

      I did webdynprochip program and made the tags as per ur document only, I didn’t know why data(value) is not appearing in side panel.

       Please reply me what is the issue in it at the earliest.

    Thanks in advance,

    Kiruthika Periyasamy.

    (0) 
    1. Robin Vleeschhouwer Post author

      Hi Kiruthika,

      I am not sure, but maybe the data type of the variable you are tagging is not the same as the inport variable of the CHIP.

      Regards,

      Robin Vleeschhouwer

      (0) 
  9. kiruthika Periyasamy

    Hi Robin,

      Data type of the variable that I am tagging is same as the inport variable of the CHIP only.

     

       During chip creation after entering tag name and I save the chip I got a message invalid  GUI input data : invalid XMLBLOB data. If I again open the webdynpro chip the tag is empty.

      I am using SAP netviewer 7.3 Ehp5  and gui patch level is 14.

      If that message invalid  GUI input data : invalid XMLBLOB data is a issue then how to solve this.

    I have an urgent requirement  to  do the side panel. So please tell me appropriate solution as soon as possible.

    Thanks in advance,

    Kiruthika Periyasamy.

    (0) 
  10. Manuel Horn

    Hi Robin,

    thanks for the good blog. I also tried to get bssp_notes to work and to other SAP Standard Chips in Sidepanel. But they don’t work? Is there something special to do to get these chips working? I think it’s SAP standard and it should work. But it doesn’t.

    Thanks Manuel

    (0) 
    1. Jason Scott
      Hi Manuel, I don’t have the nwbc to test with but I got the bssp_notes chip to work in a webdynpro side-panel just fine. Did you look at the required tags? I set the tags programmatically in my WD app.
      (0) 
      1. Manuel Horn

        Hi Jason, the problem is that I want to use the sidepanel with standard SAP transactions like VA03 or XD03. I also created a test WD App to test if the values are passed to the sidepanel. In nwbc there is a data context viewer tool where I can see that the values are there. But they are not processed by the sidepanel applications. When I set an external breakpoint in the Set_Data interface method it doesnt stop where the breakpoint is. So I guess the method is not called. Maybe something with the tagging is not correct? But like I said, even the standard sidepanels which are connected by default don’t work? I am really stuck 🙁

        (0) 
        1. Jason Scott
          Like I said, I don’t have the business client to test with but in a conversation I had with Thomas Jung a couple months ago about these CHIPS he mentioned that they were actually designed for business client use so they must work. Must be some config or something missing somewhere. I wasn’t able to use then earlier in the year from WD because they use dynamic inports and didn’t show the tags required. But we had an sp applied and all of a sudden the tags where their in the properties and they’ve worked ever since in all my WD apps.  Try following through the code to see if there’s any settings you’re missing. There is a few place where the code says: do this if in business client and do that if not…   😉 Sorry I can’t be of more assistance… But they work great in WD.
          (0) 
          1. Manuel Horn

            Thanks a lot for your assistance. I also think it’s a little flag somewhere in a config option that’s missing. I opened a thread regarding this topic.

            http://scn.sap.com/thread/3192818

            Maybe you can forward this link to Thomas Jung if you have his contact data 😉

            Thanks and best regards!

            Manuel

            (0) 
            1. Robin Vleeschhouwer Post author

              Hi Manuel,

              Sorry for the late response. I just returned from my vacation.

              I am glad to see that Jason Scott provided you information.

              Best regards,

              Robin Vleeschhouwer

              (0) 
                1. Jason Scott

                  I haven’t looked at this for quite some time now. I simply built my own notes and attachments CHIPS due to the issues I was originally having with the sap-provided UIBB’s. The tag handling is better now and I’ve used other sap-standard CHIPS just fine since sp4.

                  (0) 
  11. T. Pothuizen

    Hi Robin,

    I like this blog. I could not continu to create a tag in de table for CARRID. The context menu ‘Manage tags’ is not shown in config-mode.

    I found some info to enable tagging by a parameter, but it does not work.

    I’m using 7.31 SP3.

    What did I miss?

    Toine

    (0) 
    1. Robin Vleeschhouwer Post author

      Hi Toine,

      Unfortunately I don’t have a SAP 7.31 system. Please make sure you have the texts: “&sap-config-mode=X” in the URL of your browser.

      Have you already searched for a note about it?

      Best regards,

      Robin Vleeschhouwer

      (0) 
  12. Karthikeyan Chandrasekaran

    Thanks for the blog Robin. However i need to  create two tags and pass two values to a method and based on that i need to populate the CHIP.But the values are not sent in to the CHIP accordingly .

    Secondly why is that the Interface method accecpts only transparent table types, not predefined data types.

    It would be really helpful if that is explained,

    Thanks,

    Karthik.

    (0) 
    1. Robin Vleeschhouwer Post author

      Hi Karthikeyan,

      The interface method of an inport only accepts transparent tables and structures. (just one). Unfortunately I don’t know the reason.

      When you want to send two parameters, then they both have to be supplied in one structure. If you have tried this, then could you explain what is going wrong?

      Best regards,

      Robin Vleeschhouwer

      (0) 
      1. Karthikeyan Chandrasekaran

        This is what i did.

        I displayed all the contents from MARA table in a table control. I thought of passing MATNR & MATKL to a CHIP which displays sales doc item data from VBAP table.( I did this purely for testing purpose ).I created a CHIP which has an interface method with importing parameter of type VBAP.

        I created two tags tag_matnr & tag_matkl.

        Now comes the Issue.

        1.I tried to assign tag_matnr to matnr colum and tag_matkl to matkl column in table control. The control does not pass to CHIP if two tags are assigned to two different columns .

        2.I tried assigning both tag_matnr & tag_matkl to matnr column in table control. Only the MATNR valus is passed to both of the tags,

        3.I tried assigning both tag_matnr & tag_matkl to maktl column in table control. Only the MATKL valus is passed to both of the tags.

        I am confused, Please help.

        (0) 
        1. Robin Vleeschhouwer Post author

          Hi Karthikeyan,

          I have created a test application where I am doing exactly the same and it works.

          I think there is something wrong with your inport tags. Please check your CHIP inport tags that the tags are bound to the correct variable. It is a common mistake to create multiple inport tags with different names for the same inport variable.

          Best regards,

          Robin Vleeschhouwer

          (0) 
  13. Samual Krish R

    Hello Robin,

    That is an awesome way of explaining the side panel. Kindly do talk about some details about the page builder.

    Keep up the good work.

    (0) 
  14. Venkat Konanki

    Hi Robin,

    When I click on to create side panel , The side panel configuration tool is not coming and I am getting access forbidden 403 error. Could you please provide solution for this.

    (0) 
  15. Venkat Konanki

    Hi Robin,

    When I click on create side panel the configuration tool is not opening and I am getting error like forbidden 403 error. Could you tell me how can i resolve this.

    Br,

    Venkat.

    (0) 
  16. Amy King

    Thanks so much for putting this together. This article is clear and detailed and– along with part 1– contains all the info needed to implement a sidepanel CHIP in a WD application. Really terrific!

    Cheers,

    Amy

    (0) 
  17. Gabriela de Pompignan

    Hi Robin, in your last paragraph (Next Steps), you mentioned the possibility of creating “Multiple side panel configurations selected from a button choice”.

    Have you written about that already or could you please indicate where I could find some documentation about that, please? I have that exact requirement from a project I’m working in.

    Thanks!

    Gabriela

    (0) 
  18. Biren patro

    Hi Robin,

    As per your instruction I tried to create a CHIP,but in that I am getting error “No port available” in inports tab inside the chip.

    Could you please let me know how to rectify this error.

    Regards,

    Biren

    (0) 
  19. Sameer Dhuke

    Thanks Robin for this wonderful blog. Its really very helpful.

    I want to create a FPM application with side panel in it. Could you please guide how can we do that?

    Thanks in advance.

    Regards,

    Sameer

    (0) 
  20. Manimaran K

    Hi Robin,

    Excellent blog.

    I have created the wd application with chips but unfortunately in the end somehow  i couldnt popultate the carrier details in the side pane. Please let me know how to debugg the set_data method of compnent controller in the CHIP component.

    Thanks

    Manimaran K

    (0) 

Leave a Reply