cancel
Showing results for 
Search instead for 
Did you mean: 

Dynamic UI creation - Multiple rows of UI elements

Former Member
0 Kudos

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

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

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

Answers (5)

Answers (5)

Former Member
0 Kudos

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

Former Member
0 Kudos

Thanks Ajay. That was a very helpful answer. Also wanted to know while submitting the page, how can i retriev the values for the dropdowns in each of the row??

regards,

Sujesh

Former Member
0 Kudos

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

Former Member
0 Kudos

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

thomas_szcs
Active Contributor
0 Kudos

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

Former Member
0 Kudos

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

Former Member
0 Kudos

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

Former Member
0 Kudos

Hi Armin,

I was trying out that . But the problem here is i dont have a datasource for the table to point to. I have 2 dropdowns in each row of the table and the data for the dropdown is coming from a model node. if i point my table ds to that node, table shows up with as many rows as there are in dropdown.

any help?

regards,

Sujesh

Former Member
0 Kudos

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