WebDynpro Page Builder

[TomVanDoo]

A while back, I gave an internal course about WebDynpro for ABAP.

Since it was a non-official SAP course, I had to create my own course material, but this also opened up the door to focus on aspects normally not covered.

So as usual, everyone needed to get upto a certain level of understanding the basics, whilst I indoctrinated them with best-practices and guidelines.

Once everyone got the basics and managed to create simple webDynpro components, it was time to start focussing on specific content.

I noticed there was (finally) an upsurge in the use of the NetWeaver Business Client and Sidepanels. Often times, customers get the best practice roles, which come prepackaged with standard sidepanels. Pretty soon however, the need for custom sidepanels rises.

Athough creating a sidepanel is no rocket science, there still don't seem to be many developers that really have the hang of it. So I figured this was a good topic to get my class trained in. Also, When searching SCN for Page Builder, I didn't get a lot of hits, so time to put it in the spotlights.

Chips

Once you have your WebDynpro component created, you can turn it into a chip. In order to pass parameters to your Component, you an define inports and outports on your Chip. How to do that, is described in following help documentation. In itself, that's not too hard. There's just a couple of things you need to know:

1. A parameter on a Chip always needs to be a DDIC STRUCTURE. A data element type will not be recognized. (aww)
2. You can't test a Chip stand-alone
3. on your port parameters, you must define TAGS. There's a button on your Chip definition, which you can easily overlook

In order to test if your component is working correctly, add URL parameters on your component's window (you know, on the default plug handler) and use them to invoke that interface method of your component controller (you know, the inport)

That just makes your life a lot easier to test your component, as if it were a chip, because now you can just launch the application, add parameters, and it will behave as if it is a sidepanel that received parameters.

Sidepanel

Once you have your Chip, it's pretty easy to build a sidepanel. In SE80, go to the Webdynpro component WDR_CHIP_PAGE, and on the application, create a new Application configuration and make sure the Tagging parameters are checked.

Top Tip: You can set these parameters globally with the WD_GLOBAL_SETTINGS application.

Add a Component configuration and don't alter the contents in the Config-editor. Just save it.

Instead, launch that new application configuration you just created, and use the button in the toolbar to go in Config mode.

In the configuration mode, you can then add your Chip into the page.

Save it, and you have your sidepanel, which you can now add into your PFCG role.

There's just one more step to make your sidepanel talk with your NWBC main application area. In the customizing, you must add your tagging information.

(only required if you use custom tags. if you use the SAP standard tags, than this is not required)

You can use the NWBC property collector to find out which info you need to enter and then copy it into the table with your custom tag.

Note that this option only works when you embed a SAPGUI transaction. When using Webdynpro's as main application, you have to customize the Webdynpro application (add URL parameter &sap-config-mode=X)

You can then right click an element and add a Tag

And there you have it, a working sidepanel

Cockpits

All of howto create a sidepanel, has already been discussed and documented and there are tutorials out there. So actually, none of the above should be new to you. It's just a condensed form of all the available information with some Tips 'n Tricks.

But did you know that the Page Builder is not just for sidepanels?

You can actually use it to create complete Cockpits as well.

You see, you can embed multiple Chips in your page builder, and you can use those tags, to wire information from one Chip to another.

On top of that, the wiring will actually fire asynchronous loading of Chips (within the same session mind you), which will improve performance as opposed to complex applications, or FloorPlan Manager applications.

So that's what I had my class do. I gave each of them homework to create, a simple Webdynpro component, with some URL parameters.

The next day of the course, after teaching how to create a chip, each of them transformed their homework into a chip.

In the last excercise, I had them use the Page builder to wire all their Chips together into a full Purchasing cockpit, demonstrating how the page builder allows you to separate a complex application, into simple components, on which multiple engineers can work simultaneously.

Remark: In NetWeaver 7.40, there seems to be a bug that causes the Port parameters not to appear in the Page builder Connection wiring. This bug makes it impossible to properly wire individual components.

I'm still looking for a note to fix that issue.

It boils down to the method CL_CHIP_PORT_HELPER~get_parameters_from_rtti

In there they use the CL_ABAP_STRUCTDESCR~get_components, which used to return a table with all Fields, but now it only returns the structure's own fields, and then the type of structure includes, but not the fields contained in the includes!!!

As a result, only the fields on the root level of the structure can be used as parameters.

Possible solution, use a flat structure with no includes for your port parameters, or SAP could update the implementation of the method CL_CHIP_PORT_HELPER~get_parameters_from_rtti to consider all fields of a structure.