Skip to Content
Author's profile photo Former Member

Dynamic node & UI generation (WDJ 7.3)

1.0   Overview
   For creating dynamic User interface, Context nodes, Attributes & binding between them. This document provides approach for creating  dynamic  user interface, nodes & their binding.

2.0   Scope
   This document is applicable for Creating User interface in WDJ.
3.0   Functionality
   This document provides the step by step approach of how to create dynamic UI, Context nodes,Context attributes & binding between them.
         a. Software/Technology
            NWDS 7.3, jdk 6
        b. Target Environment:
            Portal
4.0. Creating Dynamic Nodes and Attributes
Ø Create a node in component controller
IWDNodeInfo nodeInfo=wdContext.getNodeInfo().addChild(“test”,null,true,CMICardinality.ONE_TO_MANY,CMICardinality.ONE,true,null);
Method:
addChild()
IWDNodeInfo addChild(String name,Class elementClass,Class elementClass,CMICardinality collection,CMICardinality selection,boolean initializeLeadSelection,IStructure structure)
Details:
It Dynamically declares and adds an unmapped child NodeInfo with the given properties.
Parameters:
name – the name of the child NodeInfo. Must be unique within this node’s children and attributes. The name may only containascii letters, digits and underscore (‘_’) and must not start with a digit.
elementClass – The element class for a model node, null for a value node.
singleton – indicates, whether the described Node is singleton relatively to its parent
collection – the collection cardinality
selection – the selection cardinality
initializeLeadSelection – true if this node’s selection shall be initialized when the collection is initialized
structure – a structure or null if the node is not structure based. If you want a structure from the local Java dictionary and you only have the name,
Returns:
the added NodeInfo
Ø Add Attributes in created node
nodeInfo.addAttribute(“Name”,”com.sap.dictionary.string”);
nodeInfo.addAttribute(“City”,”com.sap.dictionary.string”);
Methods:
addAttribure()
IWDAttributeInfo addAttribute(String name,String dataType)
Details:
Adds a new unmapped attribute to the structure.
Parameters:
name – The name of the attribute within the node, must be unique. The name may only contain ascii letters, digits and underscore (‘_’) and must not start with a digit.
dataType – The name of the attribute’s data type. It can be either a Java class (prefixed with “java:”), a type in the local Java DDIC (prefixed with “ddic:”) or a type from a logical dictionary (in that case the name is built “extern:name.of.logical.dictionary:name.of.type“). If you choose a Java class, no UI element can be bound to this attribute! A DDIC type may be either one that you defined within your application or one of the predefined types. Note, that the predefined types are in the package “com.sap.dictionary” at run time.
Returns:
The added attribute.
Ø Map Component controller node to view controller
IWDNodeInfo ccnodeinfo=wdThis.wdGetDetCompController().wdGetAPI().getContext().getRootNode().getChildNode(“test”, IWDNode.LEAD_SELECTION).getNodeInfo();
IWDNodeInfo nodeInfo=wdThis.wdGetAPI().getContext().getRootNodeInfo().addMappedChild(“test”,null, true, false, true,null,false,true);
nodeInfo.setMapping(ccnodeinfo,true);
nodeInfo.addAttributesFromDataNode();

Methods:    
1)  addMappedChild()
IWDNodeInfo addMappedChild(String name,Class elementClass,boolean singleton,boolean mandatorySelection,boolean multipleSelection,String mappedPath,boolean selectionMapped,boolean initializeLeadSelection)
Details:           
Dynamically declares and adds a mapped child NodeInfo with the given properties. NW04 version using two booleans for the cardinality and having several now obsolete parameters.
Parameter:
name – the name of the child NodeInfo.
elementClass – obsolete
singleton – obsolete
mandatorySelection – indicates, whether the lead selection is guaranteed to be valid
multipleSelection – indicates, whether multi selection is allowed
mappedPath – The path of the mapped node or null. if you want to set the origin node later.
selectionMapped – indicates whether the selection is mapped
initializeLeadSelection – indicates whether the lead selection is to be set to 0 if the collection is filled
Returns:
the added NodeInfo

