Skip to Content
avatar image
Former Member

Dynamic UI creation - Multiple rows of UI elements

Hi,

I need to create an iview which has multiple rows with some dropwonlist in each of the row. Initially it will have 5 rows. I can add more rows when i press "Add More" button. How do we do that?

Any help?

regards,

Sujesh

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

6 Answers

  • Best Answer
    avatar image
    Former Member
    Jul 27, 2006 at 06:53 AM

    Hi

    After selecting the values in the dropdowns you click the submit button.You can retrieve the selected values as follows in the action assigned to the onAction event of Submit button:

    for(int i=0; i < wdContext.nodeTableNode().size();i++)

    {

    String dd1val = wdContext.nodeTableNode().getTableNodeElementAt(i).nodeDropDown1Node().currentDropDown1NodeElement().getAttr1();

    String dd2val = wdContext.nodeTableNode().getTableNodeElementAt(i).nodeDropDown2Node().currentDropDown2NodeElement().getAttr1();

    }

    Regards,

    Ajay

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jul 26, 2006 at 10:53 AM

    IPrivate<ur view name>.I<node table>Element <node table>Element=wdContext.create<node Element>Element();

    <node Element>Element.set<ur attribute in node>("ur value to be set");

    wdContext.node<node Element>().bind(<node Element>Element);

    here <node Element> means , node attribute that u created in context tab.

    this will create one row...

    and binds it..

    if u want to add more that one row....make this in loop,

    1) create one array list

    2) open the loop depending upon ur condition

    3) create the rows as done above, but dont bind

    4) add those to array list like this: usersList.add(userFilterElement);

    here usersList is arraylist and userFilterElement is the one u created above.

    5) after coming out of the loop u bind it..

    that's it

    hope this helps u

    regards

    -


    sunil

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jul 26, 2006 at 10:50 AM

    You can use a Table with one column, cell editor=DropDownByIndex or DropDownByKey.

    If you add a node element to the table data source node, there will be an additional row with a drop-down list.

    Armin

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Former Member

      Start with the first part: a table with drop-down list as cell editor.

      Create value node "Rows" (0:N). Bind Table.dataSource to "Rows". Add TableColumn, cell editor=DropDownByIndex.

      Create subnode "Items" (0:N), supply function=supplyItems. Add attribute "Text" (string). Bind DropDownByIndex.texts to "Text".

      In supply function, create items for drop-down list at that row, you might start with dummy items.

      If this works, let's go on.

      Armin

  • Jul 26, 2006 at 11:10 AM

    Hi Sujesh,

    In case you happen to use Web Dynpro ABAP, you have the possibility to use a MultiPane ui element and to place your dropdown inside of it. Then you could do everything statically by defining the number of dropdowns by the number of elements in the node to which you bind the MultiPane to.

    Best regards,

    Thomas

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jul 26, 2006 at 12:32 PM

    hi sujesh,

    For this kind of problem you have to create two views in dynpro. first one to place the button and next is used for dynamic part.

    create two integer type attributes in context of controller and mapping them with the views.

    one to increment the dropdowns and another one is used to avoid duplication.

    when the "Add more" button is triggered, call the dynamic view using firePlug method and also you can set the value for the two context attributes.

    in dynamic view get the attribute values and store them into two variables (say inc and next).(Note: for the first time both will give '0' so with the help of If condition change the inc value to 5).Use 'inc' in looping statement to increase the row of dropdownlists. place the dynamic code inside this to create the dropdowns. 'next' variable is used to avoid the duplication when the view refreshes more than once.

    while creating dynamic Dropdowns and context nodes and attributes append this two variables (inc and next using concatenation) at the end of the text.

    hope this will help you

    regards

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jul 26, 2006 at 12:59 PM

    Hi

    You create one value node say TableNode with following structure.

    TableNode with two child value nodes for each <b>DropDownbyIndex</b>.Both the child node have to be non singleton(Singleton property of thses node should be false).The value attributes of these child node should be bound to the Texts property of the DropDownByIndex in the Table.

    Node Structure :

    TableNode

    |--DropDownNode1(Non Singleton Node)

    | |__Attr1

    |

    |--DropDownNode2(Non Singleton Node)

    |__Attr2

    Now you can create 5 rows in table using code someting like this in doInit:

    //Create 5 table rows

    for(int i =0;i<5,i++)

    {

    ITableNodeElement row = wdContext.nodeTableNode().createTableNodeElement();

    wdContext.nodeTableNode().addElement(row);

    //Creating the DorpDown values.

    //Assuming Values for DropDown1 are in the nodeBapiNode1

    for(int i=0;i<wdContext.NodeBapiNode1().size();i++)

    {

    IDropDownNode1Element dd1 = wdContext.nodeDropDownNode1().createDropDownNode1Element();

    dd1.setAttr1(wdContext.nodeBapiNode1().getBapiNodeElementAt(i).getAttr1();

    row.nodeDropDownNode1().addElement(dd1);

    }

    //similarly write a for loop for DropDown2

    }

    This code will create 5 rows in the Table with the dropdowns populated with the values from the BAPI nodes.

    When you want to add one row on click of Add button.

    Write following code in the Action assigned for the onAction wvent of the button Add.

    ITableNodeElement row = wdContext.nodeTableNode().createTableNodeElement();

    wdContext.nodeTableNode().addElement(row);

    //Creating the DorpDown values.

    //Assuming Values for DropDown1 are in the nodeBapiNode1

    for(int i=0;i<wdContext.NodeBapiNode1().size();i++)

    {

    IDropDownNode1Element dd1 = wdContext.nodeDropDownNode1().createDropDownNode1Element();

    dd1.setAttr1(wdContext.nodeBapiNode1().getBapiNodeElementAt(i).getAttr1();

    row.nodeDropDownNode1().addElement(dd1);

    }

    //similarly write a for loop for DropDown2

    Regards,

    Ajay

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Former Member

      Hi Sujesh,

      First find the size of the table,size

      for(int j=0;j<size;j++)

      {

      you can get the each row of element by,

      wdContext.node<tablenode>.get<Node>ElementAt(j).get<Attribute>();

      like this you can get value of each attribute

      }

      Regards,

      Saravanan K