Skip to Content

In this series of blogs I will cover some of the new features in WDA available in Enhancement Pack 2.

Panels & Panel Stacks

In part 1 of the series I am going to talk about Panels. Panels are essentially the replacement for Tray and Group and PanelStack is the replacement for TabStrips.

At this stage I assume that anyone reading this blog knows how to create a simple WDA. If not then might I suggest you check out Thomas Jung’s superb blogs which can be found  here Web Dynpro ABAP Demonstration Videos.

Creating the Panels

Swapping Root Element

Creating a panel in WDA is simple. The first step is the swap the root element in your view. This is achieved by right clicking on the ‘ROOTUIELEMENTCONTAINER’ the selection ‘Swap Root Element’.

This will act as the container for individual Panels.

file:///C:/Users/Neil/AppData/Local/Temp/WindowsLiveWriter-429641856/supfilesE0473/swap_root_element2.png

Select the type ‘PanelStack’.

file:///C:/Users/Neil/AppData/Local/Temp/WindowsLiveWriter-429641856/supfilesE0473/swap_panel_stack2.png

Although I created the PanelStack by swapping the ROOTUIELEMENTCONTAINER this PanelStack could be created anywhere within the view.  

Note: I am using PanelStack here because I want to have my panels as TabStrips.

Root Element Properties

The elements in the table are generally set by default but it’s always worth double checking.

Property

Value

CollapseMode

toHorizontalLine

stackDesign

tab

Inserting Panels

Once the container is created we can add the individual panels. Each panel will represent a tab.

To insert the panel click on the new ROOTUIELEMENT and select ‘INSERT PANEL’.

file:///C:/Users/Neil/AppData/Local/Temp/WindowsLiveWriter-429641856/supfilesE0473/insertpanel2.png

Repeat this process as many times as necessary depending on the number of tabs required.

file:///C:/Users/Neil/AppData/Local/Temp/WindowsLiveWriter-429641856/supfilesE0473/panels2.png

Panel Properties

Property

Value

Layout

FlowLayout

contentDesign

Fill

Title

“Name of the Panel”

Finished Product

OK, this is what the finished product will look like.

file:///C:/Users/Neil/AppData/Local/Temp/WindowsLiveWriter-429641856/supfilesE0473/ie_panels_view4.png

Features

OK, now that I have shown how to create a Panel I should explain some of the key features of Panels.

CRM UI

The visual design of the PanelStack / Panel is the same as in CRM. This is to provide more consistency for the end user for these two UI frameworks.

Dynamic Titles

One of the key features of panel is that titles can be changed by the user.

file:///C:/Users/Neil/AppData/Local/Temp/WindowsLiveWriter-429641856/supfilesE0473/dynamic_title_small4.png

Order of the Panels

Another key feature of panels is that the order of the panels can be changed by the user with the use of Drag’n’Drop.

file:///C:/Users/Neil/AppData/Local/Temp/WindowsLiveWriter-429641856/supfilesE0473/drag_n_drop4.png

This feature give the user more freedom with the screen layout.

An example of this is the OVP component of FPM.

Note: The OVP component is only available as of Netweaver 700 EHP 2.

To report this post you need to login first.

4 Comments

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

  1. Thomas Mader
    Hello,

    Thanks for the information about the panel-stack, pretty cool 🙂

    I have tried to build the application as shown above but in my application it’s not possible die drag&drop the tabs/panels?!

    Do i have to implement additional parameters/methods?!

    Regards
    Thomaas

    (0) 
    1. Neil Gardiner Post author
      Hi Thomas,

      What Enhancement Pack are you currently on? The functionality shown in this blog is only available in EP2 which is not in general release yet.

      Cheers,
      Neil.

      (0) 

Leave a Reply