In my previous blog (from a while back, I know… have been “busy”), I talked about how to setup and use delivered content. Now, what if we want to add our own stuff?

In order to do so, we have to create our own side panel. I haven’t supplied much detail on NWBC (NetWeaver Business Client) just yet and I won’t here either. There is plenty of info out there. Basically, it’s another GUI to SAP systems than the “traditional” SAP Logon. The nice part is that you can attach/activate a so-called side panel to a “traditional” SAP screen without changing the actual screen. You can link your SAP screen with this side panel via tagging. It’s merely a way to pass on a value (or values) from the standard screen to the side panel, for example you wish to show extra info on a customer in a side panel, then you need to pass the customer value to that side panel, right? In that case you would create a tag for customer number.

The technology used is Web Dynpro. Don’t let that scare you though, I had no experience with Web Dynpro whatsoever before this project either. First thing to do is create a new Web Dynpro Application. One way to do this is to launch the Object Navigator (transaction SE80), go to the Repository Browser (2nd option from the top) and select Package via the dropdown. Now select a package you will use (for example ZBW) and hit display. Position your cursor on the Package and via the context menu select Create > Web Dynpro > Web Dynpro Application.


We need to create a component of type FPM_OVP_COMPONENT:

se80 - b.JPG

Once this is done, we need to create a configuration for our application. In your Repository Browser screen, go to your Web Dynpro Application (Package > Web Dynpro > Web Dynpro Applicat. > <your application name> and select Create/Change Configuration via the context menu (right-mouse click). You should see the following (in your default Web browser, mine is Internet Explorer):

se80 - c.JPG

Now, it gets a bit “tricky” if you haven’t worked with Web Dynpro before (at least, to me it looked & still looks tricky). You first enter a technical name next to Configuration ID and then hit New. In the popup that follows enter a description and hit OK. In the screen that follows, make sure that both “Enable Sending of Tagging Data to Remote Side Panel” and “Enable Receipt of Tagging Data in Remote Side Panel” are flagged!!!

se80 - d.JPG

Scroll back up and click Assign Configuration Name (as shown below).

se80 - e.JPG

Manually (do not use the dropdown) enter the configuration ID (ZMY_CONFIG in this case) and hit ok. Save this configuration.

Now click on the configuration ID (it should be underlined, hence representing somekind of hyperlink) to take you to the actual component configuration. You can start by giving a meaningfull description (Title) to your page (dark orange block):

se80 - f.JPG

Now we need to add 2 components: 1 for the BW query itself and 1 for its selection screen (I know this sounds/feels strange, but that’s how it works). We’ll start with the selection screen: in the Preview panel select Add UIBB > Search Component via the context menu

se80 - g.JPG

enter a technical name for your component, hit enter, ignore the error message and hit Configure UIBB.se80 - h.JPG

Hit Save in the popup and New in the next screen. Enter a description, assign a package and assign a feeder class (CL_BS_ANLY_LIST_SEARCH_FEEDER):

se80 - i.JPG

Hit Edit Parameters and enter the technical ID of your query under Parameters

se80 - j.JPG

The next screen already tells us something is going to get us in trouble later on…

se80 - k.JPG

The “Tag Active” column is empty and moreover we can’t seem to change this entry. This might lead to issues later on…

Now go back to your component configuration (either by going back one screen via your normal browser tools or by clicking on the previous “level” on the top line in your screen – should be highlighted in blue).

Now we’re ready to add our actual query. So let’s add an Analytics List Component:

se80 - l.JPG

The procedure is similar: add a technical ID in the Config ID column and hit Configure UIBB, then enter a description and assign a package. Enter your query name (technical ID) or select it from the dropdown. Leave everything else “default” for now. Save.

Go back to your component configuration. You now have 2 UIBBs on 1 page (in 1 section). Now we need to “link” these two components. This is called wiring.

In order to do so, we need to make sure we have an application controller.

se80 - m.JPG

Expand the “General Settings” folder and select Application Controller Settings via the dropdown on Floorplan Settings. Enter WDC_BS_ANLY_APPCONTROLLER and hit OK.

se80 - n.JPG

Collapse the “General Settings” folder again (or just scroll all the way down) and hit the “Wire” button

se80 - o.JPG

(under Transaction there are a few options, but no clue whatsoever as to what to select here – I couldn’t find any documentation on this either)

I assume we use the search component as “lead selection” (Port Type) and the list component as “collection”, but again… I’m not sure about this as no documentation was found. Upon saving we received an error message that we’re missing a “Transcation handler class”, so we just “picked” one from the list.

se80 - p.JPG

Somehow we still need to maintain “attributes”… it took a while before we found where to do so, this next screen shot shows you where it’s hidden

se80 - q.JPG

they’re shown at the bottom of the screen

se80 - r.JPG

The Connector Class is a required field and there’s only one option. We need to maintain this for both components. When that’s done, our configuration is all set (after saving of course)!

To test it, we go back to transaction SE80, navigate to our application configuration and double-click it:

se80 - s.JPG

then hit Display Configuration. This will open a browser windo again where you can hit “Test”.

se80 - t.JPG

I’ll end it here for now as I have some other things to take care of right now. Next time I’ll show you how to integrate this information into a side panel (which is the easy part). However, this approach has one big issue (as you might have guessed from empty “Tag Active” column): somehow it’s not possible to actually pass the tag directly to the selection screen. We had a web dynpro developer look at this and he couldn’t find anything wrong in our setup either. It seems to be “missing functionality”. So, next time I’ll also explain how to work around this.

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply