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:
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):
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!!!
Scroll back up and click Assign Configuration Name (as shown below).
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):
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
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):
Hit Edit Parameters and enter the technical ID of your query under Parameters
The next screen already tells us something is going to get us in trouble later on…
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:
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.
Expand the “General Settings” folder and select Application Controller Settings via the dropdown on Floorplan Settings. Enter WDC_BS_ANLY_APPCONTROLLER and hit OK.
Collapse the “General Settings” folder again (or just scroll all the way down) and hit the “Wire” button
(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.
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
they’re shown at the bottom of the screen
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:
then hit Display Configuration. This will open a browser windo again where you can hit “Test”.
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.