2)setMapping()

void setMapping(IWDNodeInfo mappedNode,boolean selectionMapped)
Details:
Sets the mapping of a mapped node that has been declared before.
Parameters:
mappedNode – The NodeInfo of the mapped node.
selectionMapped – indicates whether the selection is mapped
3) addAttributesFromDataNode()
void addAttributesFromDataNode()
Details:
Automatically adds all attributes from the data node. This method can only be called on a mapped node.
  Ø Code for referring created node :
IWDNode node=wdThis.wdGetAPI ().getContext ().getRootNode().getChildNode (“test”, 0)
·      code for setting value of attribute:
node.getElementAt (index).setAttributeValue(“Name”,“Deepa”);
node.getElementAt (index).setAttributeValue(“City”,“Mumbai”);
Code for retrieving Value of Attribute:
String name=node.getElementAt(index).getAttributeValue (“Name”)
String city= node.getElementAt(index).getAttributeValue (“City”)
5.0. Creating DynamicUI (User Interface)
A) Creating dynamic table
a)   Creating table caption object:
     a) IWDCaption testCaption=view.createElement(IWDCaption.class,“captionid”);
   ClaimsCaption.setText(“TestTable”);
     b) Creating Table:
         IWDTable testTable= (IWDTable)
     view.createElement (IWDTable.
class,”tableid”);
     c) setting table’s width:
     v.setWidth(“100%”);
d)Setting table’s caption:
   testTable.setHeader (testCaption);
e)Setting table’s position:
     testTable.createLayoutData(IWDMatrixHeadData.class);
f)Binding table with a node:
     testTable.bindDataSource(nodeInfo);
Note: Same ways you can set properties whatever u want
B) Creating Columns & their Editor in table and binding to context Attribute
IWDCaption NameCaption = (IWDCaption) view.createElement(IWDCaption.class,” NameCaptionID”);
NameCaption.setText (“Name”);
IWDTableColumn NameColumn = (IWDTableColumn)view.createElement(IWDTableColumn.class,”NameColumnID”);
NameColumn.setHeader(NameCaption);
NameColumn.setHAlign(WDTableColumnHAlign.CENTER);
IWDInputField NameColumneditor = (IWDInputField) view.createElement(IWDInputField.class,    “NameColumneditorID”);
NameColumneditor.bindValue(nodeInfo.getAttribute(“Name”));
NameColumn.setTableCellEditor(NameColumneditor);
testable.addColumn(NameColumn;

Note: same way will add city column

C) Create Dynamic Tabs

IWDTabStrip ts = (IWDTabStrip)view.createElement(IWDTabStrip.class,“TabStrip”);
IWDTab tab1 = (IWDTab) view.createElement(IWDTab.class,“Tab1”);

c.    IWDCaption header1 = (IWDCaption) view.createElement(IWDCaption.class,“Header1”)
d.    header1.setText(“Tab1”);
e.    tab1.setHeader(header1);

f.    IWDTransparentContainer tabcontent=view.createElement(IWDTransparentContainer.class);
IWDTextView txvInstances=(IWDTextView)view.createElement(IWDTextView.class,“txvDet”);
txvInstances.setText(“Enter Details”);
  .    tabcontent.addChild(txvInstances);
i.     ts.add(tab1);                                                                          


6) How to use cell variant Dynamically.
a)   create an attribute CTX_VA_CellVariantName of String type
b)   create a text view for name column
IWDTextView NametxtView = (IWDTextView) view.createElement (IWDTextView.class,”NametxtView”);

AmtClaimtxtView.bindText (nodeInfo.getAttribute(“CTX_VA_Name”);
c)    create a table standard cell fro cell variant          

IWDTableStandardCellt2 = view.createElement (IWDTableStandardCell.class);

t2.setEditor(NametxtView);
            t2.setVariantKey (“noneditable”);
d)   following code is for creating a Name column & their editor(editor is inputfield)

