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:
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
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
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:
3.2 The ToolBarLinkToAction UI element property needs to be set as follows:
Go to the Events Property of the UI and create an Event: OpenPopin as displayed below:
In the java Editor of the view ,write the following code:
//GLOBAL declarations
//@@begin others
int g_count=0;
int g_popin=0;
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:
The Visibility property should be bound to the context attribute:CTX_VA_ToolBarVisible
3.4 The toolbar LinktoAction properties to be set as follows:
Goto the Events Tab of ToolBarLinkToAction and create an Event: OpenTable
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:
Step 5:Deploy the DC and run the application:
When the page loads:
Clicking on Open This Link:
Clicking on Click Here To View the table
In the same way as the ToolBarLinkToAction is used we can use ToolBarLinkToUrl,ToolBarDropDownByKey and ToolBarDropdownByIndex.
Hi Nimisha,
I would like to see more blogs on UI5 rather than WDP..nice blog..keep up the good work.
Regards,
Nikhil
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
H Nimisha,
As you are working on WDJ, UI5 wont be that difficult for you and its a must know technology going forward. For the start up you can follow http://www.ameyablog.com/sapui5/
Regards,
Nikhil