Agenda:

This document explores the ToolBar UI and also how UI elements like ToolBarPopin ,TextBar and ToolBarLinktoAction can be implemented inside it.

Approach:

Step 1:Create a Webdynpro Java DC shown as follows:

/wp-content/uploads/2014/08/fig1_1_512256.png

Step 2:Go to the component Controller :UI2Comp –>Click on the Context tab and create two nodes shown as follows:

Node CTX_VN_Table will have three attributes namely

CTX_VA_Address-Datatype String

CTX_VA_EmpId-Integer

CTX_VA_Name-String

fig 1.2.png

Fig 1.3.png

Node CTX_VN_Visibility will have two context attributes namely-

CTX_VA_PopInVisible-Datatype-UIElementDefinitions.Visibilty

CTX_VA_ToolBarVisible-Datatype-UIElementDefinitions.Visibility

Step 3:Goto the view UI2CompView where in in the outline View Insert UI Elements as follows

/wp-content/uploads/2014/08/fig1_4_512290.png

Note :In the above figure please note that the TEXTBAR UI element is only available when inserted inside the ToolBarPopin UI Element.If tried to add individually or outside the popin Such an UI element is not available.

Also we have the UI element ToolBarLinkToAction as a ToolBarRightItem signifying the concept that these UI elements are in relevance to ToolBar Ui and when implemented will be aligned to the right hand side of the ToolBar UI.

3.1The TextBar UI Element Properties are as follows:

Fig1.5.png

3.2 The ToolBarLinkToAction UI element property needs to be set as follows:

Fig 1.6.png

Go to the Events Property of the UI and create an Event: OpenPopin as displayed below:

Fig1.6.png

In the java Editor of the view ,write the following code:

//GLOBAL declarations

  //@@begin others

  int g_count=0;

  int g_popin=0;

  //@@end

On the event :OpenPopin

public void onActionOpenPopin(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

  {

    //@@begin onActionOpenPopin(ServerEvent)

        if(g_count==1)

        {

        wdContext.nodeCTX_VN_Visibility().currentCTX_VN_VisibilityElement().setCTX_VA_ToolbarVisible(WDVisibility.VISIBLE);

        g_count=0;

        }

        else if(g_count==0)

        {

              wdContext.nodeCTX_VN_Visibility().currentCTX_VN_VisibilityElement().setCTX_VA_ToolbarVisible(WDVisibility.NONE);

              g_count=1;

        }

    //@@end

  }

3.3 The ToolBarPopin properties are set as follows:

Fig1.8.png

The Visibility property should be bound to the context attribute:CTX_VA_ToolBarVisible

3.4 The toolbar LinktoAction properties to be set as follows:

Fig1.9.png

Goto the Events Tab of ToolBarLinkToAction and create an Event: OpenTable

Fig1.10.png

In the java Editor of the view ,write the following code:

public void onActionOpenTable(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

  {

    //@@begin onActionOpenTable(ServerEvent)

        if(g_popin==1)

        {

        wdContext.nodeCTX_VN_Visibility().currentCTX_VN_VisibilityElement().setCTX_VA_PopinVisible(WDVisibility.VISIBLE);

        g_popin=0;

        }

        else if(g_popin==0)

        {

              wdContext.nodeCTX_VN_Visibility().currentCTX_VN_VisibilityElement().setCTX_VA_PopinVisible(WDVisibility.NONE);

              g_popin=1;

        }

    //@@end

  }

3.4 The Table UI should be set as follows:

fig2.0.JPG

Fig 2.1.JPG

Step 5:Deploy the DC and run the application:

When the page loads:

deploy1.JPG

Clicking on Open This Link:

deploy2.JPG

Clicking on Click Here To View the table

deploy3.JPG

In the same way as the ToolBarLinkToAction is used we can use ToolBarLinkToUrl,ToolBarDropDownByKey and ToolBarDropdownByIndex.

To report this post you need to login first.

3 Comments

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

    1. Nimisha Girijan Post author

      Hi Nikhil,

      I havent got the opportunity yet to work on UI 5 and had been consistently working on WDJ and Portal 7.3 since 3 years.Nevertheless will try taking up a self learning exercise for UI 5 as and when .Also shall expect your help and expertise as i presume you work on UI 5.

      Regards,

      Nimisha

      (0) 

Leave a Reply