IWDCaption NameCaption = (IWDCaption) view.createElement (IWDCaption.class,”NameCaption”);

NameCaption.setText(“Name”);
IWDTableColumn NameColumn = (IWDTableColumn) view.createElement(IWDTableColumn.class,”Name”);
NameColumn.setHeader(NameCaption);

NameColumn.setHAlign(WDTableColumnHAlign.CENTER);
IWDInputField Nameeditor = (IWDInputField) view.createElement (IWDInputField.class,”Nameeditor”);
Nameeditor.bindValue(CTX_VA_Name”);
            NameColumn.setTableCellEditor (Nameeditor);
e)  bind this column with table standard cell &cwith new created attribute
              NameColumn.addCellVariant(t2);           
            NameColumn.bindSelectedCellVariant (nodeInfo.getAttribute(“CTX_VA_CellVariantName”));                                
f)   Now if I want in last row  Name column should be text view.

            p_node.getElementAt (0).setAttributeValue(“CTX_VA_CellVariantName”, “noneditable”);

Assigned tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Thanks for the documnet.

      Very helpful

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thank You Bhagyashree Kulkarni.

      Author's profile photo Former Member
      Former Member

      Nice doc !!!!!!!!!!

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thank you Sandeep Chandrashekar

      Author's profile photo Former Member
      Former Member

      Hi deepa,

      It's well_written.But how to use it in our dayly development.Can you  give us  more detailed description. or  severy demos.thanks 🙂

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Juney Qiu,

      Thanks alot.

      I will show you the First Demo of Dynamic UI and Nodes.In that we will create the UI such as Tabs,Textviews,InputField and buttons.

      Step A : Create Node and Attribute in component Controller’s init()  Method.

      Here Node CTX_VN_Details is created with  two attributes CTX_VA_FNAME and CTX_VA_LNAME

      Code:

      IWDNodeInfo nodeInfo=null;

      nodeInfo  = wdContext.getNodeInfo().addChild("CTX_VN_Details"null,true, CMICardinality.ONE_TO_MANY,CMICardinality.ONE,true,null);

      nodeInfo.addAttribute("CTX_VA_FNAME","ddic:com.sap.dictionary.string");

      nodeInfo.addAttribute("CTX_VA_LNAME","ddic:com.sap.dictionary.string");

      Step B: Now we Will Map Component’s Node with View’s(Write below code in

      wdDoModifyView() method of View )

      IWDNodeInfo
      ccnodeinfo=
      wdThis.wdGetDynamicCompController().wdGetAPI().getContext().getRootNode().getChildNode("CTX_VN_Details",IWDNode.LEAD_SELECTION).getNodeInfo();

      IWDNodeInfo
      nodeInfo=
      wdThis.wdGetAPI().getContext().getRootNodeInfo().addMappedChild("CTX_VN_Details",null, true,false, true,null,false,true);

      nodeInfo.setMapping(ccnodeinfo, true);
      nodeInfo.addAttributesFromDataNode();

      Step C : Create Dynamic User Interface.Here We have created the dynamic Tab UI.

      Code :

      IWDTransparentContainer trn=  (IWDTransparentContainer)
      view.getElement(
      "trctabs"); // This is for using already created transparent container of your view.

      IWDTabStrip ts =(IWDTabStrip)view.createElement(IWDTabStrip.class,"tbs_1");//For creating TabStrip.

      IWDTab tab1 = (IWDTab) view.createElement(IWDTab.class,"Tab1");//Creating Tabs

      IWDCaption header1 = (IWDCaption) view.createElement(IWDCaption.class,"tbh_1");//Giving header to tab

      header1.setText("Tab1");//setting Tab’s Text

      tab1.setHeader(header1);

      ts.addTab(tab1);//adding tab into TabStrip

      trn.addChild(ts);//adding TabStrip to Transparent Container

      OutPut:

      /wp-content/uploads/2014/07/tab_500820.png

      Step D:Now We Will Create UI Elements in above created Tab.

      To create Tab Content We will create a container in that we will add UI elements As Follows

      Code:

      IWDTransparentContainer tabcontent=view.createElement(IWDTransparentContainer.class);

      tabcontent.createLayout(IWDMatrixLayout.class);//setting Matrix Layout of
      container

      IWDTextView txvName=(IWDTextView)view.createElement(IWDTextView.class,"txv_Name");

      txvName.setText("Enter First Name"); 

      tabcontent.addChild(txvName);//Creating TextView adding it to container

      IWDTextView txv_blanktextview=view.createElement(IWDTextView.class,"txv_blank1");

      txv_blanktextview.setVisible(WDVisibility.BLANK);

      txv_blanktextview.setText("TextView");

      tabcontent.addChild(txv_blanktextview);//creating Blank Textview  for Space between Textview and InputField

      IWDInputField inpFname=view.createElement(IWDInputField.class,"FName");

      inpFname.bindValue(nodeInfo.getAttribute("CTX_VA_FNAME"));

      tabcontent.addChild(inpFname);//creating Input Field for First Name

      IWDTextView txvLastName=(IWDTextView)view.createElement(IWDTextView.class,"txv_LastName");Creating another TextView for Last Name

      txvLastName.setText("Enter Last Name");          

      txvLastName.createLayoutData(IWDMatrixHeadData.class);

      tabcontent.addChild(txvLastName);                      

      IWDTextView txv_blanktextview2=view.createElement(IWDTextView.class,"txv_blank2");

      txv_blanktextview2.setVisible(WDVisibility.BLANK);

      txv_blanktextview2.setText("TextView");                                          

      tabcontent.addChild(txv_blanktextview2);//Creating blank TextView for space Between Last Textview and its input field

      IWDInputField inpLname=view.createElement(IWDInputField.class,"LName");

      inpLname.bindValue(nodeInfo.getAttribute("CTX_VA_LNAME"));//binding inputfield with attribute

      tabcontent.addChild(inpLname);

        tab1.setContent(tabcontent);//setting content in a tab

      Output:

      UI.png

      Step F:Create a Button Dynamically

      To Create a button dynamically first you need to create a  Action at
      design time As creating Action Event handler at Runtime is not possible.We will
      create Action then will associate it with the dynamic button.

      /wp-content/uploads/2014/07/action_500870.png

      Click On Add(+) then give a name to Action.

      /wp-content/uploads/2014/07/next_500871.png

      Then Next and Finish.

      Now Will Write Code for Dynamic Button:

      IWDAction btnAction=wdThis.wdCreateAction(IPrivateDynamicCompView.WDActionEventHandler.SUBMIT,"Submit");//Referring to design time Action which we had created

      IWDButton btn_submit=view.createElement(IWDButton.class,"btn_Submit");

      btn_submit.setText("Submit");

      btn_submit.setOnAction(btnAction);//linking button to a action

      btn_submit.createLayoutData(IWDMatrixHeadData.class);

      tabcontent.addChild(btn_submit);

      Output:

      /wp-content/uploads/2014/07/button_500872.png

      Now OnSubmitAction() Will Write a code which we want to execute on click of Submit Button.

      Here I am retrieving the values of Attributes CTX_VA_FNAME and CTX_VA_LNAME and Printing it.

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

        {

          //@@begin onActionSubmit(ServerEvent)

      String Fname="",LName="";

      IWDNode node=wdThis.wdGetAPI().getContext().getRootNode().getChildNode("CTX_VN_Details",0);

      Fname=node.getCurrentElement().getAttributeValue("CTX_VA_FNAME").toString();

      LName= node.getCurrentElement().getAttributeValue("CTX_VA_LNAME").toString();

      wdComponentAPI.getMessageManager().reportSuccess("Hello" + Fname +" "+ LName);

      //@@end

      }

      Output:

      /wp-content/uploads/2014/07/final_500885.png

      In Next Demo we will check how to create dynamic Tables and their bindings.

      Author's profile photo Former Member
      Former Member

      Thanks,It's very clear.I will learn from you later.